Spaces:
Running
Running
File size: 4,472 Bytes
b9e7b9b b8e1b6c fc7711a b9e7b9b fc7711a b9e7b9b fc7711a b9e7b9b fc7711a b9e7b9b e0ad823 b2ac38d e0ad823 b2ac38d e0ad823 b9e7b9b fc7711a b9e7b9b fc7711a e0ad823 fc7711a fef84f3 b9e7b9b fef84f3 b9e7b9b b8e1b6c b9e7b9b b8e1b6c b9e7b9b fef84f3 b8e1b6c fef84f3 5a83c3d fef84f3 b8e1b6c fef84f3 b8e1b6c fef84f3 b8e1b6c fef84f3 b8e1b6c 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 112 113 114 115 116 |
/* ============================================================================ */
/* Layout – 3-column grid (TOC / Article / Aside) */
/* ============================================================================ */
:root {
--content-padding-x: 16px;
}
.content-grid { max-width: 1280px; margin: 0 auto; padding: 0 var(--content-padding-x); 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-width to viewport */
/* ---------------------------------------------------------------------------- */
/* Usage in MDX: */
/* <div className="wide"> ... </div> */
/* <div className="full-width"> ... </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-width { box-sizing: border-box; position: relative; z-index: var(--z-elevated); }
.wide {
/* Target up to ~1400px while staying within viewport minus page gutters */
width: min(1400px, 100vw - 32px);
margin-left: 50%;
transform: translateX(-50%);
}
.full-width {
/* Span the full viewport width and center relative to viewport */
width: 100vw;
margin-left: calc(50% - 50vw + var(--content-padding-x) * 2);
margin-right: calc(50% - 50vw);
}
@media (max-width: 1100px) {
.wide,
.full-width {
width: 100%;
margin-left: 0;
margin-right: 0;
transform: none;
}
}
|