168 lines
3.9 KiB
CSS
168 lines
3.9 KiB
CSS
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;
|
|
|
|
padding: var(--doc-padding);
|
|
max-width: min(100%, var(--doc-text-width));
|
|
|
|
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; */
|
|
|
|
& p {
|
|
padding-top: 0.5lh;
|
|
padding-bottom: 0.5lh;
|
|
}
|
|
|
|
& h2 {
|
|
margin: 0;
|
|
padding-top: 1lh;
|
|
padding-bottom: 0.5lh;
|
|
}
|
|
|
|
& h3 {
|
|
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 {
|
|
& 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: 3;
|
|
}
|
|
|
|
&.monospaced code {
|
|
--recursive-mono: 1;
|
|
}
|
|
|
|
&.proportional code {
|
|
--recursive-mono: 0;
|
|
}
|
|
}
|
|
|
|
& p:has(img.pic) {
|
|
text-align: center;
|
|
}
|
|
|
|
& 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 {
|
|
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: 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 {
|
|
--recursive-wght: 520;
|
|
font-size: 90%;
|
|
tab-size: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|