[themes/doublefourteen] Add contact buttons to page footer.

themes/doublefourteen/assets/sass/style.sass

@@ -29,6 +29,13 @@
   .up-to-small-screen
     display: none !important
 
+@media (prefers-color-scheme:dark)
+  .on-light-theme
+    display: none !important
+@media (prefers-color-scheme:light)
+  .on-dark-theme
+    display: none !important
+
 *
   box-sizing: border-box
   z-index: $foreground
@@ -148,9 +155,17 @@ thead th
     repeat: no-repeat
     size: 400px 386px
 
+.get-in-touch
+    display: flex
+    flex-direction: row
+    flex-wrap: wrap
+    justify-content: right
+    gap: 1.5em
+    margin: 2em 3em 2em 2em
+
 .button, .button:hover
   background-color: transparent
-  border: 2px solid #737475
+  border: 2px solid #ced4da
   color: #333
   padding: 7px 12px
   display: block
@@ -161,10 +176,16 @@ thead th
 .button a
   display: inline
   text-decoration: none !important
-  color: #666
+  color: #333
 .button:hover
-  background-color: #7f7f7f
+  background-color: #fefefe
 
+.twitter-button, .email-button
+  padding 0px
+  > img
+    min-width: 16px
+    min-height: 16px
+    margin-bottom: 0px
 
 .footer
   text-align: center

themes/doublefourteen/layouts/partials/footer.html

@@ -1,4 +1,7 @@
-<footer class="container footer">
+<footer>
+  {{- partial "getintouch.html" . -}}
+
+  <div class="container footer">
     <small>
       &copy;
       <time datetime="{{ now.UTC.Format "2006-01-02T15:04:05Z07:00" | safeHTML }}">
@@ -9,4 +12,5 @@
           CC BY-SA</a>.
       </em>
     </small>
+  </div>
 </footer>

themes/doublefourteen/layouts/partials/getintouch.html

@@ -0,0 +1,80 @@
+<div class="container get-in-touch">
+  <!-- twitter -->
+  <a class="button twitter-button"
+     title="Follow us on Twitter @1414codeforge"
+     href="https://twitter.com/1414codeforge">
+     <img class="on-light-theme"
+          src="{{ "/twitter-logo-blue-64.png" | relURL }}"
+          srcset="{{ "/twitter-logo-blue-128.png" | relURL }} 128w,
+                  {{ "/twitter-logo-blue-120.png" | relURL }} 120w,
+                  {{ "/twitter-logo-blue-114.png" | relURL }} 114w,
+                  {{ "/twitter-logo-blue-110.png" | relURL }} 110w,
+                  {{ "/twitter-logo-blue-72.png" | relURL }} 72w,
+                  {{ "/twitter-logo-blue-64.png" | relURL }} 64w,
+                  {{ "/twitter-logo-blue-57.png" | relURL }} 57w,
+                  {{ "/twitter-logo-blue-48.png" | relURL }} 48w,
+                  {{ "/twitter-logo-blue-32.png" | relURL }} 32w,
+                  {{ "/twitter-logo-blue-16.png" | relURL }} 16w"
+            sizes="(min-width: 2000px) 128px,
+                   (max-width: 2000px) and (min-width: 640px) 3vw,
+                   10vw"
+            max-width="128px"
+            alt="Follow us on Twitter @1414codeforge">
+     <img class="on-dark-theme"
+       src="{{ "/twitter-logo-white-64.png" | relURL }}"
+       srcset="{{ "/twitter-logo-white-128.png" | relURL }} 128w,
+               {{ "/twitter-logo-white-120.png" | relURL }} 120w,
+               {{ "/twitter-logo-white-114.png" | relURL }} 114w,
+               {{ "/twitter-logo-white-110.png" | relURL }} 110w,
+               {{ "/twitter-logo-white-72.png" | relURL }} 72w,
+               {{ "/twitter-logo-white-64.png" | relURL }} 64w,
+               {{ "/twitter-logo-white-57.png" | relURL }} 57w,
+               {{ "/twitter-logo-white-48.png" | relURL }} 48w,
+               {{ "/twitter-logo-white-32.png" | relURL }} 32w,
+               {{ "/twitter-logo-white-16.png" | relURL }} 16w"
+       sizes="(min-width: 2000px) 128px,
+              (max-width: 2000px) and (min-width: 640px) 3vw,
+              10vw"
+       max-width="128px"
+       alt="Follow us on Twitter @1414codeforge">
+  </a>
+  <!-- email -->
+  <a class="button email-button"
+     title="Drop an email to info@doublefourteen.io"
+     href="mailto:The DoubleFourteen Staff<info@doublefourteen.io>">
+    <img class="on-light-theme"
+      src="{{ "/mail-gray-64.png" | relURL }}"
+      srcset="{{ "/mail-gray-128.png" | relURL }} 128w,
+              {{ "/mail-gray-120.png" | relURL }} 120w,
+              {{ "/mail-gray-114.png" | relURL }} 114w,
+              {{ "/mail-gray-110.png" | relURL }} 110w,
+              {{ "/mail-gray-72.png" | relURL }} 72w,
+              {{ "/mail-gray-64.png" | relURL }} 64w,
+              {{ "/mail-gray-57.png" | relURL }} 57w,
+              {{ "/mail-gray-48.png" | relURL }} 48w,
+              {{ "/mail-gray-32.png" | relURL }} 32w,
+              {{ "/mail-gray-16.png" | relURL }} 16w"
+      sizes="(min-width: 2000px) 128px,
+             (max-width: 2000px) and (min-width: 640px) 3vw,
+             10vw"
+      max-width="128px"
+      alt="Drop an email to info@doublefourteen.io">
+    <img class="on-dark-theme"
+      src="{{ "/mail-white-64.png" | relURL }}"
+      srcset="{{ "/mail-white-128.png" | relURL }} 128w,
+              {{ "/mail-white-120.png" | relURL }} 120w,
+              {{ "/mail-white-114.png" | relURL }} 114w,
+              {{ "/mail-white-110.png" | relURL }} 110w,
+              {{ "/mail-white-72.png" | relURL }} 72w,
+              {{ "/mail-white-64.png" | relURL }} 64w,
+              {{ "/mail-white-57.png" | relURL }} 57w,
+              {{ "/mail-white-48.png" | relURL }} 48w,
+              {{ "/mail-white-32.png" | relURL }} 32w,
+              {{ "/mail-white-16.png" | relURL }} 16w"
+      sizes="(min-width: 2000px) 128px,
+             (max-width: 2000px) and (min-width: 640px) 3vw,
+             10vw"
+      max-width="128px"
+      alt="Drop an email to info@doublefourteen.io">
+  </a>
+</div>