diff --git a/assets/css/style.css b/assets/css/style.css index b2c43a2..0e36300 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -479,14 +479,13 @@ nav a { z-index: 10000; overflow: hidden; background-color: var(--black); - grid-template-columns: 1fr; - grid-template-rows: auto auto minmax(0, 1fr); + grid-template-columns: 1fr auto; + grid-template-rows: auto minmax(0, 1fr); grid-template-areas: - "logo" - "toggle" - "menu"; - row-gap: 0.65rem; - justify-items: center; + "logo toggle" + "menu menu"; + row-gap: 1.75rem; + column-gap: 0.75rem; align-content: start; box-sizing: border-box; } @@ -505,8 +504,9 @@ nav a { } .portal-nav.portal-nav--open .logo { - justify-self: center; - width: min(240px, 72vw); + justify-self: start; + align-self: center; + width: min(240px, calc(100% - 3.25rem)); transform: none; } @@ -529,8 +529,9 @@ nav a { } .portal-nav.portal-nav--open .portal-nav__menu-toggle { - justify-self: center; - align-self: center; + grid-area: toggle; + justify-self: end; + align-self: start; } .portal-nav>ul { @@ -553,14 +554,27 @@ nav a { flex: 1 1 auto; min-height: 0; width: 100%; - margin-top: 0.5rem; - padding-top: 1rem; + margin-top: 0; + padding-top: 0; padding-bottom: 1.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; justify-self: stretch; - border-top: 1px solid rgba(255, 204, 0, 0.2); + gap: 0; + border-top: 0; + } + + .portal-nav.portal-nav--open>ul>li { + width: 100%; + max-width: 100%; + position: relative; + padding-bottom: 0; + } + + .portal-nav.portal-nav--open>ul>li>a { + min-height: 40px; + padding: 6px 12px; } .portal-nav>ul>li {