main.doc { --doc-text-width: 85ch; display: flex; flex-direction: row; align-items: start; & .vertical-center { --article-padding: 12rem; min-height: 100vh; padding: var(--article-padding) 0; max-width: 100%; /* prevent from blowing up */ flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } & .doc-text { --doc-padding: 1.6rem; --code-block-h-padding: 1.2rem; --code-block-grid-space: var(--code-block-h-padding); /* max-width: min(100%, var(--doc-text-width)); */ width: 100%; padding: var(--doc-padding); display: grid; grid-template-columns: [left] 1fr [left-wide] 1fr [left-code] var(--code-block-grid-space) [main] minmax(0, var(--doc-text-width)) [right-code] var(--code-block-grid-space) [right-wide] 1fr [right] 1fr; line-height: 1.6; /* I was thinking a bunch about whether documents should be justified, and it honestly causes more awkwardness than it solves. Web pages aren't quite books, unfortunately. A cool feature that would help is text-wrap: pretty; but only Safari implements a nice text layout algorithm for it. (Chrome prevents short last lines, Firefox doesn't implement it at all) */ /* text-align: justify; hyphens: auto; */ & > * { grid-column: main; } & hr, & pre, & th-literate-program { grid-column: left-code / right-wide; } & p { padding-top: 0.5lh; padding-bottom: 0.5lh; } & h2 { margin: 0; padding-top: 1lh; padding-bottom: 0.5lh; } & h3, & h4 { margin: 0; padding-top: 0.5lh; padding-bottom: 0.5lh; } & ul, & ol { margin-top: 0; margin-bottom: 0; padding-top: 0.5lh; padding-bottom: 0.5lh; padding-left: 3.2em; } & ul { /* Is there a better way to add spacing to the marker, other than adding whitespace? */ list-style: "- "; } & pre, & th-literate-program { padding: 0.8rem var(--code-block-h-padding); & code { --recursive-wght: 500; --recursive-mono: 0.5; /* You didn't expect a proportional font being used for code, did you. */ font-size: 95%; tab-size: 3ch; } &.monospaced code { --recursive-mono: 1; } &.proportional code { --recursive-mono: 0; } } & figure { margin: 0.5lh 0; position: relative; & p:has(img.pic) { padding: 0; } & img { display: block; margin: 0; } & figcaption { padding: 0.25lh 0.5lh; text-align: center; & p { padding: 0; } &.overlay-bottom-right { position: absolute; right: 0; bottom: 0; background-color: var(--background-color); border-top-left-radius: 0.8rem; border-bottom-right-radius: 0.4rem; text-align: left; } } } & p:has(img.pic), & figure p:has(img.pic) { text-align: center; } & details { /* I wanted this to work on grid layout, but currently it is impossible to set
to display: grid; across all browsers. Instead you have to include a element after the summary. */ --details-marker-size: var(--code-block-h-padding); --details-indent-size: var(--code-block-h-padding); grid-column: left-code / right-wide; padding-top: 0.5lh; padding-bottom: 0.5lh; & > summary { display: flex; flex-direction: row; align-items: center; --recursive-wght: 600; border-bottom: 1px solid var(--border-1); cursor: pointer; &::before { content: ""; display: block; width: calc(2 * var(--details-marker-size)); height: calc(2 * var(--details-marker-size)); flex-shrink: 0; background-image: var(--icon-expand); background-position: 50% 50%; background-repeat: no-repeat; } } &[open] > summary::before { background-image: var(--icon-collapse); } & > details-content { display: grid; grid-template-columns: [indent] auto [main] 1fr; border-bottom: 1px solid var(--border-1); &::before { content: ""; display: block; width: 100%; margin: 0 var(--details-indent-size); border-left: 1px solid var(--border-1); } & > * { grid-column: main; } } } & .wide { grid-column: left-wide / right; } & header { & h1 { padding-bottom: 0.25lh; } padding-bottom: 1.5lh; } } & section.feed { max-width: 40ch; flex-shrink: 0; padding: 0.8rem; padding-top: 3.2rem; } } @media (max-width: 1500px) { main.doc { flex-direction: column; align-items: center; & .vertical-center { min-height: 0; flex-grow: 1; } & footer { padding: 0.8rem; } & section.feed { width: 100%; max-width: var(--doc-text-width); flex-grow: 1; margin-top: 2.4em; padding: 1.6rem; border-top: 1px solid var(--border-1); } } } @media (max-width: 1280px) { main.doc { & .vertical-center { --article-padding: 0rem; } } } @media (max-width: 850px) { main.doc { & .doc-text { --code-block-grid-space: 0; & details { --details-marker-size: 1.6rem; --details-indent-size: 1.6rem; } & > pre, & > th-literate-program { /* Stretch to whole page. This way of doing it feels a bit brittle, though. It might be good to refactor this to CSS grid at some point. */ padding-left: var(--doc-padding); padding-right: var(--doc-padding); border-radius: 0; border-left: none; border-right: none; & code { --recursive-wght: 520; font-size: 90%; tab-size: 2ch; } } & > pre, & > th-literate-program, & > details { margin-left: calc(var(--doc-padding) * -1); margin-right: calc(var(--doc-padding) * -1); } & > details { & > summary, & > details-content { padding-right: var(--doc-padding); } } & figure figcaption { &.overlay-bottom-right { position: static; background: none; border-radius: 0; text-align: center; } } } } }