135 lines
2.1 KiB
CSS
135 lines
2.1 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 "base/_size_scale.html" . }}
|
|
|
|
|
|
|
|
|
|
|
|
/********
|
|
# FONTS
|
|
********/
|
|
|
|
@import url("https://use.typekit.net/fji8aoy.css");
|
|
|
|
{{ with resources.Get "fonts/merriweather.woff2" -}}
|
|
@font-face {
|
|
font-family: "merriweather";
|
|
src: url("{{ .Permalink }}");
|
|
}
|
|
{{- end }}
|
|
|
|
{{ with resources.Get "fonts/merriweather-italic.woff2" -}}
|
|
@font-face {
|
|
font-family: "merriweather";
|
|
font-style: italic;
|
|
src: url("{{ .Permalink }}");
|
|
}
|
|
{{- end }}
|
|
|
|
: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;
|
|
}
|