From b3371aa8c9a4a2e7c2126d8ac0aec99497f18a53 Mon Sep 17 00:00:00 2001
From: Chris Lowis <chris.lowis@gmail.com>
Date: Fri, 20 Jun 2025 16:07:07 +0100
Subject: [PATCH] Style footer

---
 _includes/footer.html | 18 ++++++++++--------
 assets/css/app.css    | 30 ++++++++++++++++++++++++++++++
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/_includes/footer.html b/_includes/footer.html
index a89e104..92ce987 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,16 +1,18 @@
 <footer>
-  <ul>
-    <li><a href="/about">About <span>&#xbb;</span></a></li>
-    <li><a href="/join">Join <span>&#xbb;</span></a></li>
-    <li><a href="/about#manifesto">Manifesto <span>&#xbb;</span></a></li>
-  </ul>
+  <section class="slice slice--dark">
+    <ul class="footer-links">
+      <li><a href="/about">About <span>&#xbb;</span></a></li>
+      <li><a href="/join">Join <span>&#xbb;</span></a></li>
+      <li><a href="/about#manifesto">Manifesto <span>&#xbb;</span></a></li>
+    </ul>
+  </section>
 
-  <div>
-    <img src="/assets/img/coop-logo.png" class="float-center" />
+  <section class="slice slice--darker">
+    <img src="/assets/img/coop-logo.png" />
     <p>Site developed by <a href="https://glowboxdesign.co.uk/" target="_blank">Glowbox Design</a>, <a href="https://gofreerange.com/" target="_blank">Go Free Range</a> &amp; <a href="https://outlandish.com" target="_blank">Outlandish</a>.</p>
     <p>Source code available on <a href="https://git.coop/cotech/website" target="_blank">git.coop</a>.</p>
     <p>Hosted by <a href="https://www.webarchitects.coop/" target="_blank">Webarchitects</a> for CoTech &#xa9; {{ 'now' | date: '%Y' }}</p>
-  </div>
+  </section>
 
   <!-- Matomo -->
   <script type="text/javascript">
diff --git a/assets/css/app.css b/assets/css/app.css
index c30e33a..eba4b55 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -120,6 +120,14 @@ h1, h2, h3, h4, h5, h6 {
   background-color: var(--cotech-light-grey);
 }
 
+.slice--dark {
+  background-color: #212a3d;
+}
+
+.slice--darker {
+  background-color: #1e2637;
+}
+
 .slice--blue {
   background-color: var(--cotech-blue);
 }
@@ -140,6 +148,22 @@ h1, h2, h3, h4, h5, h6 {
   color: var(--cotech-white);
 }
 
+.slice--dark p {
+  color: var(--cotech-white);
+}
+
+.slice--dark a {
+  color: var(--cotech-white);
+}
+
+.slice--darker p {
+  color: #7b8290;
+}
+
+.slice--darker a {
+  color: #7b8290;
+}
+
 .metadata {
   display: flex;
   gap: var(--space-xl);
@@ -208,3 +232,9 @@ h1, h2, h3, h4, h5, h6 {
 .logo-grid_img:hover {
   transform: scale(1.1);
 }
+
+.footer-links {
+  list-style-type: none;
+  display: flex;
+  gap: var(--space-lg);
+}