From 1d77be4e7c3eea544967956a5b33bbf464a9e49f Mon Sep 17 00:00:00 2001
From: June <june@jsts.xyz>
Date: Mon, 29 Jan 2024 03:52:50 +0100
Subject: [PATCH] Define some general document typography: font config and
 heading sizes

---
 .../assets/scss/document-typography.scss      | 48 +++++++++++++++++++
 themes/ccchh/assets/scss/main.scss            |  1 +
 2 files changed, 49 insertions(+)
 create mode 100644 themes/ccchh/assets/scss/document-typography.scss

diff --git a/themes/ccchh/assets/scss/document-typography.scss b/themes/ccchh/assets/scss/document-typography.scss
new file mode 100644
index 0000000..357cbde
--- /dev/null
+++ b/themes/ccchh/assets/scss/document-typography.scss
@@ -0,0 +1,48 @@
+// A bunch of this is taken from PicoCSS, see here:
+// https://github.com/picocss/pico/blob/v1.5.11/scss/themes/default/_styles.scss
+:root {
+  // Use a (minimum) font size of 16px, since this seems to be a standard font
+  // size.
+  font-size: 16px;
+  // Explicitly set the Firefox default.
+  font-weight: 400;
+  // Line height of 1.5, see:
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#accessibility_concerns
+  line-height: 1.5;
+  font-family: sans-serif;
+
+  // Go up to 18px for the font size depending on the screen width.
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      font-size: 17px;
+    }
+  }
+
+  @if map-get($breakpoints, "md") {
+    @media (min-width: map-get($breakpoints, "md")) {
+      font-size: 18px;
+    }
+  }
+
+
+  h1, h2, h3, h4, h5, h6 {
+    // Explicitly set the Firefox default.
+    font-weight: 700;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.75rem;
+  }
+  h3 {
+    font-size: 1.5rem;
+  }
+  h4 {
+    font-size: 1.25rem;
+  }
+  h5 {
+    font-size: 1.125rem;
+  }
+}
diff --git a/themes/ccchh/assets/scss/main.scss b/themes/ccchh/assets/scss/main.scss
index 785bcd0..e831c66 100644
--- a/themes/ccchh/assets/scss/main.scss
+++ b/themes/ccchh/assets/scss/main.scss
@@ -1,2 +1,3 @@
 @import "variables.scss";
 @import "container.scss";
+@import "document-typography.scss";