File size: 1,765 Bytes
b9e7b9b a4b9560 b9e7b9b b8e1b6c 8e480d5 a4b9560 8e480d5 f29f914 a4b9560 f29f914 fc7711a b9e7b9b a4b9560 fef84f3 a4b9560 fef84f3 b9e7b9b b8e1b6c b9e7b9b a4b9560 fef84f3 a4b9560 fef84f3 a4b9560 fef84f3 b8e1b6c fef84f3 b8e1b6c fef84f3 a4b9560 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 | /* ============================================================================ */
/* Layout – 3-column grid (Table of Contents / Article / Aside) */
/* ============================================================================ */
.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;
}
@media (max-width: var(--bp-content-collapse)) {
.content-grid {
overflow: hidden;
}
}
/* Responsive – collapse to single column */
@media (max-width: var(--bp-content-collapse)) {
.content-grid {
grid-template-columns: 1fr;
}
main > nav:first-of-type {
display: block;
}
}
/* ============================================================================ */
/* Width helpers – slightly wider than main column, and full-width to viewport */
/* ---------------------------------------------------------------------------- */
.wide,
.full-width {
box-sizing: border-box;
position: relative;
z-index: var(--z-elevated);
}
.wide {
/* Target up to ~1100px while staying within viewport minus page gutters */
width: min(1100px, 100vw - 32px);
margin-left: calc(50% + var(--content-padding-x) * 2);
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: var(--bp-content-collapse)) {
.wide,
.full-width {
width: 100%;
margin-left: 0;
margin-right: 0;
transform: none;
}
}
|