Footer styling

_includes/footer.html

@@ -1,10 +1,23 @@
 <footer>
-  <section>
-    <img src="/assets/img/coop-logo.png" /> <img src="/assets/img/workers-coop-logo.png" style="width:130px;height:80px;"/>
-    <p>CoTech Coops are members of <a href="https://workers.coop/" target="_blank">workers.coop</a></p>
-    <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>
+  <section class="stack">
+    <h3>We're building a co-operative digital economy</h3>
+
+    <div class="stack container reverse">
+      <a href="https://workers.coop">
+        <img src="images/a-member-of-workers-coop.png" />
+      </a>
+
+      <div>
+        <p><strong>Development:</strong> Go Free Range & Outlandish</p>
+        <p><strong>Hosting:</strong> Web Architects</p>
+        <p><strong>Branding & design:</strong> Creative Coop</p>
+      </div>
+    </div>
+
+    <div class="container">
+      <p>CoTech 2025</p>
+      <p>Source code available on <a href="https://git.coop/cotech/website" target="_blank">git.coop</a>.</p>
+    </div>
   </section>
 
   <!-- Matomo -->

assets/css/app.css

@@ -153,6 +153,10 @@ h3.title {
   }
 }
 
+strong {
+  font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+}
+
 body {
   background-color: var(--cotech-black);
 }
@@ -169,7 +173,7 @@ img.rounded {
   border-radius: var(--space-sm);
 }
 
-section {
+section, footer {
   padding: var(--space-sm);
 }
 
@@ -179,6 +183,7 @@ section {
   border-radius: var(--space-sm);
   padding: var(--space-sm);
   display: flex;
+  flex-direction: column;
   justify-content: center;
 }
 
@@ -333,3 +338,24 @@ section {
     z-index: 1001;
   }
 }
+
+footer {
+  h3 {
+    border-left: none;
+    padding-left: 0;
+  }
+}
+
+@media screen and (width > 480px) {
+  footer {
+    .container {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+    }
+
+    .reverse {
+      flex-direction: row-reverse;
+    }
+  }
+}