From b5de98d828ee3bed20561675a6805cb9be20a59a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o=20Lebrun?= Date: Wed, 5 Feb 2025 15:42:46 +0100 Subject: [PATCH] style.css: fluid spacing of nav-links for mobile MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- static/style.css | 15 +++++++++++---- templates/layout.html | 2 +- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/static/style.css b/static/style.css index 77d7703c..88bf4bb7 100644 --- a/static/style.css +++ b/static/style.css @@ -1512,6 +1512,11 @@ 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); @@ -1519,10 +1524,6 @@ main { 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.6ch; + } .banners { justify-content: flex-start; } diff --git a/templates/layout.html b/templates/layout.html index 92a16539..bd622bf3 100644 --- a/templates/layout.html +++ b/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 %}"> - +