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 13:06:51 -06:00 • committed by GitHub
parent d3e35b4040
commit 5e9ad16d94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 26 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

54
public/styles.css
View file

@ -1,5 +1,6 @@
/* ============================================================ /* ============================================================
THE FOLD WITHIN — Self-Organizing Static Site Framework v2.4 THE FOLD WITHIN — Self-Organizing Framework v2.4.1
(Responsive fullscreen + mobile layout fix)
============================================================ */ ============================================================ */
:root { :root {
@ -49,10 +50,15 @@ html,body {
} }
.sidebar.open ~ .overlay{ opacity:1; pointer-events:all; } .sidebar.open ~ .overlay{ opacity:1; pointer-events:all; }
/* Content */ /* Content (layout fix) */
.content { .content {
margin-top:48px; padding:16px; display: flex;
transition:margin-left .3s ease; max-width:960px; 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){ @media (min-width:900px){
.sidebar{ transform:none!important; position:static; .sidebar{ transform:none!important; position:static;
@ -61,19 +67,25 @@ html,body {
.overlay{ display:none!important; } .overlay{ display:none!important; }
} }
@media (max-width:899px){ @media (max-width:899px){
.content{ margin-left:0!important; } .content{ margin-left:0!important; padding:12px; }
.viewer{ padding:12px; font-size:1.05em; line-height:1.6; } .viewer{ font-size:1.05em; line-height:1.6; }
#htmlView,#mdView{ min-height:calc(100vh - 60px); }
} }
/* Viewer */ /* Viewer */
.viewer { .viewer,
min-height: calc(100vh - 140px); #htmlView {
overflow:auto; max-width:820px; flex: 1 1 auto;
margin:0 auto; padding-top:8px; padding-bottom:40px; height: auto !important;
min-height: 0;
overflow-y: auto;
max-width: 820px;
margin: 0 auto;
padding-top: 8px;
padding-bottom: 40px;
} }
#htmlView{ width:100%; height:100%; border:none; background:#0b0c10; } #htmlView{ width:100%; border:none; background:#0b0c10; }
/* Markdown typography */
#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;
@ -85,7 +97,7 @@ html,body {
} }
#mdView a{ color:var(--accent); } #mdView a{ color:var(--accent); }
/* Visible warning bar if fallback rendering happens */ /* Markdown fallback warning */
.md-warn{ .md-warn{
background:#3b0c0c; color:#ffd4d4; background:#3b0c0c; color:#ffd4d4;
border:1px solid #6c1f1f; border-radius:8px; border:1px solid #6c1f1f; border-radius:8px;
@ -116,18 +128,4 @@ select,#search{
.dir .label{ display:flex; align-items:center; cursor:pointer; .dir .label{ display:flex; align-items:center; cursor:pointer;
padding:4px 6px; color:var(--accent); font-weight:600; } padding:4px 6px; color:var(--accent); font-weight:600; }
.dir .label::before{ content:"▶"; margin-right:6px; font-size:.8em; color:var(--muted); } .dir .label::before{ content:"▶"; margin-right:6px; font-size:.8em; color:var(--muted); }
.dir.open .label::before{ content:"▼"; } .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; }
.file{ display:block; padding:4px 12px; color:var(--fg); text-decoration:none; border-radius:4px; }
.file:hover{ background: rgba(208,170,91,.1); }
.file.active{ background: rgba(208,170,91,.2); outline:1px solid var(--line); }
.meta{ color:var(--muted); font-size:.85em; margin-left:6px; }
/* Subtle fade-in for mdView after render */
.fade-in{ animation:fadein .18s ease-out; }
@keyframes fadein{ from{opacity:0} to{opacity:1} }
/* Loading note style */
.loading-note{ color:var(--muted); font-style:italic; }