リキ萌
36705e7c1e
I've been thinking a lot about the treehouse and I feel like it's time to say goodbye to the tree format.
84 lines
1.9 KiB
CSS
84 lines
1.9 KiB
CSS
main.doc {
|
||
--doc-text-width: 80ch;
|
||
|
||
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;
|
||
}
|
||
|
||
& ul,
|
||
& ol {
|
||
/* Is there a better way to add spacing to the marker, other than adding whitespace? */
|
||
list-style: "– ";
|
||
margin-top: 0;
|
||
margin-bottom: 0;
|
||
padding-bottom: 0.5lh;
|
||
}
|
||
}
|
||
|
||
& 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);
|
||
}
|
||
}
|
||
}
|