diff --git a/public/site-styles/style.css b/public/site-styles/style.css index e7dbeb3..66c663d 100644 --- a/public/site-styles/style.css +++ b/public/site-styles/style.css @@ -82,8 +82,9 @@ .banner-title { font-size: 1.8rem; top: calc(var(--pico-typography-spacing-vertical) * 0.5); - left: var(--pico-spacing); - right: var(--pico-spacing); + /* left: 50%; */ + right: auto; + /* transform: translateX(-50%); */ } } @@ -258,18 +259,44 @@ } /* Mobile breakpoint - hide desktop nav and show mobile nav */ -@media (max-width: 768px) { +@media (max-width: 767px) { .desktop-nav { display: none; } .mobile-nav { display: flex; + flex: 0 0 auto; + } + + /* Arrange mobile nav items horizontally */ + header nav { + flex-direction: row !important; + justify-content: space-between !important; + align-items: center; + gap: 0; + } + + /* Make the About/theme toggle ul display as flex */ + header nav > ul:not(.desktop-nav):not(.mobile-nav) { + display: flex !important; + gap: calc(var(--pico-spacing) * 0.5); + align-items: center; + flex: 0 0 auto; + margin: 0; + } + + header nav > ul:not(.desktop-nav):not(.mobile-nav) { + padding: 0; + } + + header nav > ul:not(.desktop-nav):not(.mobile-nav) li { + margin: 0; } - /* Style the dropdown for mobile */ .mobile-nav .dropdown { - width: 100%; + width: auto; + min-width: 120px; } .mobile-nav .dropdown summary {