File size: 3,220 Bytes
b9e7b9b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | @import './_variables.css';
@import './_base.css';
@import './_layout.css';
@import './components/_footer.css';
@import './components/_code.css';
@import './components/_poltly.css';
/* Dark-mode form tweak */
[data-theme="dark"] .plotly_input_container > select { background-color: #1a1f27; border-color: var(--border-color); color: var(--text-color); }
[data-theme="dark"] .plot-card { background: #12151b; border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .right-aside .aside-card { background: #12151b; border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .content-grid main pre { background: #12151b; border-color: rgba(255,255,255,.15); }
[data-theme="dark"] .toc nav { border-left-color: rgba(255,255,255,.15); }
[data-theme="dark"] .distill-footer { border-top-color: rgba(255,255,255,.15); color: rgba(200,200,200,.8); }
[data-theme="dark"] .citation { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,.15); color: rgba(200,200,200,1); }
[data-theme="dark"] .citation a { color: rgba(255,255,255,0.75); }
/* Opt-in zoomable images */
img[data-zoomable] { cursor: zoom-in; }
.medium-zoom--opened img[data-zoomable] { cursor: zoom-out; }
/* ============================================================================ */
/* Hero (full-bleed) */
/* ============================================================================ */
.hero { width: 100%; padding: 48px 16px 16px; text-align: center; }
.hero-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; line-height: 1.1; margin: 0 0 8px;
max-width: 60%;
margin: auto;}
.hero-banner { max-width: 980px; margin: 0 auto; }
.hero-desc { color: var(--muted-color); font-style: italic; margin: 0 0 16px 0; }
/* ============================================================================ */
/* Meta (byline-like header) */
/* ============================================================================ */
.meta {
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 1rem 0;
font-size: 0.9rem;
line-height: 1.8em;
}
.meta-container {
max-width: 720px;
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 auto;
gap: 8px;
}
.meta-container-cell {
display: flex;
flex-direction: column;
gap: 8px;
}
.meta-container-cell h3 {
margin: 0;
font-size: 12px;
font-weight: 400;
color: var(--muted-color);
text-transform: uppercase;
letter-spacing: .02em;
}
.meta-container-cell p { margin: 0; }
/* ============================================================================ */
/* Theme Toggle button (moved from component) */
/* ============================================================================ */
#theme-toggle { display: inline-flex; align-items: center; gap: 8px; border: none; background: transparent; padding: 6px 10px; border-radius: 8px; cursor: pointer; margin: 12px 16px; }
#theme-toggle .icon.dark { display: none; }
[data-theme="dark"] #theme-toggle .icon.light { display: none; }
[data-theme="dark"] #theme-toggle .icon.dark { display: inline; }
[data-theme="dark"] #theme-toggle .icon { filter: invert(1) brightness(1.2); }
|