Eryn Wells
4bc1390b3c
- Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
149 lines
2.2 KiB
CSS
149 lines
2.2 KiB
CSS
{{/*
|
|
typography.css
|
|
Eryn Wells <eryn@erynwells.me>
|
|
vim: set sw=2 sts=2:
|
|
*/}}
|
|
|
|
{{- $base := (index . "Base") | default 1 -}}
|
|
{{- $unit := (index . "Unit") | default "rem" -}}
|
|
{{- $factor := (index . "Factor") | default 1.200 -}}
|
|
{{- $scale := partial "size_scale.html" . }}
|
|
|
|
|
|
|
|
|
|
|
|
/********
|
|
# FONTS
|
|
********/
|
|
|
|
@import url("https://use.typekit.net/fji8aoy.css");
|
|
|
|
:root {
|
|
--font-family-body: system-ui, Arial, sans-serif;
|
|
/* --font-family-heading: "rockwell", serif; */
|
|
--font-family-heading: "merriweather", Georgia, serif;
|
|
--font-family-monospace: "source-code-pro", monospace;
|
|
|
|
--text-base-size: 125%;
|
|
--text-base: {{ $base }}{{ $unit }};
|
|
{{- range $scale }}
|
|
--text-{{ .Name }}: calc(var(--text-base) * pow({{ $factor }}, {{ .Value }}));
|
|
{{- end }}
|
|
}
|
|
|
|
|
|
/* Font size utility classes */
|
|
{{ range $scale }}
|
|
.text--{{ .Name }} { font-size: var(--text-{{ .Name }}); }
|
|
{{- end }}
|
|
|
|
|
|
a {
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduce-motion: reduce) {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--text-base-size);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
|
|
/***********
|
|
## HEADINGS
|
|
***********/
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-family-heading);
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--text-xxl);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: var(--text-xl);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: var(--text-l);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--text-m);
|
|
}
|
|
|
|
|
|
header {
|
|
font-weight: bold;
|
|
}
|
|
|
|
p {
|
|
letter-spacing: 0.01em;
|
|
}
|
|
|
|
p, pre {
|
|
font-size: var(--text-m);
|
|
}
|
|
|
|
figcaption, small {
|
|
font-size: var(--text-s);
|
|
letter-spacing: 0.01em;
|
|
line-height: 1;
|
|
}
|
|
|
|
sup {
|
|
font-size: 60%;
|
|
}
|
|
|
|
|
|
.title {
|
|
font-size: var(--text-xxl);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.subtitle {
|
|
font-weight: lighter;
|
|
}
|
|
|
|
|
|
.content {
|
|
.codeblock {
|
|
font-family: var(--font-family-monospace);
|
|
}
|
|
|
|
.heading, .title {
|
|
font-family: var(--font-family-heading);
|
|
}
|
|
|
|
.heading__anchor {
|
|
/* font-family: var(--font-family-monospace); */
|
|
font-size: 60%;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footnotes {
|
|
font-size: 90%;
|
|
|
|
li:not(:last-child) {
|
|
margin-block-end: var(--space-xs);
|
|
}
|
|
|
|
p {
|
|
font-size: inherit;
|
|
}
|
|
}
|
|
}
|