94 lines
2 KiB
CSS
94 lines
2 KiB
CSS
main.doc {
|
|
--doc-text-width: 85ch;
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: start;
|
|
|
|
& .vertical-center {
|
|
min-height: 100vh;
|
|
flex-grow: 1;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
& .doc-text {
|
|
padding: 1.6rem;
|
|
max-width: 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 {
|
|
/* Is there a better way to add spacing to the marker, other than adding whitespace? */
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0.5lh;
|
|
padding-left: 3.2em;
|
|
}
|
|
|
|
& ul {
|
|
list-style: "- ";
|
|
}
|
|
}
|
|
|
|
& section.feed {
|
|
max-width: 40ch;
|
|
padding: 0.8rem;
|
|
padding-top: 3.2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1500px) {
|
|
main.doc {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
& .vertical-center {
|
|
min-height: 0;
|
|
}
|
|
|
|
& footer {
|
|
padding: 0.8rem;
|
|
}
|
|
|
|
& section.feed {
|
|
max-width: var(--doc-text-width);
|
|
|
|
margin-top: 2.4em;
|
|
padding: 1.6rem;
|
|
border-top: 1px solid var(--border-1);
|
|
}
|
|
}
|
|
}
|