style.css: fluid spacing of nav-links for mobile

Before we had a set gap inbetween each link. That means that carriage
returns happen quickly on mobile. Once we switch to mobile width, let
flexbox justify-content spread links on the line. It'll wrap once there
is no more space.

Previously, most mobiles showed two lines of links.
Now we only have one (but links are closer).

Signed-off-by: Théo Lebrun <[email protected]>

Author: tleb

static/style.css

@@ -1512,17 +1512,18 @@ main {
 }
 
 .nav-links {
+  /* Fixed spacing between links */
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 2ch;
   padding: 0.5em 1em;
   margin: 0;
   background-color: rgba(0,0,0,.5);
   width: 100%;
   font-size: 0.8em;
   line-height: 1.7;
 }
-.nav-links li {
-  display: inline-block;
-  margin: 0 0.5em;
-}
 .nav-links a {
   text-transform: uppercase;
   color: #9da9ea;
@@ -1556,6 +1557,12 @@ main {
 /* responsive */
 
 @media (max-width: 748px) {
+  .nav-links {
+    /* Fluid spacing to avoid carriage returns on mobile */
+    padding: 0.5em 0;
+    justify-content: space-around;
+    gap: 0;
+  }
   .banners {
     justify-content: flex-start;
   }

templates/layout.html

@@ -15,7 +15,7 @@
             Elixir Cross Referencer - Explore source code in your browser - Particularly useful for the Linux kernel and other low-level projects in C/C++ (bootloaders, C libraries...)
             {%- endblock %}">
         <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
-        <link rel="stylesheet" href="/static/style.css?v=15">
+        <link rel="stylesheet" href="/static/style.css?v=16">
 
         <link rel="preload" href="/static/img/2penguins.svg" as="image" />
         <link rel="preload" href="/static/img/arrow-dropdown-16.svg" as="image" />