💄style: improve navigation bar & metadata wrapping

- Group wrapped navigation icons
- Better wrapping of article metadata:
  - Tags never get split
  - Separator uses a class instead of non-breaking spaces
  - Elements are joined with their separator
  - Elements starting in a new line (due to wrapping), do not get space before the separator

sass/parts/_header.scss

@@ -24,13 +24,15 @@ header {
 .nav-navs {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    gap: 1px;
 
     ul {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        gap: 1px;
+        display: inherit;
+        flex-wrap: inherit;
+        justify-content: inherit;
+        align-items: inherit;
+        gap: inherit;
         margin: 0;
         padding: 0;
         list-style: none;
@@ -76,11 +78,18 @@ header {
 
     ul,
     li {
-        display: inline;
+        display: inline-block;
+        margin-inline-end: 0.2rem;
         font-family: var(--sans-serif-font);
         list-style-type: none;
     }
+
+    .separator {
+        margin-inline-end: 0.2rem;
+        user-select: none;
+    }
 }
+
 .language-switcher {
     display: flex;
     justify-content: center;