Emi Matchu
5458fc8e8d
They're heavy and take time to load! It's more noticeable on such a text-heavy page as this, too. I might make a similar change on DTI… I had used these fonts here for visual consistency, but tbh I'm not sure these fonts are notably better than the system fonts anyway! And our brand identity isn't hinged on them. (Whereas I *did* keep the Delicious fonts, because the files are notably smaller, and they *are* more part of our visual identity, I think.)
139 lines
2 KiB
CSS
139 lines
2 KiB
CSS
:root {
|
|
/* Thanks to! https://modernfontstacks.com/ */
|
|
--ui-font-family: system-ui, sans-serif;
|
|
--heading-font-family: Delicious, system-ui, sans-serif;
|
|
--body-font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--ui-font-family);
|
|
color: #040;
|
|
max-width: 800px;
|
|
margin-inline: auto;
|
|
padding-inline: 1em;
|
|
}
|
|
|
|
a {
|
|
color: #226622;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-family: var(--heading-font-family);
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
body > header {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"logo title"
|
|
"logo subtitle";
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: auto 1fr;
|
|
row-gap: 0.5em;
|
|
column-gap: 0.5em;
|
|
|
|
border-bottom: 1px solid #060;
|
|
padding-bottom: 0.75em;
|
|
margin-bottom: 0.75em;
|
|
|
|
.logo {
|
|
grid-area: logo;
|
|
img {
|
|
width: 4em;
|
|
height: 4em;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
grid-area: title;
|
|
font-size: 1.5em;
|
|
margin: 0;
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
[role="doc-subtitle"] {
|
|
grid-area: subtitle;
|
|
font-size: 0.75em;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
article {
|
|
> header {
|
|
h2 {
|
|
font-size: 2.5em;
|
|
margin-bottom: 0.125em;
|
|
margin-top: 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 0.75em;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
> :is(p, ul) {
|
|
font-family: var(--body-font-family);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|
|
.posts {
|
|
time {
|
|
font-size: 0.85em;
|
|
font-style: italic;
|
|
margin-left: 0.25em;
|
|
|
|
&:before {
|
|
content: "(";
|
|
}
|
|
|
|
&:after {
|
|
content: ")";
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin-block: 0.5em;
|
|
}
|
|
}
|
|
|
|
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
|
|
@font-face {
|
|
font-family: Delicious;
|
|
src: local("Delicious"), url("/assets/fonts/Delicious-Roman.otf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Delicious;
|
|
font-weight: bold;
|
|
src: local("Delicious"), url("/assets/fonts/Delicious-Bold.otf");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Delicious;
|
|
font-style: italic;
|
|
src: local("Delicious"), url("/assets/fonts/Delicious-Italic.otf");
|
|
}
|