Make design more airy and improve vertical rhythm

This commit is contained in:
arne 2022-10-04 12:21:00 +02:00
commit 3cf08376fb

View file

@ -137,6 +137,22 @@ aside.metadata {
list-style-type: none; list-style-type: none;
transform: translateY(.3em); // align baselines transform: translateY(.3em); // align baselines
} }
li {
margin-bottom: 6px;
@media screen and (max-width: 768px) {
margin-bottom: 12px;
}
&:last-of-type {
margin-bottom: 0;
}
}
a {
font-size: inherit !important
}
} }
aside.navigation { aside.navigation {
@ -171,9 +187,13 @@ article {
padding: 24px 0 padding: 24px 0
} }
ul { ul, ol {
padding: 0 0 0 16px; padding: 0 0 0 32px;
margin: 0 0 32px; margin: 0 0 28px;
li {
margin-bottom: 4px;
}
} }
.footnote-ref a { .footnote-ref a {
@ -202,12 +222,12 @@ footer {
h1 { h1 {
font-size: 21px; font-size: 21px;
line-height: 21px; line-height: 32px;
} }
h2 { h2 {
font-size: 18px; font-size: 18px;
line-height: 14px; line-height: 24px;
} }
main { main {
@ -295,20 +315,37 @@ footer {
time { time {
color: $reduced; color: $reduced;
} }
li {
margin-bottom: 8px;
}
} }
.toc { .toc {
ol { ol {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0 0 32px; margin: 0 0 24px;
li { li {
margin-bottom: 6px; line-height: 16px * 1.5;
@media screen and (max-width: 768px) {
margin-bottom: 12px;
} }
} }
} }
} }
.sticky {
position: sticky;
top: 32px;
}
// https://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}