File size: 4,264 Bytes
b9e7b9b fc7711a b9e7b9b fc7711a b9e7b9b fc7711a b9e7b9b fc7711a b9e7b9b e0ad823 b2ac38d e0ad823 b2ac38d e0ad823 b9e7b9b fc7711a b9e7b9b fc7711a e0ad823 fc7711a fef84f3 b9e7b9b fef84f3 b9e7b9b fef84f3 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 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
/* ============================================================================ */
/* Layout – 3-column grid (TOC / Article / Aside) */
/* ============================================================================ */
.content-grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; margin-top: 40px; display: grid; grid-template-columns: 220px minmax(0, 680px) 260px; gap: 32px; align-items: start; }
.content-grid > main { max-width: 100%; margin: 0; padding: 0; }
/* TOC (left column) */
.toc { position: sticky; top: 24px; }
.toc nav { border-left: 1px solid var(--border-color); padding-left: 16px; font-size: 13px; }
.toc .title { font-weight: 600; font-size: 14px; margin-bottom: 8px; }
/* Hide in-article TOC (duplicated by sticky aside) */
main > nav:first-of-type { display: none; }
/* TOC look & feel */
.toc nav ul { margin: 0 0 6px; padding-left: 1em; }
.toc nav li { list-style: none; margin: .25em 0; }
.toc nav a { color: var(--text-color); text-decoration: none; border-bottom: none; }
.toc nav > ul > li > a { font-weight: 700; }
.toc nav a:hover { text-decoration: underline solid var(--muted-color); }
.toc nav a.active { text-decoration: underline; }
/* Mobile TOC accordion */
.toc-mobile { display: none; margin: 8px 0 16px; }
.toc-mobile > summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); font-weight: 600; }
.toc-mobile[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.toc-mobile nav { border-left: none; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border-color); border-top: none; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.toc-mobile nav ul { margin: 0 0 6px; padding-left: 1em; }
.toc-mobile nav li { list-style: none; margin: .25em 0; }
.toc-mobile nav a { color: var(--text-color); text-decoration: none; border-bottom: none; }
.toc-mobile nav > ul > li > a { font-weight: 700; }
.toc-mobile nav a:hover { text-decoration: underline solid var(--muted-color); }
.toc-mobile nav a.active { text-decoration: underline; }
/* Right aside (notes) */
.right-aside { position: sticky; top: 24px; }
.right-aside .aside-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px; margin-bottom: 10px; font-size: 0.9rem; color: var(--text-color); }
/* Responsive – collapse to single column */
@media (max-width: 1100px) {
.content-grid { grid-template-columns: 1fr; }
.toc { position: static; display: none; }
.toc-mobile { display: block; }
.right-aside { display: none; }
main > nav:first-of-type { display: block; }
}
.margin-aside { position: relative; margin: 12px 0; }
.margin-aside__aside {
position: absolute;
top: 0;
right: -260px; /* push into the right grid column (width 260 + gap 32) */
width: 260px;
border-radius: 8px;
padding: 0 30px;
font-size: 0.9rem;
color: var(--muted-color);
}
@media (max-width: 1100px) {
.margin-aside__aside {
position: static;
width: auto;
margin-top: 8px;
}
}
/* ============================================================================ */
/* Width helpers – slightly wider than main column, and full-bleed to viewport */
/* ---------------------------------------------------------------------------- */
/* Usage in MDX: */
/* <div className="wide"> ... </div> */
/* <div className="full-bleed"> ... </div> */
/* These center the content relative to the viewport while keeping it responsive. */
/* */
/* Notes: */
/* - These helpers work inside the main article column; they break out visually */
/* to be wider or fully span the viewport. On small screens, they fall back to 100%. */
/* - Adjust the target width in .wide if desired. */
.wide,
.full-bleed { box-sizing: border-box; }
.wide {
/* Target up to ~1100px while staying within viewport minus page gutters */
width: min(1100px, 100vw - 32px);
margin-left: 50%;
transform: translateX(-50%);
}
.full-bleed {
/* Span the full viewport width */
width: 100vw;
margin-left: 50%;
transform: translateX(-50%);
}
@media (max-width: 1100px) {
.wide,
.full-bleed {
width: 100%;
margin-left: 0;
transform: none;
}
}
|