Feat: visual footer

_config.yml

@@ -6,8 +6,10 @@ address: Toronto, ON
 github: https://github.com/hyphacoop
 linkedin: https://www.linkedin.com/company/hyphacoop/
 mastodon: https://cosocial.ca/@hyphacoop
-twitter: https://twitter.com/hyphacoop/
-handbook: https://link.hypha.coop/handbook
+twitter: https://x.com/hyphacoop/
+bluesky: https://bsky.app/profile/hypha.coop
+handbook: https://handbook.hypha.coop
+newsletter: https://newsletter.hypha.coop
 rss: "/feed.xml"
 url: "https://hypha.coop"
 lang: "en"

_includes/sections/footer.html

@@ -1,31 +1,62 @@
-    <p class="f3 f4-l fw7 lh-copy dark-gray">{{ site.footer }}</p>
+<p class="f3 f4-l fw7 lh-copy dark-gray">{{ site.footer }}</p>
 <div class="flex-l items-baseline">
   <div class="w-100 w-50-l pr5">
-   <ul class="list pl0 flex flex-wrap f5 f4-l items-center">
-      <li class="pr3"><a href="{{ site.github }}" class="accent link underline-hover" target="_blank" rel="noopener">GitHub</a></li>
-      <li class="pr3"><a href="{{ site.linkedin }}" class="accent link underline-hover" target="_blank" rel="noopener" data-proofer-ignore>LinkedIn</a></li>
-      <li class="pr3"><a href="{{ site.twitter }}" class="accent link underline-hover" target="_blank" rel="noopener">Twitter</a></li>
-      <li class="pr3"><a href="{{ site.mastodon }}" class="accent link underline-hover" target="_blank" rel="noopener me">Mastodon</a></li>
-      <li class="pr3"><a href="{{ site.handbook }}" class="accent link underline-hover" target="_blank" rel="noopener">Handbook</a></li>
-      <li class="pr3"><a href="{{ site.url }}{{ site.rss }}" class="accent link underline-hover" target="_blank" rel="noopener">
-        RSS
-        <img style="width:14px;"  src="/assets/images/logos/rss-logo.png" alt="rss icon">
-        </a>
-        </li>
-    </ul> <p class="f6 f5-l lh-copy">Data and privacy policies are in our handbook: <a href="https://handbook.hypha.coop/Policies/data.html" target="_blank" class="accent link underline-hover" rel="noopener">How We Use Data</a> and <a href="https://handbook.hypha.coop/Policies/working-open.html" target="_blank" class="accent link underline-hover" rel="noopener">Working Open</a>.</p>
+    <ul class="list pl0 flex flex-wrap f5 f4-l items-center">
+      <li class="pr3 pr4-ns mb3"><a href="{{ site.github }}" class="accent link underline-hover" target="_blank"
+          rel="noopener">
+          <img class="w2 h2 w2-5-l h2-5-l grow-large" src="/assets/images/logos/footer/github_logo.svg" alt="GitHub">
+        </a></li>
+      <li class="pr3 pr4-ns mb3"><a href="{{ site.linkedin }}" class="accent link underline-hover" target="_blank"
+          rel="noopener" data-proofer-ignore>
+          <img class="w2 h2 w2-5-l h2-5-l grow-large" src="/assets/images/logos/footer/linkedin_logo.svg" alt="LinkedIn">
+        </a></li>
+      <li class="pr3 pr4-ns mb3"><a href="{{ site.bluesky }}" class="accent link underline-hover" target="_blank"
+          rel="noopener" data-proofer-ignore>
+          <img class="w2 h2 w2-5-l h2-5-l grow-large" src="/assets/images/logos/footer/bluesky_logo.svg" alt="Bluesky">
+        </a></li>
+      <li class="pr3 pr4-ns mb3"><a href="{{ site.mastodon }}" class="accent link underline-hover" target="_blank"
+          rel="noopener me">
+          <img class="w2 h2 w2-5-l h2-5-l grow-large" src="/assets/images/logos/footer/mastodon_logo.svg" alt="Mastodon">
+        </a></li>
+      <li class="pr3 pr4-ns mb3"><a href="{{ site.url }}{{ site.rss }}" class="accent link underline-hover"
+          target="_blank" rel="noopener">
+          <img class="w2 h2 w2-5-l h2-5-l grow-large" src="/assets/images/logos/footer/rss_logo.svg" alt="RSS">
+        </a></li>
+    </ul>
+    <ul class="list pl0 flex flex-wrap f5 f4-l items-center">
+      <li class="pr3"><a href="{{ site.handbook }}" class="accent link underline-hover" target="_blank"
+        rel="noopener">
+        Handbook
+      </a></li>
+    <li class="pr3"><a href="{{ site.newsletter }}" class="accent link underline-hover" target="_blank"
+        rel="noopener">
+        Newsletter
+      </a></li>
+    </ul>
+    <p class="f6 f5-l lh-copy">Data and privacy policies are in our handbook: <a
+        href="https://handbook.hypha.coop/Policies/data.html" target="_blank" class="accent link underline-hover"
+        rel="noopener">How We Use Data</a> and <a href="https://handbook.hypha.coop/Policies/working-open.html"
+        target="_blank" class="accent link underline-hover" rel="noopener">Working Open</a>.</p>
     <p class="f6 f5-l lh-copy">
-      This site is published using <a href="https://distributed.press/" target="_blank" class="accent link underline-hover" rel="noopener">Distributed Press</a>.
-      You can <a href="https://github.com/hyphacoop/api.distributed.press" target="_blank" class="accent link underline-hover" rel="noopener">use it to publish</a> on the p2p and distributed web too.
+      This site is published using <a href="https://distributed.press/" target="_blank"
+        class="accent link underline-hover" rel="noopener">Distributed Press</a>.
+      You can <a href="https://github.com/hyphacoop/api.distributed.press" target="_blank"
+        class="accent link underline-hover" rel="noopener">use it to publish</a> on the p2p and distributed web too.
       Distributed Web:
-      <a href="https://ipfs.distributed.press/ipns/hypha.coop{{ page.url }}" class="accent link underline-hover" data-proofer-ignore>ipns://hypha.coop</a>
+      <a href="https://ipfs.distributed.press/ipns/hypha.coop{{ page.url }}" class="accent link underline-hover"
+        data-proofer-ignore>ipns://hypha.coop</a>
     </p>
-    <p class="f6 f5-l lh-copy">This website content is licensed under a <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" class="accent link underline-hover" rel="noopener">Creative Commons Attribution-ShareAlike 4.0 International</a> license.</p>
+    <p class="f6 f5-l lh-copy">This website content is licensed under a <a
+        href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" class="accent link underline-hover"
+        rel="noopener">Creative Commons Attribution-ShareAlike 4.0 International</a> license.</p>
   </div>
   <div class="w-100 w-50-l">
     <h3 class="f4 normal"><span class="accent">⚑</span> Hypha is rooted in Tkaronto (Toronto), Canada.</h3>
-    
+
     <h4 class="f5 measure normal lh-copy gray">
-      Hypha acknowledges the sacred land we work on is the territory of many nations and was the subject of the Dish with One Spoon Wampum Belt Covenant, an agreement to peaceably share and care for the resources around the Great Lakes. Today it is still home to many First Nations, Inuit, and Métis peoples from across Turtle Island.
+      Hypha acknowledges the sacred land we work on is the territory of many nations and was the subject of the Dish
+      with One Spoon Wampum Belt Covenant, an agreement to peaceably share and care for the resources around the Great
+      Lakes. Today it is still home to many First Nations, Inuit, and Métis peoples from across Turtle Island.
     </h4>
   </div>
-</div>
+</div>

_sass/tachyons-sass/scss/_heights.scss

@@ -42,6 +42,7 @@
 
 .h1 { height: $height-1; }
 .h2 { height: $height-2; }
+.h2-5 { height: $height-2-5; }
 .h3 { height: $height-3; }
 .h4 { height: $height-4; }
 .h5 { height: $height-5; }
@@ -73,6 +74,7 @@
 @media #{$breakpoint-not-small} {
   .h1-ns {  height: $height-1; }
   .h2-ns {  height: $height-2; }
+  .h2-5-ns { height: $height-2-5; }
   .h3-ns {  height: $height-3; }
   .h4-ns {  height: $height-4; }
   .h5-ns {  height: $height-5; }

_sass/tachyons-sass/scss/_variables.scss

@@ -33,11 +33,13 @@ $spacing-extra-extra-extra-large: 16rem !default;
 $spacing-copy-separator: 1.5em !default;
 $height-1: 1rem !default;
 $height-2: 2rem !default;
+$height-2-5: 2.5rem !default;
 $height-3: 4rem !default;
 $height-4: 8rem !default;
 $height-5: 16rem !default;
 $width-1: 1rem !default;
 $width-2: 2rem !default;
+$width-2-5: 2.5rem !default;
 $width-3: 4rem !default;
 $width-4: 8rem !default;
 $width-5: 16rem !default;

_sass/tachyons-sass/scss/_widths.scss

@@ -50,6 +50,7 @@
 
 .w1 {    width: $width-1; }
 .w2 {    width: $width-2; }
+.w2-5 {  width: $width-2-5; }
 .w3 {    width: $width-3; }
 .w4 {    width: $width-4; }
 .w5 {    width: $width-5; }
@@ -86,6 +87,7 @@
 @media #{$breakpoint-not-small} {
   .w1-ns {  width: $width-1; }
   .w2-ns {  width: $width-2; }
+  .w2-5-ns { width: $width-2-5; }
   .w3-ns {  width: $width-3; }
   .w4-ns {  width: $width-4; }
   .w5-ns {  width: $width-5; }