Eryn Wells
4328f31ad2
Make CSS variables for sans, serif, and mono font families. Create utility classes to apply them to an element. Add a .text--small style to style an element like <small>.
131 lines
2.3 KiB
CSS
131 lines
2.3 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-heading: "rockwell", serif; */
|
|
--font-family-sans: system-ui, Arial, sans-serif;
|
|
--font-family-serif: "merriweather", Georgia, serif;
|
|
--font-family-monospace: "source-code-pro", monospace;
|
|
|
|
--font-family-body: var(--font-family-sans);
|
|
--font-family-heading: var(--font-family-serif);
|
|
|
|
--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 }}
|
|
.text--mono { font-family: var(--font-family-monospace); }
|
|
.text--serif { font-family: var(--font-family-serif); }
|
|
.text--sans { font-family: var(--font-family-sans); }
|
|
|
|
|
|
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);
|
|
}
|
|
|
|
sup {
|
|
font-size: 60%;
|
|
}
|
|
|
|
|
|
.title {
|
|
font-size: var(--text-xxl);
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.subtitle {
|
|
font-weight: lighter;
|
|
}
|
|
|
|
figcaption,
|
|
small,
|
|
.text--small
|
|
{
|
|
color: var(--gray4);
|
|
font-weight: normal;
|
|
font-size: var(--text-s);
|
|
letter-spacing: 0.01em;
|
|
}
|