diff --git a/assets/css/main.scss b/assets/css/main.scss index 7c1f95b..b957964 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -219,27 +219,34 @@ h1, h2, h3, h4, h5, h6 { /* Mobile navigation optimizations */ @media (max-width: 768px) { .greedy-nav { + flex-wrap: nowrap !important; + a.site-title { - font-size: 0.9em; - margin-inline-end: 0.5rem !important; + font-size: 0.85em; + margin-inline-end: 0.3rem !important; + white-space: nowrap; } .visible-links { - margin-inline-end: 0.5rem; + margin-inline-end: 0.3rem; + flex-wrap: nowrap !important; - li:first-child { + li { + /* All items need flex: 0 0 auto to prevent shrinking and stay on one line */ flex: 0 0 auto !important; } a { - margin: 0 0.5rem !important; - font-size: 0.9em; + margin: 0 0.3rem !important; + font-size: 0.85em; + white-space: nowrap; } } .theme-toggle { - margin-inline-start: 0.25rem; - padding: 0.4em; + margin-inline-start: 0.15rem; + padding: 0.35em; + flex-shrink: 0; } } @@ -401,14 +408,35 @@ table { padding: 1.5em; } - .theme-toggle { - padding: 0.375em; + .greedy-nav { + a.site-title { + font-size: 0.8em; + margin-inline-end: 0.2rem !important; + } + + .visible-links { + margin-inline-end: 0.2rem; + + a { + margin: 0 0.2rem !important; + font-size: 0.8em; + } + } - svg { - width: 1.125em; - height: 1.125em; + .theme-toggle { + margin-inline-start: 0.1rem; + padding: 0.3em; + + svg { + width: 1em; + height: 1em; + } } } + + .site-logo img { + max-height: 1.3rem !important; + } } /* ==========================================================================