From 79a281ebbf014eaea35f43b880eba7550bfada67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mark=20Randall=20Havens=20=E2=96=B3=20The=20Empathic=20Tec?= =?UTF-8?q?hnologist=20=E2=9F=81=20Doctor=20Who=2042?= Date: Sat, 8 Nov 2025 15:25:41 -0600 Subject: [PATCH] Update styles.css --- public/styles.css | 196 ++++++++++++++++++++-------------------------- 1 file changed, 84 insertions(+), 112 deletions(-) diff --git a/public/styles.css b/public/styles.css index 50a7568..58bd7f7 100755 --- a/public/styles.css +++ b/public/styles.css @@ -1,145 +1,117 @@ -/* ---------- Theme ---------- */ :root{ - --bg:#0c0c0c; - --panel:#141414; - --text:#e6e3d7; - --sub:#b9b39a; - --gold:#d4af37; - - --topbar-h:56px; - --sidebar-w:320px; - - color-scheme:dark; + --bg:#0b0b0b; + --fg:#e6e3d7; + --accent:#e0b84b; + --topbar-h:52px; } -*{ box-sizing:border-box } -html,body{ height:100% } -body{ +html,body{ margin:0; - font:16px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; + padding:0; + height:100%; background:var(--bg); - color:var(--text); + color:var(--fg); + font-family:Inter,ui-sans-serif,system-ui; } -/* ---------- Top bar ---------- */ .topbar{ - position:sticky; top:0; z-index:50; + position:fixed; + top:0;left:0;right:0; height:var(--topbar-h); - display:flex; align-items:center; gap:14px; - padding:0 12px 0 8px; - background:linear-gradient(180deg,#0f0f0f,#0b0b0b); - border-bottom:1px solid #151515; + display:flex; + align-items:center; + background:#111; + color:var(--accent); + z-index:1000; + border-bottom:1px solid #222; + padding:0 1rem; } -.icon-btn{ - min-width:44px; height:36px; padding:0 10px; - display:inline-grid; place-items:center; - border-radius:10px; border:1px solid #262626; - background:#121212; color:var(--text); +#menuBtn{ + font-size:1.4rem; + background:none; + border:0; + color:var(--accent); cursor:pointer; + margin-right:1rem; } -.icon-btn:focus-visible{ outline:2px solid var(--gold) } .primary-nav{ - display:flex; gap:20px; align-items:center; padding-left:4px; + display:flex; + flex-wrap:wrap; + align-items:center; + gap:24px; } + .primary-nav a{ - color:var(--gold); text-decoration:none; font-weight:600; letter-spacing:.2px; + color:var(--accent); + text-decoration:none; + font-weight:600; } -.primary-nav .brand{ margin-right:6px } -.spacer{ flex:1 } +.primary-nav a:hover{ text-shadow:0 0 5px var(--accent); } -/* ---------- Layout ---------- */ -#appLayout{ display:flex; min-height:calc(100vh - var(--topbar-h)) } - -/* Sidebar */ -.sidebar{ - position:relative; - width:var(--sidebar-w); - flex:0 0 var(--sidebar-w); - background:var(--panel); - border-right:1px solid #121212; +#sidebar{ + position:fixed; + top:var(--topbar-h); + left:0; + width:280px; + bottom:0; overflow:auto; - will-change:transform; - transition:transform .25s ease; - z-index:20; + background:#111; + border-right:1px solid #222; + transform:translateX(-100%); + transition:transform .3s; + z-index:900; } -/* Desktop collapse */ -body.sidebar-collapsed .sidebar{ transform:translateX(calc(-1 * var(--sidebar-w))) } -body.sidebar-collapsed .content{ margin-left:0 } +body.sidebar-open #sidebar{ transform:translateX(0); } -/* Mobile overlay */ -@media (max-width:1024px){ - .sidebar{ - position:fixed; inset:var(--topbar-h) auto 0 0; - max-height:calc(100vh - var(--topbar-h)); - transform:translateX(-100%); - box-shadow:0 8px 24px rgba(0,0,0,.35); - } - body.sidebar-open .sidebar{ transform:none } +.sidebar-controls{ + display:flex; + flex-direction:column; + gap:8px; + padding:1rem; } -/* Content */ +#postList{ + list-style:none; + margin:0; + padding:0 1rem 2rem; +} + +#postList li{ + margin:.5rem 0; +} + +#postList a{ + color:var(--fg); + text-decoration:none; +} +#postList a:hover{ color:var(--accent); } + .content{ - position:relative; - flex:1 1 auto; - margin-left:var(--sidebar-w); - /* tighter edges so HTML/MD look identical */ - padding:8px 24px 32px 8px; - transition:margin-left .25s ease; + margin-top:var(--topbar-h); + margin-left:0; + transition:margin-left .3s; + min-height:calc(100vh - var(--topbar-h)); } -@media (max-width:1024px){ .content{ margin-left:0 } } -@media (min-width:1025px){ - body.sidebar-open .content{ margin-left:var(--sidebar-w) } +@media(min-width:1024px){ + #sidebar{ transform:translateX(0); } + .content{ margin-left:280px; } } -/* Sidebar header */ -.side-head{ - position:sticky; top:0; z-index:5; - background:linear-gradient(180deg,#171717,#131313); - border-bottom:1px solid #1c1c1c; - padding:10px; -} -.filters{ display:flex; gap:8px; align-items:center } -.filters select{ - height:34px; background:#101010; color:var(--text); - border:1px solid #2a2a2a; border-radius:10px; padding:0 8px; -} -.search{ margin-top:8px } -.search input{ - width:100%; height:36px; background:#0e0e0e; color:var(--text); - border:1px solid #252525; border-radius:10px; padding:0 10px; +.viewer > *{ + max-width:720px; + margin:auto; + padding:2rem 1rem; } -/* Tree */ -.tree{ padding:10px } -.tree a{ - display:block; padding:8px 10px; margin:2px 0; - border-radius:10px; text-decoration:none; color:var(--text); -} -.tree a:hover{ background:#111 } -.tree .meta{ color:var(--sub); font-size:.86rem } - -/* Viewer — no “card” frame; flush with divider */ -.viewer{ - padding:0 0 24px 4px; -} -.viewer .empty{ opacity:.75 } -.viewer h1,h2,h3{ color:var(--gold); margin:0 0 .75rem } -.viewer h1{ font-size:clamp(1.8rem,4vw,2.6rem) } -.viewer blockquote{ - margin:1rem 0; padding-left:1rem; border-left:4px solid #61521a; color:var(--sub) -} -.viewer hr{ border:0; border-top:1px solid #222; margin:1.5rem 0 } -.viewer img, .viewer iframe{ max-width:100%; height:auto; display:block; border-radius:12px } - -/* Make sure iframe itself has no stray margins */ -.viewer iframe{ border:0; margin:0 } - -/* Utilities */ -.visually-hidden{ - position:absolute !important; height:1px; width:1px; overflow:hidden; - clip:rect(1px,1px,1px,1px); white-space:nowrap; +/* iframe resets */ +.viewer iframe{ + width:100%; + border:0; + margin:0; + min-height:calc(100vh - var(--topbar-h) - 40px); + border-radius:12px; } \ No newline at end of file