From 0a1af8dc2323c0d07be097eaf9ad0e0831513443 Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Fri, 14 Oct 2022 14:33:01 -0700
Subject: [PATCH] Overhaul heading styles

Regroup CSS styles all together
Make <h5> and <h6> the regular body style and small
Combine some styles that were separate before
---
 static/styles/root.css | 54 +++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 29 deletions(-)

diff --git a/static/styles/root.css b/static/styles/root.css
index 6c020d5..8bb08e6 100644
--- a/static/styles/root.css
+++ b/static/styles/root.css
@@ -234,34 +234,12 @@ footer.site p + p {
 h1, h2, h3, h4, h5, h6 {
     color: var(--foreground-header-color);
     font-family: var(--font-family-heading);
+    font-weight: 600;
     margin-block: 3.5rem 1rem;
+    letter-spacing: 0.08em;
     line-height: var(--body-header-line-height);
 }
 
-h1:first-child, h2:first-child, h3:first-child,
-h4:first-child, h5:first-child, h6:first-child {
-    margin-block-start: 0;
-}
-
-html {
-    background-color: var(--background-color);
-    color: var(--foreground-color);
-    font-family: var(--font-family-body);
-    font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
-}
-
-img.circular {
-    shape-outside: circle(50%);
-    -webkit-clip-path: circle(50%);
-}
-
-main {
-    max-width: var(--content-width);
-    margin: 0 auto;
-    margin-block-start: var(--body-item-spacing);
-    width: 100%;
-}
-
 h1.site {
     color: rgb(var(--mid-blue));
     font-size: 2.5em;
@@ -284,11 +262,6 @@ h1.site {
 h1.site * { color: inherit; }
 h1.site a:hover { text-decoration: none; }
 
-h1, h2, h3, h4, h5, h6 {
-    font-weight: 600;
-    letter-spacing: 0.08em;
-}
-
 header.site {
     display: flex;
     left: 0;
@@ -356,15 +329,38 @@ header.site .grid nav:last-of-type {
     justify-content: end;
 }
 
+html {
+    background-color: var(--background-color);
+    color: var(--foreground-color);
+    font-family: var(--font-family-body);
+    font-size: clamp(var(--font-size-min), 1vw, var(--font-size-max));
+}
+
 img {
     height: auto;
     max-width: 100%;
 }
 
+img.circular {
+    shape-outside: circle(50%);
+    -webkit-clip-path: circle(50%);
+}
+
+main {
+    max-width: var(--content-width);
+    margin: 0 auto;
+    margin-block-start: var(--body-item-spacing);
+    width: 100%;
+}
+
 main h1 { font-size: 1.6em; }
 main h2 { font-size: 1.5em; }
 main h3 { font-size: 1.4em; }
 main h4 { font-size: 1.3em; }
+main h5 { font-size: 1.3em; }
+main h6 { font-size: var(--body-font-size); }
+
+main h5, main h6 { font-family: var(--font-family-body); }
 
 nav.site {
     align-items: center;