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 12:33:08 -06:00 • committed by GitHub
parent bafd4f29af
commit 339688b075
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 14 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

47
public/styles.css
View file

@ -1,8 +1,7 @@
/* ============================================================ /* ============================================================
THE FOLD WITHIN — Self-Organizing Static Site Framework v2.3.2 THE FOLD WITHIN — Self-Organizing Static Site Framework v2.3.3
============================================================ */ ============================================================ */
/* 1. Palette & Typography */
:root { :root {
--bg: #0b0c10; --bg: #0b0c10;
--fg: #f3f3f3; --fg: #f3f3f3;
@ -10,6 +9,7 @@
--muted: #8d8f95; --muted: #8d8f95;
--line: #2a2d34; --line: #2a2d34;
} }
html,body { html,body {
margin:0; padding:0; margin:0; padding:0;
background:var(--bg); color:var(--fg); background:var(--bg); color:var(--fg);
@ -18,7 +18,7 @@ html,body {
scroll-behavior:smooth; scroll-behavior:smooth;
} }
/* 2. Topbar */ /* Topbar */
.topbar { .topbar {
position:fixed; top:0; left:0; right:0; position:fixed; top:0; left:0; right:0;
height:48px; display:flex; align-items:center; height:48px; display:flex; align-items:center;
@ -29,11 +29,12 @@ html,body {
.topbar a:hover{ color:var(--fg); } .topbar a:hover{ color:var(--fg); }
.topbar button { .topbar button {
font-size:24px; background:transparent; color:var(--accent); font-size:24px; background:transparent; color:var(--accent);
border:none; padding:4px 8px; cursor:pointer; transition:color .2s; border:none; padding:4px 8px; cursor:pointer;
transition:color .2s;
} }
.topbar button:hover{ color:var(--fg); } .topbar button:hover{ color:var(--fg); }
/* 3. Sidebar + Overlay */ /* Sidebar & overlay */
.sidebar { .sidebar {
position:fixed; top:48px; bottom:0; left:0; position:fixed; top:48px; bottom:0; left:0;
width:85%; max-width:320px; overflow-y:auto; width:85%; max-width:320px; overflow-y:auto;
@ -49,7 +50,7 @@ html,body {
} }
.sidebar.open ~ .overlay{ opacity:1; pointer-events:all; } .sidebar.open ~ .overlay{ opacity:1; pointer-events:all; }
/* 4. Content */ /* Content */
.content { .content {
margin-top:48px; padding:16px; margin-top:48px; padding:16px;
transition:margin-left .3s ease; max-width:960px; transition:margin-left .3s ease; max-width:960px;
@ -66,13 +67,14 @@ html,body {
#htmlView,#mdView{ min-height:calc(100vh - 60px); } #htmlView,#mdView{ min-height:calc(100vh - 60px); }
} }
/* 5. Viewer */ /* Viewer */
.viewer { .viewer {
height:calc(100vh - 80px); min-height: calc(100vh - 140px);
overflow:auto; max-width:820px; overflow:auto; max-width:820px;
margin:0 auto; padding-bottom:40px; margin:0 auto; padding-top:8px; padding-bottom:40px;
} }
#htmlView{ width:100%; height:100%; border:none; background:#0b0c10; } #htmlView{ width:100%; height:100%; border:none; background:#0b0c10; }
#mdView h1,#mdView h2,#mdView h3{ color:var(--accent); } #mdView h1,#mdView h2,#mdView h3{ color:var(--accent); }
#mdView pre,#mdView code{ #mdView pre,#mdView code{
overflow-x:auto; word-break:break-word; overflow-x:auto; word-break:break-word;
@ -84,7 +86,7 @@ html,body {
} }
#mdView a{ color:var(--accent); } #mdView a{ color:var(--accent); }
/* 6. Meta + Pager */ /* Meta + pager */
.meta{ color:var(--muted); margin-bottom:12px; font-size:.9em; } .meta{ color:var(--muted); margin-bottom:12px; font-size:.9em; }
.pager{ display:flex; justify-content:space-between; padding:8px 0; } .pager{ display:flex; justify-content:space-between; padding:8px 0; }
button#prev,button#next{ button#prev,button#next{
@ -96,28 +98,7 @@ button#prev:hover,button#next:hover{
border-color:var(--accent); color:var(--accent); border-color:var(--accent); color:var(--accent);
} }
/* 7. Controls */ /* Controls */
.controls{ display:flex; gap:.5em; margin-bottom:8px; } .controls{ display:flex; gap:.5em; margin-bottom:8px; }
select,#search{ select,#search{
background:#0b0c10; color:var(--fg); background:#0b0c10; color:var(--
border:1px solid var(--line); border-radius:4px; padding:6px;
font-size:.9em;
}
#search{ flex:1; }
/* 8. Directory Tree */
.dir .label{
display:flex; align-items:center; cursor:pointer;
padding:4px 6px; color:var(--accent); font-weight:600;
user-select:none;
}
.dir .label::before{
content:"▶"; margin-right:6px; font-size:.8em; color:var(--muted);
transition:transform .2s;
}
.dir.open .label::before{ content:"▼"; }
.children{
display:none; margin-left:1em;
border-left:1px dashed var(--line); padding-left:10px;
}
.dir.open > .children{ display:block; }