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

CSS tweaks

Browse source
This commit is contained in:
りき萌 2025-09-15 23:22:06 +02:00
parent 51e3c0cda3
commit e4e21fe7e0
2 changed files with 125 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

98
static/css/doc.css
View file

@ -56,6 +56,12 @@ main.doc {
grid-column: main;
}
& hr,
& pre,
& th-literate-program {
grid-column: left-code / right-wide;
}
& p {
padding-top: 0.5lh;
padding-bottom: 0.5lh;
@ -67,7 +73,8 @@ main.doc {
padding-bottom: 0.5lh;
}
& h3 {
& h3,
& h4 {
margin: 0;
padding-top: 0.5lh;
padding-bottom: 0.5lh;
@ -90,7 +97,6 @@ main.doc {
& pre,
& th-literate-program {
padding: 0.8rem var(--code-block-h-padding);
grid-column: left-code / right-wide;
& code {
--recursive-wght: 500;
@ -149,6 +155,69 @@ main.doc {
text-align: center;
}
& details {
/* I wanted this to work on grid layout, but currently it is impossible to set
<details> to display: grid; across all browsers.
Instead you have to include a <details-content> 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;
}
@ -209,15 +278,18 @@ main.doc {
& .doc-text {
--code-block-grid-space: 0;
& pre,
& th-literate-program {
& 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);
margin-left: calc(var(--doc-padding) * -1);
margin-right: calc(var(--doc-padding) * -1);
border-radius: 0;
border-left: none;
border-right: none;
@ -229,6 +301,20 @@ main.doc {
}
}
& > 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;