Address .main-font and .display-font

5 files changed, 12 insertions, 8 deletions

diff --git a/src/main.css b/src/main.css
index f468e53..050b11f 100644
--- a/src/main.css
+++ b/src/main.css
@@ -71,7 +71,7 @@ aside {
 h1, h2, h3, h4, h5, h6,
 .\<h1\>, .\<h2\>, .\<h3\>, .\<h4\>, .\<h5\>, .\<h6\> {
 	margin-block-end: var(--gap);
-	font-family: var(--secondary-font);
+	font-family: var(--display-font);
 	font-size: 1em;
 	margin-block-start: calc(2 * var(--gap));
 	position: relative;
@@ -137,7 +137,7 @@ h6:target {
 }
 
 header {
-	font-family: var(--secondary-font);
+	font-family: var(--display-font);
 	border-block-end: 1px solid var(--graphical-fg);
 }
 
diff --git a/src/utils.css b/src/utils.css
index beca6e1..9a6bec4 100644
--- a/src/utils.css
+++ b/src/utils.css
@@ -37,7 +37,7 @@
 }
 
 
-.primary-font { font-family: var(--primary-font) }
+.main-font, .primary-font { font-family: var(--main-font) }
 .secondary-font { font-family: var(--secondary-font) }
 .display-font { font-family: var(--display-font) }
 .mono-font, .monospace { font-family: var(--mono-font) }
diff --git a/src/variables.css b/src/variables.css
index 4cb0a7d..463938b 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -41,7 +41,8 @@
 
 	/* Fonts */
 	--main-font: 'Source Sans 3', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
-	--secondary-font: var(--main-font); /* Headings etc. */
+	--secondary-font: var(--main-font); /* UI elements and captions */
+  --display-font: var(--secondary-font); /* Headings */
 	--mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from
 		shrinking this */
 	
diff --git a/www/docs/60-variables.md b/www/docs/60-variables.md
index 9bf9107..49d9dbb 100644
--- a/www/docs/60-variables.md
+++ b/www/docs/60-variables.md
@@ -113,9 +113,12 @@ classes; these will be listed in the documentation for that class.
 <dfn>`--main-font`</dfn> {#var-main-font}
 :   The main font family for text.
 
-<dfn>`--secondary-font`</dfn> {#var-display-font}
+<dfn>`--secondary-font`</dfn> {#var-secondary-font}
 :   A secondary text font. It's a good idea to specify a sans-serif font as it
-    will be used for buttons.
+    will be used for buttons and captions.
+
+<dfn>`--display-font`</dfn> {#var-display-font}
+:   A display font used for headings.
 
 <dfn>`--mono-font`</dfn> {#var-mono-font}
 :   Monospace font for code, preformatted text, computer input and output.
diff --git a/www/docs/80-utils.md b/www/docs/80-utils.md
index e06e469..0907a7a 100644
--- a/www/docs/80-utils.md
+++ b/www/docs/80-utils.md
@@ -83,8 +83,8 @@ You can set `--density` yourself in inline styles or your own CSS:
 <dfn>`.allcaps`</dfn>
 :   Sets text in all caps and adds appropriate letter spacing.
 
-<dfn>`.primary-font`</dfn>
-:   Renders the text in the primary font (`--primary-font`).
+<dfn>`.main-font`</dfn>
+:   Renders the text in the main font (`--main-font`).
 
 <dfn>`.secondary-font`</dfn>
 :   Renders the text in the secondary font (`--secondary-font`).