diff --git a/public/styles.css b/public/styles.css index 069dcff..ed31b5e 100755 --- a/public/styles.css +++ b/public/styles.css @@ -1,131 +1,119 @@ /* ============================================================ - THE FOLD WITHIN — Self-Organizing Framework v2.4.1 - (Responsive fullscreen + mobile layout fix) + The Fold Within — Styles v2.5 Stable Render ============================================================ */ :root { - --bg: #0b0c10; - --fg: #f3f3f3; - --accent: #d0aa5b; - --muted: #8d8f95; - --line: #2a2d34; + --bg:#0b0c10; + --fg:#f3f3f3; + --accent:#d0aa5b; + --muted:#8d8f95; + --line:#2a2d34; } -html,body { - margin:0; padding:0; - background:var(--bg); color:var(--fg); +html,body{ + margin:0;padding:0; + background:var(--bg);color:var(--fg); font-family:system-ui,sans-serif; -webkit-font-smoothing:antialiased; - scroll-behavior:smooth; } /* Topbar */ -.topbar { - position:fixed; top:0; left:0; right:0; - height:48px; display:flex; align-items:center; - gap:1em; background:#111; padding:0 1em; - z-index:300; box-shadow:0 2px 8px rgba(0,0,0,.3); +.topbar{ + position:fixed;top:0;left:0;right:0; + height:48px;display:flex;align-items:center; + gap:1em;background:#111;padding:0 1em; + z-index:300;box-shadow:0 2px 8px rgba(0,0,0,.3); } -.topbar a { color:var(--accent); text-decoration:none; font-weight:500; } -.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; +.topbar a{color:var(--accent);text-decoration:none;font-weight:500;} +.topbar a:hover{color:var(--fg);} +.topbar button{ + font-size:24px;background:transparent;color:var(--accent); + border:none;padding:4px 8px;cursor:pointer; } -.topbar button:hover{ color:var(--fg); } +.topbar button:hover{color:var(--fg);} -/* Sidebar & overlay */ -.sidebar { - position:fixed; top:48px; bottom:0; left:0; - width:85%; max-width:320px; overflow-y:auto; - background:#111; transform:translateX(-100%); - transition:transform .3s ease; padding:10px; - z-index:200; will-change:transform; border-right:1px solid var(--line); +/* Sidebar */ +.sidebar{ + position:fixed;top:48px;bottom:0;left:0; + width:85%;max-width:320px;overflow-y:auto; + background:#111;transform:translateX(-100%); + transition:transform .3s ease;padding:10px; + z-index:200;border-right:1px solid var(--line); } -.sidebar.open{ transform:translateX(0); } -.overlay { - position:fixed; inset:0; background:rgba(0,0,0,.45); - backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); - z-index:150; opacity:0; pointer-events:none; transition:opacity .3s ease; +.sidebar.open{transform:translateX(0);} +.overlay{ + position:fixed;inset:0;background:rgba(0,0,0,.45); + backdrop-filter:blur(4px);opacity:0;pointer-events:none; + transition:opacity .3s ease;z-index:150; } -.sidebar.open ~ .overlay{ opacity:1; pointer-events:all; } +.sidebar.open ~ .overlay{opacity:1;pointer-events:all;} -/* Content (layout fix) */ -.content { - display: flex; - flex-direction: column; - min-height: calc(100vh - 48px); - padding: 16px; - transition: margin-left .3s ease; - max-width: 960px; - box-sizing: border-box; +/* Content layout */ +.content{ + display:flex;flex-direction:column; + min-height:calc(100vh - 48px); + padding:16px;transition:margin-left .3s ease; + max-width:960px;box-sizing:border-box; } -@media (min-width:900px){ - .sidebar{ transform:none!important; position:static; - width:280px; height:calc(100vh - 48px); z-index:auto; } - .content{ margin-left:280px; } - .overlay{ display:none!important; } +@media(min-width:900px){ + .sidebar{transform:none!important;position:static; + width:280px;height:calc(100vh - 48px);} + .content{margin-left:280px;} + .overlay{display:none!important;} } -@media (max-width:899px){ - .content{ margin-left:0!important; padding:12px; } - .viewer{ font-size:1.05em; line-height:1.6; } +@media(max-width:899px){ + .content{margin-left:0!important;padding:12px;} } -/* Viewer */ -.viewer, -#htmlView { - flex: 1 1 auto; - height: auto !important; - min-height: 0; - overflow-y: auto; - max-width: 820px; - margin: 0 auto; - padding-top: 8px; - padding-bottom: 40px; +/* Viewer stabilization */ +.viewer,#htmlView{ + display:block;width:100%; + flex:1 1 auto; + margin-top:0;padding-top:0; + min-height:calc(100vh - 48px); + overflow-y:auto; + transition:opacity .25s ease; } -#htmlView{ width:100%; border:none; background:#0b0c10; } +.viewer.fade-in,#htmlView.fade-in{opacity:1;} +.viewer:not(.fade-in),#htmlView:not(.fade-in){opacity:0;} +#htmlView{border:none;background:#0b0c10;} -/* Markdown typography */ -#mdView h1,#mdView h2,#mdView h3{ color:var(--accent); } +/* Markdown formatting */ +#mdView h1,#mdView h2,#mdView h3{color:var(--accent);} #mdView pre,#mdView code{ - overflow-x:auto; word-break:break-word; - background:#111; padding:.5em; border-radius:4px; color:var(--accent); + overflow-x:auto;background:#111;padding:.5em;border-radius:4px;color:var(--accent); } #mdView blockquote{ border-left:3px solid var(--accent); - padding-left:12px; color:var(--muted); font-style:italic; + padding-left:12px;color:var(--muted);font-style:italic; } -#mdView a{ color:var(--accent); } +#mdView a{color:var(--accent);} -/* Markdown fallback warning */ +/* Warning */ .md-warn{ - background:#3b0c0c; color:#ffd4d4; - border:1px solid #6c1f1f; border-radius:8px; - padding:10px 12px; margin:10px auto; max-width:820px; - font-size:.95em; + background:#3b0c0c;color:#ffd4d4; + border:1px solid #6c1f1f;border-radius:8px; + padding:10px 12px;margin:10px auto;max-width:820px; } -/* Meta + pager */ -.meta{ color:var(--muted); margin-bottom:12px; font-size:.9em; } -.pager{ display:flex; justify-content:space-between; padding:8px 0; } +/* 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{ - background:transparent; border:1px solid var(--line); color:var(--fg); - border-radius:8px; padding:4px 10px; font-size:.95em; cursor:pointer; - transition:all .2s ease; + background:transparent;border:1px solid var(--line);color:var(--fg); + border-radius:8px;padding:4px 10px;cursor:pointer; } button#prev:hover,button#next:hover{ - border-color:var(--accent); color:var(--accent); + border-color:var(--accent);color:var(--accent); } -/* Controls */ -.controls{ display:flex; gap:.5em; margin-bottom:8px; } +/* Tree + 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; + background:#0b0c10;color:var(--fg);border:1px solid var(--line); + border-radius:4px;padding:6px; } - -/* Tree */ -.dir .label{ display:flex; align-items:center; cursor:pointer; - padding:4px 6px; color:var(--accent); font-weight:600; } -.dir .label::before{ content:"▶"; margin-right:6px; font-size:.8em; color:var(--muted); } -.dir.open .label::before{ content:"▼"; } \ No newline at end of file +.dir .label{display:flex;align-items:center;cursor:pointer; + padding:4px 6px;color:var(--accent);font-weight:600;} +.dir .label::before{content:"▶";margin-right:6px;font-size:.8em;color:var(--muted);} +.dir.open .label::before{content:"▼";} \ No newline at end of file