From 2100334f1fcd756043873bb628ba4d8abfd56588 Mon Sep 17 00:00:00 2001
From: John Gatward <John.Gatward@sainsburys.co.uk>
Date: Sat, 21 Mar 2026 13:24:13 +0000
Subject: [PATCH] Fixed mobile formatting for hero-by line

---
 archive/v1/index.html |  2 --
 style.css             | 22 ++++++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/archive/v1/index.html b/archive/v1/index.html
index c1916d0..f589307 100644
--- a/archive/v1/index.html
+++ b/archive/v1/index.html
@@ -69,8 +69,6 @@
                 </div>
                 <div class="intro">
                     <h3 id="introjump">About me</h3>
-                    <p class="v4-margin-note">The original
-                        about me section was full of nonsense memes and has been removed.</p>
                     <p>A cool website to show my projects</p>
                 </div>
 
diff --git a/style.css b/style.css
index 770d8a1..f9501c0 100644
--- a/style.css
+++ b/style.css
@@ -1052,6 +1052,28 @@ footer a:hover {
         font-size: clamp(2.8rem, 12vw, 5rem);
     }
 
+    .hero-by-line {
+        align-items: flex-start;
+        flex-wrap: wrap;
+        gap: 0.35rem;
+        margin-bottom: 0.45rem;
+    }
+
+    .hero-by-line:last-child {
+        margin-bottom: 0;
+    }
+
+    .hero-by {
+        font-size: 0.86rem;
+        line-height: 1.5;
+    }
+
+    .hero-by-role {
+        font-size: 0.8rem;
+        line-height: 1.5;
+        opacity: 0.75;
+    }
+
     footer {
         flex-direction: column;
         gap: 0.5rem;