LinksHeader: add flex to desktop view

- Display reverts to `block` on mobile
- added `.links-header-item` class to `<a>` children of links header container

Author: MasssiveJuice08

quartz/components/LinksHeader.tsx

@@ -10,24 +10,24 @@ export default (() => {
     return (
       <div id="links-header-container">
         <div id="links-header">        
-            <a href="/guides/">
+            <a class="links-header-item" href="/guides/">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-check"><path d="M8 3H2v15h7c1.7 0 3 1.3 3 3V7c0-2.2-1.8-4-4-4Z"/><path d="m16 12 2 2 4-4"/><path d="M22 6V3h-6c-2.2 0-4 1.8-4 4v14c0-1.7 1.3-3 3-3h7v-2.3"/></svg>
             Guides</a>    
-            <a href="/modding-tools/">
+            <a class="links-header-item" href="/modding-tools/">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
             Tools</a>     
-            <a href="https://tes3cs.pages.dev/">
+            <a class="links-header-item" href="https://tes3cs.pages.dev/">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil-ruler"><path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13"/><path d="m8 6 2-2"/><path d="m18 16 2-2"/><path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/></svg>
             Construction Set</a>
-            <a href="/programmers-reference/">
+            <a class="links-header-item" href="/programmers-reference/">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-json"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 12a1 1 0 0 0-1 1v1a1 1 0 0 1-1 1 1 1 0 0 1 1 1v1a1 1 0 0 0 1 1"/><path d="M14 18a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1 1 1 0 0 1-1-1v-1a1 1 0 0 0-1-1"/></svg>
             Programmers Reference</a>
           {/* <div>
             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
-            <a href="/Projects/">Projects</a>
+            <a class="links-header-item" href="/Projects/">Projects</a>
           </div> */}
           {/* commented out 'Projects' as it has no content and its use-case is still dubious */}
-            <a href="/contributing/">
+            <a class="links-header-item" href="/contributing/">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-alert"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
             Contributing</a>
         </div>

quartz/components/styles/linksHeader.scss

@@ -8,16 +8,22 @@ header {
 #links-header {
   font-size: 1.2em;
   margin: 0 0.2em;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-content: space-between;
 
   svg {
     height: 1em;
     margin: 0 0.3em 0 0;
     vertical-align: middle;
   }
 
-  a {
+  a.links-header-item {
     display: inline-block;
     padding: 10px 15px;
+    box-sizing: border-box;
+    width: 20%;
   }  
 }
 
@@ -29,7 +35,13 @@ header {
 
 @media screen and (max-width: $mobileBreakpoint) {
   #links-header {
+    display: block;
     overflow: scroll;
     white-space: nowrap;
+  
+    & a.links-header-item {
+      box-sizing: unset;
+      width: unset;
+    }
   }
 }