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

experiment for narrow screens: variable tab width / proportional code font

Browse source 
okay, so imagine this: you can change the tab size to something smaller on narrow screens...!
isn't that hella cool?
This commit is contained in:
りき萌 2025-08-21 19:44:38 +02:00
parent 0ae5842740
commit 4967deb080
3 changed files with 179 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

42
static/css/doc.css
View file

@ -18,7 +18,9 @@ main.doc {
}
& .doc-text {
padding: 1.6rem;
--doc-padding: 1.6rem;
padding: var(--doc-padding);
max-width: min(100%, var(--doc-text-width));
line-height: 1.6;
@ -62,6 +64,20 @@ main.doc {
& ul {
list-style: "- ";
}
& pre,
& th-literate-program {
& code {
--recursive-wght: 520;
--recursive-mono: 0.5; /* You didn't expect a proportional font being used for code, did you. */
font-size: 90%;
tab-size: 3;
}
&.monospaced code {
--recursive-mono: 1;
}
}
}
& section.feed {
@ -93,3 +109,27 @@ main.doc {
}
}
}
@media (max-width: 700px) {
main.doc {
& .doc-text {
& > 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);
margin-left: calc(var(--doc-padding) * -1);
margin-right: calc(var(--doc-padding) * -1);
border-radius: 0;
border-left: none;
border-right: none;
& code {
tab-size: 2;
}
}
}
}
}