From ebdd2699d1c57636a23cb24c158885a3032461e1 Mon Sep 17 00:00:00 2001 From: Geoffrey Eisenbarth Date: Fri, 23 Aug 2024 12:37:56 -0500 Subject: Address .main-font and .display-font --- src/main.css | 4 ++-- src/utils.css | 2 +- src/variables.css | 3 ++- www/docs/60-variables.md | 7 +++++-- www/docs/80-utils.md | 4 ++-- 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, .\, .\, .\, .\, .\, .\ { 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. `--main-font` {#var-main-font} : The main font family for text. -`--secondary-font` {#var-display-font} +`--secondary-font` {#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. + +`--display-font` {#var-display-font} +: A display font used for headings. `--mono-font` {#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: `.allcaps` : Sets text in all caps and adds appropriate letter spacing. -`.primary-font` -: Renders the text in the primary font (`--primary-font`). +`.main-font` +: Renders the text in the main font (`--main-font`). `.secondary-font` : Renders the text in the secondary font (`--secondary-font`). -- cgit v1.2.3