Merge pull request #751 from alexwlchan/better-footer

Bring across the improved footer from the redesign
alexwlchan · Apr 5, 2024 · 32d9bc8 · 32d9bc8
2 parents 7a3afa8 + 56f7cc5
commit 32d9bc8
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 134 deletions.
diff --git a/src/_includes/footer.html b/src/_includes/footer.html
@@ -1,47 +1,66 @@
 <footer>
   <div id="footer_inner">
-    <div id="footer_text">
-      <p>
-        By Alex Chan.
-        If you like what I do, perhaps <a href="/say-thanks/">say&nbsp;thanks</a><span aria-hidden="true">?</span>
-      </p>
+    <p>
+      By Alex Chan.
+      If you like what I do, perhaps <a href="/contact/">say thanks</a>?
+      <br/>
+      Non-code content licensed under CC&nbsp;BY&nbsp;4.0; code under MIT.
+      <a href="/privacy/">Privacy&nbsp;policy</a>.
+    </p>
 
-      <p>
-        Except where otherwise noted, this site is dual-licensed as <a href="https://github.com/alexwlchan/alexwlchan.net#license" id="footer__licence">CC&nbsp;BY&nbsp;4.0 and MIT</a><span aria-hidden="true">.</span>
-        <a href="/privacy/">Privacy&nbsp;policy</a>.
-      </p>
-
-    </div>
-    <div id="footer_social">
+    <ul id="footer_social_links" class="plain_list">
       {% comment %}
         Be careful about tweaking the whitespace here; the included SVGs
         are quite sensitive to linebreaks and the like.
+
+        In particular, if you push the closing </a> down to a new line,
+        the underlines start appearing between icons.
       {% endcomment %}
-      <a class="footer_link" id="footer_link--email" href="mailto:[email protected]">
-        <span class="visually-hidden">email</span>
-        <span aria-hidden="true">{% include footer/email.svg %}</span></a>
-      <a class="footer_link" id="footer_link--rss" href="https://alexwlchan.net/atom.xml">
-        <span class="visually-hidden">RSS feed</span>
-        <span aria-hidden="true">{% include footer/rss.svg %}</span></a>
+      <li>
+        <a href="mailto:[email protected]">
+          <span class="visually-hidden">email</span>
+          <span aria-hidden="true">{%- include footer/email.svg -%}</span></a>
+      </li>
+
+      <li>
+        <a id="footer_link--rss" href="https://alexwlchan.net/atom.xml">
+          <span class="visually-hidden">RSS feed</span>
+          <span aria-hidden="true">{%- include footer/rss.svg -%}</span></a>
+      </li>
+
       {% comment %}
-      <a class="footer_link" id="footer_link--twitter" href="https://twitter.com/alexwlchan">
-        <span class="visually-hidden">Twitter</span>
-        <span aria-hidden="true">{% include footer/twitter.svg %}</span></a>
+      <li>
+        <a href="https://twitter.com/alexwlchan">
+          <span class="visually-hidden">Twitter</span>
+          <span aria-hidden="true">{% include footer/twitter.svg %}</span></a>
+      </li>
       {% endcomment %}
-      <a rel="me" class="footer_link" id="footer_link--mastodon" href="https://social.alexwlchan.net/@alex">
-        <span class="visually-hidden">Mastodon</span>
-        <span>{% include footer/mastodon.svg %}</span></a>
+
+      <li>
+        <a rel="me" href="https://social.alexwlchan.net/@alex">
+          <span class="visually-hidden">Mastodon</span>
+          <span>{% include footer/mastodon.svg %}</span></a>
+      </li>
+
       {% comment %}
-      <a class="footer_link" id="footer_link--github" href="https://github.com/alexwlchan/">
-        <span class="visually-hidden">GitHub</span>
-        <span aria-hidden="true">{% include footer/github.svg %}</span></a>
-      <a class="footer_link" id="footer_link--linkedin" href="https://www.linkedin.com/in/alexwlchan/">
-        <span class="visually-hidden">LinkedIn</span>
-        <span>{% include footer/linkedin.svg %}</span></a>
+      <li>
+        <a href="https://github.com/alexwlchan/">
+          <span class="visually-hidden">GitHub</span>
+          <span aria-hidden="true">{% include footer/github.svg %}</span></a>
+      </li>
+
+      <li>
+        <a href="https://www.linkedin.com/in/alexwlchan/">
+          <span class="visually-hidden">LinkedIn</span>
+          <span>{% include footer/linkedin.svg %}</span></a>
+      </li>
       {% endcomment %}
-      <a class="footer_link" id="footer_link--kofi" href="https://ko-fi.com/alexwlchan">
-        <span class="visually-hidden">Kofi</span>
-        <span>{% include footer/kofi.svg %}</span></a>
-    </div>
+
+      <li>
+        <a href="https://ko-fi.com/alexwlchan">
+          <span class="visually-hidden">Kofi</span>
+          <span>{% include footer/kofi.svg %}</span></a>
+      </li>
+    </ul>
   </div>
 </footer>
diff --git a/src/_scss/base/footer.scss b/src/_scss/base/footer.scss
diff --git a/src/_scss/base/layout.scss b/src/_scss/base/layout.scss
@@ -60,31 +60,6 @@ article, main {
   padding-bottom: 2em;
 }
 
-/* A dot_list is a <ul> that displays all the items in a horizontal line,
- * separated by dots, e.g.
- *
- *      apple · banana · cherry
- *
- * as opposed to the more traditional
- *
- *    · apple
- *    · banana
- *    · cherry
- *
- */
-.dot_list {
-  list-style-type: none;
-  padding-left: 0px !important;
-
-  // Ensure they all display in a line
-  li {
-    display: inline;
-    &:not(:first-child)::before {
-      content: " · ";
-    }
-  }
-}
-
 img.screenshot {
   border-color: var(--border-width) var(--border-style) var(--screenshot-border-color);
 }

diff --git a/src/_scss/components/footer.scss b/src/_scss/components/footer.scss
@@ -0,0 +1,107 @@
+footer {
+  padding-top:    15px;
+  padding-bottom: calc(15px + env(safe-area-inset-bottom));
+
+  font-size:   calc(var(--meta-scaling-factor) * var(--font-size));
+  line-height: calc(var(--meta-scaling-factor) * var(--line-height) * 1.6);
+
+  /* The footer gets the primary accent colour as background, with white text.
+   *
+   * It looks the same in light/dark mode.
+   */
+  background: var(--primary-color-light);
+  color: white;
+
+  a, a:visited {
+    @include link_styles(white, 0.5);
+  }
+
+  /* There are two lines of text in the footer, then a row of icons.
+   *
+   * On wide displays, I want the icons to float to the right.  On narrow
+   * displays, I want the icons below the text.  I also make the icons
+   * bigger, because it's probably a mobile display and I want nice big
+   * touch targets.
+   */
+  div {
+    display: grid;
+
+    @media screen and (min-width: 720px) {
+      grid-template-columns: auto auto;
+
+      p {
+        margin-top:    auto;
+        margin-bottom: auto;
+      }
+
+      svg {
+        width:  35px;
+        height: 35px;
+      }
+
+      /* Add a bit of horizontal spacing between the icons. */
+      ul#footer_social_links li:not(:last-child) {
+        margin-right: 5px;
+      }
+    }
+
+    @media screen and (max-width: 720px) {
+      p { margin-bottom: 0; }
+
+      svg {
+        width:  44px;
+        height: 44px;
+      }
+
+      /* Add a bit of horizontal spacing between the icons. */
+      ul#footer_social_links li:not(:first-child) {
+        margin-left: 5px;
+      }
+    }
+  }
+
+  /* Colour the icons correctly.
+   *
+   * Each icon contains two shapes:
+   *
+   *    - the `background` (the circle)
+   *    - the `accent` (the cutout for the icon)
+   *
+   * In the default state, the background is white and the accent is
+   * transparent, letting through the default footer colour.
+   *
+   * When you hover, we make the accent white and replace the background
+   * with the brand colours, as a visual cue that it's the site you expect.
+   */
+  ul#footer_social_links a {
+    .background { fill: white; }
+    .accent     { fill: none;  }
+
+    &:hover {
+      .accent { fill: white; }
+
+      /* Disable the default link hover styles */
+      background: none;
+    }
+
+    &[href="mailto:[email protected]"]:hover              .background { fill: #0067B9; }
+    &[href="https://alexwlchan.net/atom.xml"]:hover         .background { fill: #F99000; }
+    &[href="https://twitter.com/alexwlchan"]:hover          .background { fill: #1DA1F2; }
+    &[href="https://social.alexwlchan.net/@alex"]:hover     .background { fill: #563ACC; }
+    &[href="https://github.com/alexwlchan/"]:hover          .background { fill: #24292f; }
+    &[href="https://www.linkedin.com/in/alexwlchan/"]:hover .background { fill: #007EBB; }
+
+    &[href="https://ko-fi.com/alexwlchan"]:hover #kofi_heart     { fill: #f14255; };
+    &[href="https://ko-fi.com/alexwlchan"]:hover #kofi_circle    { fill: #50aee4; };
+  }
+
+  /* When you print the nav, remove the background and replace the white
+   * with the same black as the body text. */
+  @media print {
+    background: none;
+    border-top: var(--border-width) solid var(--primary-color-light);
+
+    color: var(--body-text-light);
+    a, a:visited { color: var(--body-text-light); }
+  }
+}
diff --git a/src/_scss/utility_classes.scss b/src/_scss/utility_classes.scss
@@ -0,0 +1,33 @@
+/* ===============
+ * Utility classes
+ * ===============
+ *
+ * This is a collection of styles that are used across the site, but aren't
+ * tied to a particular page or template.
+ */
+
+/* A plain_list is a <ul> that displays all the items in a horizontal line,
+ * not separated by anything, e.g.
+ *
+ *      apple banana cherry
+ *
+ * A dot_list is a <ul> that displays all the items in a horizontal line,
+ * separated by dots, e.g.
+ *
+ *      apple · banana · cherry
+ *
+ */
+ul.plain_list,
+ul.dot_list {
+  list-style-type: none;
+  padding: 0;
+}
+
+ul.plain_list li,
+ul.dot_list li {
+  display: inline-block;
+}
+
+ul.dot_list li:not(:first-child)::before {
+  content: " · ";
+}
diff --git a/src/_scss/variables.scss b/src/_scss/variables.scss
@@ -37,7 +37,8 @@ $accent-grey-light: #999;
 $accent-grey-dark:  #999;
 
 :root {
-  --body-text:   #202020;
+  --body-text:       #202020;
+  --body-text-light: #202020;
 
   --accent-grey:            #{$accent-grey-light};
   --accent-grey-link-hover: #{rgba($accent-grey-light, 0.2)};

diff --git a/src/static/style.scss b/src/static/style.scss
@@ -7,17 +7,19 @@
 @import "variables.scss";
 @import "mixins.scss";
 
+@import "utility_classes.scss";
+
 @import "_main.scss";
 
 @import "base/layout.scss";
 @import "base/text.scss";
 
 @import "base/code.scss";
-@import "base/footer.scss";
 @import "base/images_wide.scss";
 @import "base/latex.scss";
 @import "base/post_cards.scss";
 
+@import "components/footer.scss";
 @import "components/nav.scss";
 @import "components/pretty_hr.scss";
 @import "components/syntax_highlighting.scss";