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 {
--bg: #0b0c10;
--fg: #f3f3f3;
@ -10,6 +9,7 @@
--muted: #8d8f95;
--line: #2a2d34;
}
html,body {
margin:0; padding:0;
background:var(--bg); color:var(--fg);
@ -18,7 +18,7 @@ html,body {
scroll-behavior:smooth;
}
/* 2. Topbar */
/* Topbar */
.topbar {
position:fixed; top:0; left:0; right:0;
height:48px; display:flex; align-items:center;
@ -29,11 +29,12 @@ html,body {
.topbar a:hover{ color:var(--fg); }
.topbar button {
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); }
/* 3. Sidebar + Overlay */
/* Sidebar & overlay */
.sidebar {
position:fixed; top:48px; bottom:0; left:0;
width:85%; max-width:320px; overflow-y:auto;
@ -49,7 +50,7 @@ html,body {
}
.sidebar.open ~ .overlay{ opacity:1; pointer-events:all; }
/* 4. Content */
/* Content */
.content {
margin-top:48px; padding:16px;
transition:margin-left .3s ease; max-width:960px;
@ -66,13 +67,14 @@ html,body {
#htmlView,#mdView{ min-height:calc(100vh - 60px); }
}
/* 5. Viewer */
/* Viewer */
.viewer {
height:calc(100vh - 80px);
min-height: calc(100vh - 140px);
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; }
#mdView h1,#mdView h2,#mdView h3{ color:var(--accent); }
#mdView pre,#mdView code{
overflow-x:auto; word-break:break-word;
@ -84,7 +86,7 @@ html,body {
}
#mdView a{ color:var(--accent); }
/* 6. Meta + Pager */
/* Meta + pager */
.meta{ color:var(--muted); margin-bottom:12px; font-size:.9em; }
.pager{ display:flex; justify-content:space-between; padding:8px 0; }
button#prev,button#next{
@ -96,28 +98,7 @@ button#prev:hover,button#next:hover{
border-color:var(--accent); color:var(--accent);
}
/* 7. Controls */
/* Controls */
.controls{ display:flex; gap:.5em; margin-bottom:8px; }
select,#search{
background:#0b0c10; color:var(--fg);
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; }
background:#0b0c10; color:var(--