header and navigation design updates

aorcsik · Sep 2, 2024 · e104f3a · e104f3a
1 parent 2efd4c1
commit e104f3a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 43 deletions.
diff --git a/src/css/client.css b/src/css/client.css
@@ -289,48 +289,55 @@ p {
   padding: 0;
 }
 
-#header nav ul li {
-  text-align: right;
-  padding: .5rem 1.25rem .5rem 0;
+#header nav ul > li {
+  padding: .5rem 1.25rem;
 
   transition: color .2s;
 }
 
-#header nav ul li.separator:before {
-  content: "";
-  display: block;
-  width: 50%;
-  margin-left: auto;
-  height: 2px;
-  background: var(--nav-color);
-  opacity: .5;
+#header nav ul > li.separator {
+  display: none;
 }
 
-#header nav ul li a {
+#header nav ul > li > a {
   color: var(--nav-color);
 
   transition: color .2s;
 }
 
-#header nav ul li.social {
+#header nav ul > li.social {
   display: flex;
   align-items: center;
-  padding-right: 1.5rem;
+  justify-content: center;
+  gap: 1rem;
 }
-#header nav ul li.social a {
-  margin-left: 1rem;
+
+#header nav ul > li > span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: .5em;
 }
-#header nav ul li.social a:first-child {
-  margin-left: auto;
+#header nav ul > li > span i {
+  margin-top: 3px;
 }
 
-#header nav ul li span {
-  display: none;
+#header nav ul > li > ul {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: .75rem;
+  margin: 1rem;
 }
 
-#header nav ul li ul li {
+#header nav ul > li > ul > li {
   padding-right: 0;
   font-size: 1.25rem;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  padding: .5rem 1rem;
+}
+#header nav ul > li > ul > li:first-child {
+  border-width: 0;
 }
 
 #header #read-progress {
@@ -363,45 +370,43 @@ p {
     background-color: transparent;
   }
 
-  #header nav ul {
+  #header nav > ul {
     display: flex;
   }
 
-  #header nav ul li.separator:before {
+  #header nav > ul > li.separator {
+    display: block;
+    padding-left: 0;
+    padding-right: 0;
+  }
+  #header nav > ul > li.separator:before {
     content: "|";
     background: transparent;
     height: auto;
     width: auto;
   }
 
-  #header nav ul li span {
-    display: block;
-  }  
-
-  #header nav ul li ul {
+  #header nav > ul > li > ul {
     position: absolute;
     background: var(--background);
-    padding: .5rem 1rem;
     margin-top: .5rem;
-    margin-left: -1rem;
-    border-radius: .5rem;
     box-shadow: var(--medium-shadow);
 
     opacity: 0;
     transform: translateY(-30px);
     transition: opacity .3s, transform .3s;
   }
 
-  #header nav ul li:hover ul {
+  #header nav > ul > li:hover ul {
     opacity: 1;
     transform: translateY(0);
   }
 }
 
-#menu-toggle:checked + header#header nav ul li,
-#menu-toggle:checked + header#header nav ul li a,
-header#header.sticky nav ul li,
-header#header.sticky nav ul li a {
+#menu-toggle:checked + header#header nav > ul > li,
+#menu-toggle:checked + header#header nav > ul > li > a,
+header#header.sticky nav > ul > li,
+header#header.sticky nav > ul > li > a {
   color: var(--nav-color);
 }
 
@@ -424,12 +429,12 @@ header#header.sticky #logo span.logo-tail {
 .has-background #header #menu-toggle-button {
   color: var(--nav-color-invert);
 }
-.has-background #header nav ul li,
-.has-background #header nav ul li a {
+.has-background #header nav > ul > li,
+.has-background #header nav > ul > li > a {
   color: var(--nav-color-invert);
 }
-.has-background #header nav ul li ul li,
-.has-background #header nav ul li ul li a {
+.has-background #header nav > ul > li > ul > li,
+.has-background #header nav > ul > li > ul > li > a {
   color: var(--nav-color);
 }
 

diff --git a/src/ejs/_header.ejs b/src/ejs/_header.ejs
@@ -65,16 +65,21 @@
       <label id="menu-toggle-button" for="menu-toggle"><i class="fa-regular fa-bars"></i></label>
       <nav>    
         <ul>
-          <li><a href="/pixelart.html">pixelart</a></li>
+          <li><span><i class="fa-solid fa-rocket"></i> projects</span>
+            <ul>
+              <li><a href="/pixelart.html">PixelArt</a></li>
+              <!-- <li><a href="https://aorcsik.github.io/gofri/" target="_blank">Gofri</a></li> -->
+            </ul>
+          </li>
           <li class="separator"></li>
-          <li><span>games</span>
+          <li><span><i class="fa-solid fa-gamepad-modern"></i> games</span>
             <ul>
               <li><a href="/blog/elden-ring.html">Elden Ring</a></li>
             </ul>
           </li>
           <li class="separator"></li>
           <li class="social">
-            <a href="https://twitter.com/aorcsik" target="_blank" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
+            <a href="https://twitter.com/aorcsik" target="_blank" title="X (Twitter)"><i class="fa-brands fa-x-twitter"></i></a>
             <a href="https://github.com/aorcsik" target="_blank" title="GitHub"><i class="fa-brands fa-github"></i></a>
             <a href="https://linkedin.com/in/aorcsik" target="_blank" title="LinkedIn"><i class="fa-brands fa-linkedin"></i></a>
           </li>