💄 style: improve navigation bar & metadata wrapping (#425)

sass/parts/_header.scss

@@ -24,12 +24,14 @@ header {
 .nav-navs {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
 
     ul {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
+        flex-wrap: inherit;
+        justify-content: inherit;
+        align-items: inherit;
+        gap: inherit;
         gap: 1px;
         margin: 0;
         padding: 0;
@@ -37,6 +39,12 @@ header {
     }
 }
 
+#menu-icons-group {
+    gap: 1px;
+    margin: 0;
+    padding: 0;
+}
+
 .nav-links {
     justify-content: right;
     padding: 0.66rem;
@@ -76,11 +84,22 @@ header {
 
     ul,
     li {
-        display: inline;
+        display: inline-block;
+        margin-inline-end: 0.2rem;
         font-family: var(--sans-serif-font);
         list-style-type: none;
     }
+
+    .tag {
+        margin-inline-end: 0;
+    }
+
+    .separator {
+        margin-inline-end: 0.2rem;
+        user-select: none;
+    }
 }
+
 .language-switcher {
     display: flex;
     justify-content: center;
@@ -147,21 +166,17 @@ header {
 
     .nav-navs {
         display: flex;
-        justify-content: flex-end;
+        justify-content: center;
     }
 }
 
 @media only screen and (max-width: 600px) {
     .nav-navs {
-        flex-wrap: wrap;
-        justify-content: center;
         margin-top: 0.8rem;
-        width: 100%;
     }
 
     .navbar {
         flex-direction: column;
-        justify-content: center;
         align-items: center;
     }
 }