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

figures & figcaptions for docs

Browse source 
could probably work in trees but eh
This commit is contained in:
りき萌 2025-08-31 12:54:13 +02:00
parent 944a56800e
commit ce04cbdc92
2 changed files with 68 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

60
static/css/doc.css
View file

@ -108,12 +108,49 @@ main.doc {
}
}
& p:has(img.pic) {
text-align: center;
& figure {
margin: 0.5lh 0;
&.wide {
grid-column: left-wide / right;
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;
}
& .wide {
grid-column: left-wide / right;
}
& header {
@ -171,8 +208,8 @@ main.doc {
& .doc-text {
--code-block-grid-space: 0;
& > pre,
& > th-literate-program {
& 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. */
@ -190,6 +227,17 @@ main.doc {
tab-size: 2ch;
}
}
& figure figcaption {
&.overlay-bottom-right {
position: static;
background: none;
border-radius: 0;
text-align: center;
}
}
}
}
}