From a8e2de22667dea796fce1e936575ecbcd5cb0b1c Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Sun, 10 Jul 2022 22:38:25 -0700
Subject: [PATCH] CSS: reduce h1 top margin

---
 assets/css/main.css | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 6dab031..9b3e486 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -2,7 +2,7 @@
  * touch-friendly layout.
  * Nothing here exists purely for aesthetics; everything addresses a
  * specific a11y, compatibility, or critical
- * usability need.
+ * usability need. The only exception is the h1's top margin.
  *
  * One exception: I re-set the input styles so Safari wouldn't make them
  * pill-shaped.
@@ -145,7 +145,7 @@ html {
 		margin: -.75em -.25em;
 	}
 
-	header a[href="#main"],
+	header a[href="#main"], /* skip link */
 	div[itemprop="comment"] dd > a ,
 	footer > nav,
 	/* List items with direct hyperlink children should only have one hyperlink. */
@@ -183,6 +183,7 @@ html {
 		margin-bottom: 1.75em;
 	}
 
+	/* skip link: make it invisible until focused, and put it on the top. */
 	header a[href="#main"] {
 		position: absolute;
 		top: -2em;
@@ -253,11 +254,14 @@ blockquote {
 	border-left: 3px solid;
 }
 
-/* Narrow screens: allow hyphenating titles
- * I can't add soft hyphens to these. */
+/* Narrow screens: allow hyphenating titles I can't add soft hyphens to
+ * these. Also decrease the top margin a bit; the navbar and breadcrumb
+ * list take up plenty of space on top. The latter is a purely
+ * aesthetic choice, since it was annoying me a lot. */
 h1 {
 	-webkit-hyphens: auto;
 	hyphens: auto;
+	margin-top: .25em;
 }
 
 /* Very narrow screens: full hyphenation.