Various tweaks to the new design based on feedback

Natasha and I went through the design together and made a number of
small tweaks.

In particular we removed the responsive line-height in favour of a
fixed one at all screen sizes.

_includes/footer.html

@@ -1,7 +1,5 @@
 <footer>
   <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="/assets/img/a-member-of-workers-coop.png" />

about.html

@@ -15,7 +15,7 @@ layout: default
   </div>
 
   <div>
-    <img class="rounded" src="assets/img/stickies.jpg" alt="" />
+    <img class="rounded cover" src="assets/img/stickies.jpg" alt="" />
   </div>
 </section>
 

assets/css/app.css

@@ -54,12 +54,14 @@ section {
 p, li, a {
   font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: var(--cotech-white);
-  font-weight: 400;
+  font-weight: 300;
+  line-height: 1.4;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: "source_serif_regular", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
   color: var(--cotech-white);
+  line-height: 1.1;
   font-weight: 400;
 }
 
@@ -78,13 +80,11 @@ h3.title {
 @media (min-width: 48em) {
   h1 {
     font-size: calc(2.625rem + ((1vw - 0.48rem) * 2.8646));
-    line-height: calc(1.2 + ((1vw - 0.48) * -0.2083));
     min-height: 0vw;
   }
 
   h2 {
     font-size: calc(2rem + ((1vw - 0.48rem) * 1.7361));
-    line-height: calc(1.2 + ((1vw - 0.48) * -0.1389));
     min-height: 0vw;
   }
 
@@ -102,36 +102,30 @@ h3.title {
   p.large {
     font-size: calc(1.375rem + ((1vw - 0.48rem) * 0.6944));
     min-height: 0vw;
-    line-height: 1.4;
   }
 
   p.intro {
     font-size: calc(1.125rem + ((1vw - 0.48rem) * 0.1736));
     min-height: 0vw;
-    line-height: 1.4;
   }
 
   p, li, a {
     font-size: calc(0.875rem + ((1vw - 0.48rem) * 0.1736));
     min-height: 0vw;
-    line-height: 1.4;
   }
 }
 
 @media (min-width: 120em) {
   h1 {
     font-size: 4.6875rem;
-    line-height: 1.05;
   }
 
   h2 {
     font-size: 3.25rem;
-    line-height: 1.1;
   }
 
   h3 {
     font-size: 2.5rem;
-    line-height: 1.1;
   }
 
   h3.title {
@@ -140,17 +134,14 @@ h3.title {
 
   p.large {
     font-size: 1.875rem;
-    line-height: 1.4;
   }
 
   p.intro {
     font-size: 1.25rem;
-    line-height: 1.4;
   }
 
   p, li, a {
     font-size: 1rem;
-    line-height: 1.4;
   }
 }
 
@@ -174,6 +165,12 @@ img.rounded {
   border-radius: var(--space-sm);
 }
 
+img.cover {
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
 section, footer, header {
   padding: var(--space-md);
   max-inline-size: 1024px;
@@ -186,15 +183,21 @@ section, footer, header {
 }
 
 .box {
-  background: linear-gradient(180deg, rgba(45, 169, 215, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+  background: linear-gradient(180deg, rgba(45, 169, 215, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);
   border: 1px solid var(--cotech-dark-grey);
   border-radius: var(--space-sm);
-  padding: var(--space-sm);
+  padding: var(--space-md);
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 
+@media screen and (width > 480px) {
+  .box {
+    padding: var(--space-lg);
+  }
+}
+
 .stack {
   display: flex;
   flex-direction: column;
@@ -235,6 +238,7 @@ section, footer, header {
   color: var(--cotech-black);
   text-decoration: none;
   font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+  border: 1px solid var(--cotech-white);
   border-radius: var(--space-sm);
   width: fit-content;
   display: flex;
@@ -247,13 +251,14 @@ section, footer, header {
 }
 
 .btn:hover {
+  border: 1px solid var(--cotech-white);
   background: var(--cotech-black);
   color: var(--cotech-white);
 }
 
 .grid {
   display: grid;
-  grid-gap: var(--space-sm);
+  grid-gap: var(--space-md);
   grid-template-columns: 1fr;
   align-items: stretch;
 }
@@ -276,6 +281,10 @@ section, footer, header {
     grid-template-columns: 1fr 1fr;
   }
 
+  .grid-three {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
   .grid-dense {
     grid-template-columns: 1fr 1fr 1fr 1fr;
   }

hire.html

@@ -9,7 +9,7 @@ layout: default
 
     <p class="large">CoTech gives you access to multiple specialist co-ops through a single network. Give us your brief or tell us your challenge and we’ll connect you with the right coops for the job..</p>
 
-    <a class="btn" href="mailto:contact@cotech.coop">email: contact@cotech.coop</a>
+    <a class="btn" href="mailto:contact@cotech.coop">contact@cotech.coop</a>
   </div>
 
   <div>

index.html

@@ -10,11 +10,11 @@ layout: default
     <p class="large">CoTech is a UK-wide network of creative technology companies
       fully owned and controlled by the people who do the work.</p>
 
-    <img class="rounded" src="assets/img/richard.jpg" alt="" />
-
-    <p>We design, build, and support digital and creative products for
+    <p class="intro">We design, build, and support digital and creative products for
       organisations that want values-aligned tech.</p>
 
+    <img class="rounded" src="assets/img/richard.jpg" alt="" />
+
     <div class="switcher">
       <a class="btn" href="/hire">Hire our co-ops</a>
       <a class="btn" href="/join">Join the network</a>

join.html

@@ -27,7 +27,7 @@ layout: default
   </div>
 
   <div>
-    <img class="rounded" src="assets/img/workers-coop-logo.png" alt="" />
+    <img class="rounded" src="assets/img/member-workers-coop.png" alt="" />
   </div>
 </section>
 
@@ -69,3 +69,17 @@ layout: default
     </div>
   </div>
 </section>
+
+<section class="grid grid-uneven">
+  <div class="stack">
+    <h2>For collaborators</h2>
+
+    <p>If you’re not yet a tech coop (or not yet ready to join our membership) but interested to see what we’re about, join our online discourse forum. Participate in our discussions or start your own thread. You’ll also be able to join our monthly online call from there.</p>
+
+    <a class="btn" href="https://community.coops.tech/">Join our discourse forum</a>
+  </div>
+
+  <div>
+    <img class="rounded" src="assets/img/join-us.jpg" alt="" />
+  </div>
+</section>

why_coops.html

@@ -21,7 +21,7 @@ layout: default
   </div>
 </section>
 
-<section class="w-two-thirds">
+<section>
   <div class="box stack">
     <p class="large">Cooperatives around the world are values-based
     organisations, committed to the seven cooperative principles.</p>
@@ -36,7 +36,7 @@ layout: default
 <section class="stack">
   <h2>Advantages of working with our co-ops</h2>
 
-  <div class="grid grid-dense">
+  <div class="grid grid-three">
     <div class="box stack">
       <h3 class="title">Delivery over dividends</h3>
       <p>Decisions are made to deliver good projects, not to maximise