mrhavens/thefoldwithin-earth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Update styles.css

Browse source
This commit is contained in:
Mark Randall Havens △ The Empathic Technologist ⟁ Doctor Who 42 2025-11-08 23:25:45 -06:00 • committed by GitHub
parent a60d068794
commit f6ece1f0b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 43 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

49
public/styles.css
View file

@ -3,6 +3,7 @@
--fg: #e6e3d7; --fg: #e6e3d7;
--accent: #e0b84b; --accent: #e0b84b;
--topbar-h: 56px; --topbar-h: 56px;
--subnav-h: 44px;
--transition: .3s ease; --transition: .3s ease;
--radius: 8px; --radius: 8px;
} }
@ -47,8 +48,44 @@ html, body {
text-shadow: 0 0 8px var(--accent); text-shadow: 0 0 8px var(--accent);
} }
/* HORIZON LAYER: Sub-Navigation */
.sub-nav {
display: none;
position: fixed;
top: var(--topbar-h);
left: 0; right: 0;
height: var(--subnav-h);
background: #0e0e0e;
border-bottom: 1px solid #222;
padding: 0 1rem;
gap: 1rem;
overflow-x: auto;
white-space: nowrap;
z-index: 950;
align-items: center;
opacity: 0;
transition: opacity var(--transition);
}
.sub-nav.visible {
display: flex;
opacity: 1;
}
.sub-nav a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
font-size: 0.95rem;
transition: all var(--transition);
}
.sub-nav a:hover {
text-shadow: 0 0 6px var(--accent);
}
#sidebar { #sidebar {
position: fixed; top: var(--topbar-h); left: 0; position: fixed; top: calc(var(--topbar-h) + var(--subnav-h)); left: 0;
width: 300px; bottom: 0; overflow: auto; width: 300px; bottom: 0; overflow: auto;
background: #111; border-right: 1px solid #222; background: #111; border-right: 1px solid #222;
transform: translateX(-100%); transition: transform var(--transition); transform: translateX(-100%); transition: transform var(--transition);
@ -124,14 +161,14 @@ body.sidebar-open #sidebar { transform: translateX(0); }
} }
.content { .content {
margin-top: var(--topbar-h); margin-left: 0; margin-top: calc(var(--topbar-h) + var(--subnav-h)); margin-left: 0;
transition: margin-left var(--transition); transition: margin-left var(--transition), margin-top var(--transition);
min-height: calc(100vh - var(--topbar-h)); min-height: calc(100vh - var(--topbar-h) - var(--subnav-h));
padding: 2rem 1rem; padding: 2rem 1rem;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
#sidebar { transform: translateX(0); } #sidebar { transform: translateX(0); top: calc(var(--topbar-h) + var(--subnav-h)); }
.content { margin-left: 300px; } .content { margin-left: 300px; }
} }
@ -146,7 +183,7 @@ body.sidebar-open #sidebar { transform: translateX(0); }
} }
.viewer iframe { .viewer iframe {
width: 100%; height: calc(100vh - var(--topbar-h) - 80px); width: 100%; height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 80px);
border: 0; border-radius: var(--radius); background: transparent; border: 0; border-radius: var(--radius); background: transparent;
display: block; display: block;
} }