diff --git a/assets/css/style.css b/assets/css/style.css index 6819c25..e33bdb1 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -481,11 +481,13 @@ nav a { overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: var(--black); - grid-template-columns: 1fr auto; + display: grid; + grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: - "head head" - "menu menu"; + "head" + "menu"; + row-gap: 1.25rem; align-content: start; box-sizing: border-box; } @@ -498,6 +500,21 @@ nav a { .portal-nav.portal-nav--open .logo { grid-area: head; justify-self: center; + align-self: start; + width: min(260px, calc(100% - 3.5rem)); + max-width: 100%; + margin: 0 auto; + padding: 0 2.75rem 0.25rem; + box-sizing: border-box; + transform: none; + } + + .portal-nav.portal-nav--open .logo img { + display: block; + width: 100%; + height: auto; + max-height: 3.25rem; + object-fit: contain; } .portal-nav__menu-toggle { @@ -510,9 +527,11 @@ nav a { } .portal-nav.portal-nav--open .portal-nav__menu-toggle { - grid-area: head; - justify-self: end; - align-self: center; + position: absolute; + top: max(0.85rem, env(safe-area-inset-top, 0px)); + right: clamp(14px, 2vw + 10px, 32px); + z-index: 2; + grid-area: unset; } .portal-nav>ul { @@ -526,19 +545,21 @@ nav a { width: 100%; min-width: 0; margin-top: 0; - padding: 8px 0 12px; - border-top: 1px solid rgba(255, 204, 0, 0.2); + padding: 0 0 12px; + border-top: 0; } .portal-nav.portal-nav--open>ul { display: flex; flex: 1 1 auto; min-height: 0; - margin-top: 12px; + margin-top: 0; + padding-top: 1rem; padding-bottom: 1.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; + border-top: 1px solid rgba(255, 204, 0, 0.2); } .portal-nav>ul>li {