Various tweaks based on design feedback

Tommy sent over some feedback, and I've tried to incorporate it. I've
brought in the Light variant of the Source Serif font, as although
figma uses Regular, these seemed to render too heavy in browsers even
with the smoothing options I also added.

_includes/our_members.html

@@ -19,10 +19,6 @@
   </dialog>
 </section>
 
-<section>
-  <a class="btn" href="/hire">Hire our co-ops</a>
-</section>
-
 <script>
   const dialog = document.getElementById('coop-dialog');
   const dialogBody = document.getElementById('coop-dialog-container__body');

_includes/services.html

@@ -10,7 +10,7 @@
   <div class="grid">
     <div class="box stack">
       <h3 class="title">Digital products & platforms</h3>
-      <ul>
+      <ul class="services">
         <li>Websites & web apps 
(WordPress, Drupal, Webflow, custom)</li>
         <li>CMS / CRM design and development</li>
         <li>E-commerce</li>
@@ -24,7 +24,7 @@
 
     <div class="box stack">
       <h3 class="title">Design & content</h3>
-      <ul>
+      <ul class="services">
         <li>User research & testing</li>
         <li>Design sprints & discovery</li>
         <li>Accessibility & usability training</li>
@@ -37,7 +37,7 @@
 
     <div class="box stack">
       <h3 class="title">Marketing & comms</h3>
-      <ul>
+      <ul class="services">
         <li>Digital strategy & campaigns</li>
         <li>Copywriting</li>
         <li>Social media marketing</li>
@@ -49,7 +49,7 @@
 
     <div class="box stack">
       <h3 class="title">Co-op & organisational development</h3>
-      <ul>
+      <ul class="services">
         <li>Cooperative Development</li>
         <li>Facilitation</li>
         <li>Sociocracy Training</li>

assets/css/app.css

@@ -13,6 +13,11 @@
   src: url("/assets/fonts/SourceSerif4-Regular.ttf");
 }
 
+@font-face {
+  font-family: 'source_serif_light';
+  src: url("/assets/fonts/SourceSerif4-Light.ttf");
+}
+
 @font-face {
   font-family: 'source_serif_bold';
   src: url("/assets/fonts/SourceSerif4-Bold.ttf");
@@ -51,6 +56,15 @@ section {
   max-inline-size: none;
 }
 
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+main {
+  --space: 3rem;
+}
+
 p, li, a {
   font-family: "open_sansregular", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   color: var(--cotech-white);
@@ -59,9 +73,9 @@ p, li, a {
 }
 
 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;
+  font-family: "source_serif_light", 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;
+  line-height: 1.2;
   font-weight: 400;
 }
 
@@ -76,48 +90,37 @@ h3.title {
   font-weight: 700;
 }
 
-
+h1 {
-@media (min-width: 48em) {
+  font-size: 2.625rem;
-  h1 {
-    font-size: calc(2.625rem + ((1vw - 0.48rem) * 2.8646));
-    min-height: 0vw;
-  }
-
-  h2 {
-    font-size: calc(2rem + ((1vw - 0.48rem) * 1.7361));
-    min-height: 0vw;
-  }
-
-  h3 {
-    font-size: calc(1.625rem + ((1vw - 0.48rem) * 1.2153));
-    line-height: calc(1.2 + ((1vw - 0.48) * -0.1389));
-    min-height: 0vw;
-  }
-
-  h3.title {
-    font-size: calc(1.25rem + ((1vw - 0.48rem) * 0.3472));
-    min-height: 0vw;
-  }
-
-  p.large {
-    font-size: calc(1.375rem + ((1vw - 0.48rem) * 0.6944));
-    min-height: 0vw;
-  }
-
-  p.intro {
-    font-size: calc(1.125rem + ((1vw - 0.48rem) * 0.1736));
-    min-height: 0vw;
-  }
-
-  p, li, a {
-    font-size: calc(0.875rem + ((1vw - 0.48rem) * 0.1736));
-    min-height: 0vw;
-  }
 }
 
-@media (min-width: 120em) {
+h2 {
+  font-size: 2rem;
+}
+
+h3 {
+  font-size: 1.625rem;
+}
+
+h3.title {
+  font-size: 1.25rem;
+}
+
+p.large {
+  font-size: 1.375rem;
+}
+
+p.intro {
+  font-size: 1.125rem;
+}
+
+p, li, a {
+  font-size: 0.875rem;
+}
+
+@media (min-width: 420px) {
   h1 {
-    font-size: 4.6875rem;
+    font-size: 4rem;
   }
 
   h2 {
@@ -145,6 +148,23 @@ h3.title {
   }
 }
 
+ul.services {
+  list-style: none;
+  padding-left: 0;
+}
+
+ul.services li {
+  padding-left: var(--space-md);
+  position: relative;
+}
+
+ul.services li::before {
+  content: "−";
+  color: var(--cotech-blue);
+  position: absolute;
+  left: 0;
+}
+
 strong {
   font-family: "open_sansbold", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
 }
@@ -165,15 +185,26 @@ img.rounded {
   border-radius: var(--space-sm);
 }
 
+img.rectangle {
+  aspect-ratio: 2;
+  object-fit: cover;
+}
+
 img.cover {
   object-fit: cover;
   height: 100%;
   width: 100%;
 }
 
+img.stretch {
+  object-fit: cover;
+  object-position: 0px 0px;
+  height: 100%;
+}
+
 section, footer, header {
   padding: var(--space-md);
-  max-inline-size: 1024px;
+  max-inline-size: 1144px;
   margin-left: auto;
   margin-right: auto;
 }

index.html

@@ -5,15 +5,15 @@ layout: default
 
 <section class="grid grid-uneven">
   <div class="stack">
-    <h1>We're building a cooperative digital economy</h1>
+    <h1>We’re building a cooperative digital economy</h1>
 
     <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>
 
-    <p class="intro">We design, build, and support digital and creative products for
+    <p>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="Photo of Richard from Agile Collective giving a talk about CoTech" />
+    <img class="rounded rectangle" src="assets/img/richard.jpg" alt="Photo of Richard from Agile Collective giving a talk about CoTech" />
 
     <div class="switcher">
       <a class="btn" href="/hire">Hire our co-ops</a>
@@ -22,10 +22,18 @@ layout: default
   </div>
 
   <div class="large-only">
-    <img src="assets/img/decoration.svg" alt="Brand image with stylised lettering of the word 'Cotech'" />
+    <img class="stretch" src="assets/img/decoration.svg" alt="Brand image with stylised lettering of the word 'Cotech'" />
   </div>
 </section>
 
 {% include services.html %}
 
+<section>
+  <a class="btn" href="/hire">Hire our co-ops</a>
+</section>
+
 {% include our_members.html %}
+
+<section>
+  <a class="btn w-full" href="/hire">Hire our co-ops</a>
+</section>

join.html

@@ -37,7 +37,7 @@ layout: default
   <div class="grid">
     <div class="box stack">
       <h3 class="title">More community</h3>
-      <ul>
+      <ul class="services">
         <li>A transparent, friendly group of mission-driven co-op founders and worker-owners</li>
         <li>Monthly online calls</li>
         <li>Twice-yearly in-person gatherings around the UK</li>
@@ -49,7 +49,7 @@ layout: default
     <div class="box stack">
       <h3 class="title">More skills</h3>
 
-      <ul>
+      <ul class="services">
         <li>Develop business skills</li>
         <li>Share challenges of working in the digital/tech sector</li>
         <li>Swap tools, processes and experience</li>
@@ -59,7 +59,7 @@ layout: default
 
     <div class="box stack">
       <h3 class="title">More work</h3>
-      <ul>
+      <ul class="services">
         <li>Strengthen your co-op’s reputation and value proposition by association with CoTech</li>
         <li>Generate leads through the CoTech brand and presence at sector events</li>
         <li>Get referrals from other members</li>