From ced5d2ad0e7d7628dba2350160ccf9151d986894 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Tue, 16 Dec 2025 12:11:01 +0000
Subject: [PATCH] Refactor `hero` into `grid-uneven` and `large-only` classes

This makes it possible to reuse this CSS for the about page layout.
---
 about.html         | 12 ++++++------
 assets/css/app.css | 34 ++++++++++++++++++----------------
 index.html         |  6 +++---
 3 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/about.html b/about.html
index cea2113..4ce76be 100644
--- a/about.html
+++ b/about.html
@@ -3,8 +3,8 @@ title: About
 layout: default
 ---
 
-<section class="hero">
-  <div class="hero__left stack">
+<section class="grid grid-uneven">
+  <div class="stack">
     <h1>About CoTech</h1>
 
     <p class="large">Co-operative Technologists (CoTech) is a growing network of tech and digital service co-operatives working to reshape the technology sector in the UK.</p>
@@ -14,17 +14,17 @@ layout: default
     <p>We believe that businesses owned and run by their workers can create better workplaces, deliver higher quality products, and provide greater value to customers. Unlike traditional businesses, we have no private shareholders extracting profits.</p>
   </div>
 
-  <div class="hero__right">
+  <div>
     <img class="rounded" src="assets/img/stickies.jpg" alt="" />
   </div>
 </section>
 
-<section class="hero">
-  <div class="hero__left stack">
+<section class="grid grid-uneven">
+  <div class="large-only">
     <img class="rounded" src="assets/img/maria.jpg" alt="" />
   </div>
 
-  <div class="hero__right">
+  <div>
     <p class="large">We strive to be a model of thought leadership and innovation in the tech sector and the progressive business movement. Our aim is to change both our industry and society through cooperation.</p>
   </div>
 </section>
diff --git a/assets/css/app.css b/assets/css/app.css
index bdf2cda..2455943 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -211,6 +211,16 @@ section, footer, header {
   gap: var(--space-sm);
 }
 
+.large-only {
+  display: none;
+}
+
+@media screen and (width > 480px) {
+  .large-only {
+    display: inline;
+  }
+}
+
 .btn {
   padding: var(--space-sm) var(--space-lg);
   background: var(--cotech-white);
@@ -249,6 +259,10 @@ section, footer, header {
   grid-template-columns: 1fr 1fr;
 }
 
+.grid-uneven {
+  grid-gap: var(--space-lg);
+}
+
 @media (min-width: 420px) {
   .grid {
     grid-template-columns: 1fr 1fr;
@@ -257,6 +271,10 @@ section, footer, header {
   .grid-dense {
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }
+
+  .grid-uneven {
+    grid-template-columns: 3fr 2fr;
+  }
 }
 
 .header {
@@ -353,22 +371,6 @@ section, footer, header {
   }
 }
 
-.hero__right {
-  display: none;
-}
-
-@media screen and (width > 480px) {
-  .hero {
-    display: grid;
-    gap: var(--space-xl);
-    grid-template-columns: 3fr 2fr;
-  }
-
-  .hero__right {
-    display: inline;
-  }
-}
-
 footer {
   h3 {
     border-left: none;
diff --git a/index.html b/index.html
index 51f9140..88ec77d 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@ title: CoTech
 layout: default
 ---
 
-<section class="hero">
-  <div class="hero__left stack">
+<section class="grid grid-uneven">
+  <div class="stack">
     <h1>We're building a cooperative digital economy</h1>
 
     <p class="large">CoTech is a UK-wide network of creative technology companies
@@ -21,7 +21,7 @@ layout: default
     </div>
   </div>
 
-  <div class="hero__right">
+  <div class="large-only">
     <img src="assets/img/decoration.svg" alt="" />
   </div>
 </section>