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 %}"> - +