Update styles.css

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

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 {
@ -49,10 +50,15 @@ html,body {
}
.sidebar.open ~ .overlay{ opacity:1; pointer-events:all; }
/* Content */
/* Content (layout fix) */
.content {
margin-top:48px; padding:16px;
transition:margin-left .3s ease; max-width:960px;
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;
@ -61,19 +67,25 @@ html,body {
.overlay{ display:none!important; }
}
@media (max-width:899px){
.content{ margin-left:0!important; }
.viewer{ padding:12px; font-size:1.05em; line-height:1.6; }
#htmlView,#mdView{ min-height:calc(100vh - 60px); }
.content{ margin-left:0!important; padding:12px; }
.viewer{ font-size:1.05em; line-height:1.6; }
}
/* Viewer */
.viewer {
min-height: calc(100vh - 140px);
overflow:auto; max-width:820px;
margin:0 auto; padding-top:8px; padding-bottom:40px;
.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;
}
#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 pre,#mdView code{
overflow-x:auto; word-break:break-word;
@ -85,7 +97,7 @@ html,body {
}
#mdView a{ color:var(--accent); }
/* Visible warning bar if fallback rendering happens */
/* Markdown fallback warning */
.md-warn{
background:#3b0c0c; color:#ffd4d4;
border:1px solid #6c1f1f; border-radius:8px;
@ -117,17 +129,3 @@ select,#search{
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:"▼"; }
.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; }