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;
--accent: #e0b84b;
--topbar-h: 56px;
--subnav-h: 44px;
--transition: .3s ease;
--radius: 8px;
}
@ -47,8 +48,44 @@ html, body {
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 {
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;
background: #111; border-right: 1px solid #222;
transform: translateX(-100%); transition: transform var(--transition);
@ -124,14 +161,14 @@ body.sidebar-open #sidebar { transform: translateX(0); }
}
.content {
margin-top: var(--topbar-h); margin-left: 0;
transition: margin-left var(--transition);
min-height: calc(100vh - var(--topbar-h));
margin-top: calc(var(--topbar-h) + var(--subnav-h)); margin-left: 0;
transition: margin-left var(--transition), margin-top var(--transition);
min-height: calc(100vh - var(--topbar-h) - var(--subnav-h));
padding: 2rem 1rem;
}
@media (min-width: 1024px) {
#sidebar { transform: translateX(0); }
#sidebar { transform: translateX(0); top: calc(var(--topbar-h) + var(--subnav-h)); }
.content { margin-left: 300px; }
}
@ -146,7 +183,7 @@ body.sidebar-open #sidebar { transform: translateX(0); }
}
.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;
display: block;
}