riki/treehouse
riki/treehouse
1
Fork 0
Code Issues 33 Activity

doc layout based on a grid: wider images, and code block text aligned with body text

Browse source
This commit is contained in:
りき萌 2025-08-30 22:51:34 +02:00
parent 42e5676c80
commit 26204b6d03
2 changed files with 34 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

31
static/css/doc.css
View file

@ -22,9 +22,23 @@ main.doc {
& .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);
max-width: min(100%, var(--doc-text-width));
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;
@ -38,6 +52,10 @@ main.doc {
/* text-align: justify;
hyphens: auto; */
& > * {
grid-column: main;
}
& p {
padding-top: 0.5lh;
padding-bottom: 0.5lh;
@ -71,6 +89,9 @@ main.doc {
& pre,
& th-literate-program {
padding: 0.8rem var(--code-block-h-padding);
grid-column: left-code / right-wide;
& code {
--recursive-wght: 500;
--recursive-mono: 0.5; /* You didn't expect a proportional font being used for code, did you. */
@ -89,6 +110,10 @@ main.doc {
& p:has(img.pic) {
text-align: center;
&.wide {
grid-column: left-wide / right;
}
}
& header {
@ -141,9 +166,11 @@ main.doc {
}
}
@media (max-width: 700px) {
@media (max-width: 850px) {
main.doc {
& .doc-text {
--code-block-grid-space: 0;
& > pre,
& > th-literate-program {
/* Stretch to whole page.