From 4328f31ad2825647a71d7be195d491fab6649585 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Sat, 6 Jul 2024 10:21:54 -0700
Subject: [PATCH] Break out font family sets into separate variables based on
 style

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>.
---
 assets/css/010_typography.css | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/assets/css/010_typography.css b/assets/css/010_typography.css
index 27874e2..8ca730b 100644
--- a/assets/css/010_typography.css
+++ b/assets/css/010_typography.css
@@ -35,11 +35,14 @@
 {{- end }}
 
 :root {
-  --font-family-body: system-ui, Arial, sans-serif;
   /* --font-family-heading: "rockwell", serif; */
-  --font-family-heading: "merriweather", Georgia, 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 -}}
@@ -52,6 +55,9 @@
 {{ 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 {
@@ -100,12 +106,6 @@ 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%;
 }
@@ -119,3 +119,13 @@ sup {
 .subtitle {
   font-weight: lighter;
 }
+
+figcaption,
+small,
+.text--small
+{
+  color: var(--gray4);
+  font-weight: normal;
+  font-size: var(--text-s);
+  letter-spacing: 0.01em;
+}