Redesigned footer to be more compact

src/_includes/contact.html

@@ -1,5 +1,5 @@
-<a class="named-anchor" name="contact"></a>
 <section id="contact" class="wrapper style5 special">
+  <a class="named-anchor" name="contact">
   <header class="major">
     <h2>Get in Touch</h2>
     <p>Contact us to discuss your project's needs and arrange a consultation.</p>
@@ -9,4 +9,5 @@
       Our key fingerprint is: <br/><code id="fingerprint">82FC 87C5 1A71 902F DC10 2CF5 4F90 D55B B24B 1147</code>
     </p>
   </header>
+  </a>
 </section>

src/_includes/footer.html

@@ -1,30 +1,49 @@
 <!-- Footer -->
 <footer id="footer">
-  <ul class="icons">
+  <div class="row">
-    <li>
+    <div class="column">
-      <a rel="noopener" href="{{ site.twitter_url }}" style="border-bottom: none">
+      <a class="named-anchor" name="contact"></a>
-        <img style="height: 2rem;" src="{{ '/assets/svg/twitter-brands.svg' | absolute_url }}">
+        <h3>Get in Touch</h3>
-        </img>
+        Contact us to discuss your project's needs and arrange a consultation.
-      </a>
+        <a href="mailto:helo@autonomic.zone">helo@autonomic.zone</a></br>
-    </li>
+        <a href="{{ '/assets/pgp/autonomic-key.asc' | relative_url }}">PGP key</a><code id="fingerprint">82FC 87C5 1A71 902F DC10 2CF5 4F90 D55B B24B 1147</code>
-    <li>
-      <a rel="me" href="{{ site.mastodon_url }}" style="border-bottom: none">
-        <img style="height: 2rem;" src="{{ '/assets/svg/mastodon-brands.svg' | absolute_url }}">
-        </img>
-      </a>
-    </li>
-  </ul>
-  <ul class="copyright">
-    <object style="height: 1.2rem; vertical-align: text-bottom;" type="image/svg+xml" data="{{ '/assets/svg/creative-commons-brands.svg' | absolute_url }}">
-      Your browser does not support SVG
-    </object>&nbsp;
-    {{ site.title }}
-  </ul>
 
-  <address>
+      <ul class="icons" style="margin-bottom: 0; padding-top: 1em">
-      Autonomic Co-operative</br>
+        <li>
-      1539 Pershore Road</br>
+          <a rel="noopener" href="{{ site.twitter_url }}" style="border-bottom: none">
-      Stirchley</br>
+            <img style="height: 2rem;" src="{{ '/assets/svg/twitter-brands.svg' | absolute_url }}">
-      B30 2JH
+            </img>
-  </address>
+          </a>
+        </li>
+        <li>
+          <a rel="me" href="{{ site.mastodon_url }}" style="border-bottom: none">
+            <img style="height: 2rem;" src="{{ '/assets/svg/mastodon-brands.svg' | absolute_url }}">
+            </img>
+          </a>
+        </li>
+      </ul>
+
+    </div>
+    <div class="column">
+      <div class="copyright">
+        <object style="height: 1.2rem; vertical-align: text-bottom;" type="image/svg+xml" data="{{ '/assets/svg/creative-commons-brands.svg' | absolute_url }}">
+          Your browser does not support SVG
+        </object>&nbsp;
+        {{ site.title }}
+      </div>
+      <div class="cotech-box">
+        <a href="https://www.coops.tech/">
+          <img class="cotech-logo" src="{{ '/assets/images/CoTech-white-logo.png' | relative_url }}" alt="CoTech"/>
+          <span class="cotech-text">Member of Cotech</span>
+        </a>
+      </div>
+      <div style="vertical-align: bottom;">
+        <address>
+          Autonomic Co-operative</br>
+          1539 Pershore Road</br>
+          Stirchley</br>
+          B30 2JH
+        </address>
+      </div>
+  </div>
 </footer>

src/_layouts/default.html

@@ -6,9 +6,7 @@
   {% include banner.html %}
   {% include core-values.html %}
   {% include services.html %}
-  {% include contact.html %}
   {% include footer.html %}
-  {% include membership-footer.html %}
   {% include foot-scripts.html %}
 </body>
 </html>

src/assets/styles/main.scss

@@ -142,12 +142,17 @@ body.is-mobile {
     }
   }
 
-  .copyright {
+  .copyright, .cotech-text {
     font-size: 0.8em;
     letter-spacing: _size(letter-spacing-alt);
-    list-style: none;
+    
-    padding: 0;
     text-transform: uppercase;
+  }
+
+  .copyright {
+    list-style: none;
+    padding: 0.25em 0;
+    
 
     li {
       border-left: solid 1px _palette(fg-light);
@@ -179,6 +184,27 @@ body.is-mobile {
       }
     }
   }
+  .row {
+    display: flex;
+    margin: 0 10%;
+  }
+  
+  .column {
+    flex: 50%;
+  }
+
+  .cotech-box {
+    padding-bottom: 1em;;
+  }
+  
+  .cotech-text {
+    vertical-align: middle;
+  }
+  
+  .cotech-logo {
+    height: 1em;
+    vertical-align: text-bottom;
+  }
 
   @include breakpoint(medium) {
     @include padding(4em, 3em);
@@ -189,6 +215,9 @@ body.is-mobile {
   }
 }
 
+
+
+
 /* Landing */
 
 body.landing {