fix header responsive
This commit is contained in:
+6
-5
@@ -95,7 +95,8 @@ body.theme-moon::before {
|
||||
|
||||
header {
|
||||
display:flex; justify-content:space-between; align-items:center;
|
||||
padding:0 2rem; height:64px;
|
||||
padding:env(safe-area-inset-top) 2rem 0;
|
||||
height:calc(64px + env(safe-area-inset-top));
|
||||
background:rgba(2,4,8,.75); backdrop-filter:blur(20px);
|
||||
border-bottom:1px solid var(--border);
|
||||
position:sticky; top:0; z-index:100;
|
||||
@@ -136,10 +137,10 @@ header h1:hover { animation:glitch .4s steps(1) forwards; }
|
||||
background:rgba(2,6,14,.96); backdrop-filter:blur(24px);
|
||||
border-right:1px solid var(--border);
|
||||
transition:left .35s cubic-bezier(.4,0,.2,1), border-color .6s ease;
|
||||
z-index:1000; padding-top:5rem; overflow-y:auto;
|
||||
z-index:1000; padding-top:calc(5rem + env(safe-area-inset-top)); overflow-y:auto;
|
||||
}
|
||||
.sidebar::before {
|
||||
content:'NAVIGATION'; position:absolute; top:1.5rem; left:1.5rem;
|
||||
content:'NAVIGATION'; position:absolute; top:calc(1.5rem + env(safe-area-inset-top)); left:1.5rem;
|
||||
font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.25em;
|
||||
color:var(--text-muted);
|
||||
}
|
||||
@@ -471,7 +472,7 @@ header h1:hover { animation:glitch .4s steps(1) forwards; }
|
||||
#credits-panel.open { right:0; }
|
||||
|
||||
.credits-close {
|
||||
position:absolute; top:1rem; right:1rem;
|
||||
position:absolute; top:calc(1rem + env(safe-area-inset-top)); right:1rem;
|
||||
background:transparent; border:1px solid var(--border); border-radius:6px;
|
||||
color:var(--text-muted); width:32px; height:32px; font-size:.8rem; cursor:pointer;
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
@@ -548,7 +549,7 @@ header h1:hover { animation:glitch .4s steps(1) forwards; }
|
||||
#layer-Quiz .desc-box, #layer-Quiz .daily-challenge-box { display:none; }
|
||||
}
|
||||
@media (max-width:520px) {
|
||||
header { padding:0 1rem; }
|
||||
header { padding:env(safe-area-inset-top) 1rem 0; }
|
||||
header h1 { font-size:.85rem; letter-spacing:.05em; text-align:center; }
|
||||
.menu-icon, .help-btn { padding:.4rem .6rem; font-size:.7rem; }
|
||||
#content-area { padding:1.5rem 1rem; }
|
||||
|
||||
Reference in New Issue
Block a user