[PATCH v1 2/6] prevent wrapped headings from overlapping with text above it

From: Rito Rhymes <rito@ritovision.com>
Date: Mar 14, 2026, 07:59 UTC
Message-ID: <20260314075922.67391-3-rito@ritovision.com>
In-Reply-To: <20260314075922.67391-1-rito@ritovision.com>

The Oswald heading font has tall ascenders/descenders, and at the prior line-height wrapped heading lines can visually overlap adjacent text above, reducing legibility. This is most noticeable on mobile, especially in the desktop banner where the title wraps and overlaps with itself.

Apply this as a global heading rule as a consistent policy for anywhere heading wrap can occur. Some desktop views may not show the issue yet due to available width, but the underlying font behavior is the same and can surface as content or layout changes.

Adjust banner heading and nav spacing to offset the line-height change, preserving the original desktop banner visual layout.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
---
 korgi/static/css/main.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/korgi/static/css/main.css b/korgi/static/css/main.css
index 7d73395..3b09d24 100644
--- a/korgi/static/css/main.css
+++ b/korgi/static/css/main.css
@@ -68,7 +68,7 @@ body {
     float: right;
 }
 #banner h1 {
-    margin: 28px 0 47px .05em;
+    margin: 12px 0 31px .05em;
     text-shadow: 3px 3px 0 #F8F4EE;
     font-size: 3em;
 }
@@ -78,7 +78,7 @@ body {
 }
 #banner ul {
     padding: 0;
-    margin: 0;
+    margin: 0 100px 0 0;
     font-size: 1.1em;
     font-weight: bold;
     list-style: none;
@@ -99,6 +99,7 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
     font-family: oswald,helvetica,sans-serif;
+    line-height: 1.1;
 }
 
 a {

-- 
2.51.0