From 589445e99b06f9565228e980e67416ac6b61d987 Mon Sep 17 00:00:00 2001
From: Lee Cattarin <lee.cattarin@gmail.com>
Date: Fri, 21 Aug 2026 16:25:18 -0700
Subject: [PATCH] header and heading spacing/size

---
 css/main.css | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/css/main.css b/css/main.css
index 6c1016a..f40d07c 100644
--- a/css/main.css
+++ b/css/main.css
@@ -108,8 +108,13 @@ h1 {
 	margin-block-end: .6em;
 }
 
-h2 { font-size: 2rem; }
-h3 { font-size: 1.8rem; }
+h2 { font-size: 2.1rem; }
+h3 { font-size: 1.7rem; }
+h4 { font-size: 1.4rem; }
+
+@media (max-width: 650px) {
+	h1 { font-size: 2.6rem; }
+}
 
 p {
   text-wrap: pretty; /* 9. Improve line wrapping */
@@ -143,17 +148,27 @@ ul p {
 
 /* Header/nav/footer */
 header {
-	height: 20vh;
-	padding: calc(20vh / 8);
+	--height-base: 20vh; /* Variable height for desktop vs mobile */
+}
+
+@media (max-width: 650px) {
+	header{
+		--height-base: 12vh; /* Variable height for desktop vs mobile */
+	}
+}
+
+header {
+	height: var(--height-base);
+	padding: calc(var(--height-base) / 8);
 	background-color: var(--color-accent);
 }
 
 .logo {
 	height: 100%;
 	width: auto;
-	padding: calc(20vh / 30);
-	border: calc(20vh / 50) solid var(--color-accent);
-	border-radius: calc(20vh / 3);
+	padding: calc(var(--height-base) / 30);
+	border: calc(var(--height-base) / 50) solid var(--color-accent);
+	border-radius: calc(var(--height-base) / 3);
 }
 
 header a:focus-visible {
@@ -162,7 +177,7 @@ header a:focus-visible {
 
 header a:focus-visible .logo {
 	border-color: var(--color-text);
-	outline: calc(20vh / 30) solid var(--color-accent-flipped);
+	outline: calc(var(--height-base) / 30) solid var(--color-accent-flipped);
 }
 
 @media (prefers-color-scheme: light) {