feat: introduce global footer

_i18n/en.yml

@@ -46,6 +46,8 @@ global:
   accessibility:
     title: Accessibility
     summary: We understand accessibility in a broad sense and strive to do better. We try to host meetings that are wheelchair accessible, smoke free, short(er) and provide child care. We provide information on the meeting location, including a description of the entrance, lighting and sounds, and policy around companion and service dogs beforehand so that participants can best plan for their visit. If you have feedback or questions regarding the accessibility of our meetings or initiatives, please get in touch at <a rel="noopener noreferrer" target="_blank" href="mailto:[email protected]">[email protected]</a>.
+  footer: Proud to be part of the
+
 
 press:
   mentions: Press mentions

_i18n/nl.yml

@@ -44,6 +44,7 @@ global:
   accessibility:
     title: Toegangelijkheid
     summary: De techwerkerscoalitie vat toegankelijkheid ruim op en streeft er altijd naar om het beter te doen. Bijeenkomsten zijn zoveel mogelijk rolstoeltoegankelijke, rookvrij, kort(er) en er is kinderopvang aanwezig. Informatie over de locatie van de bijeenkomst, inclusief een omschrijving van de ingang, light en geluid, en beleid rondom steun- en geleidehonden, wordt vooraf verstrekt zodat deelnemers hun bezoek zo goed mogelijk kunnen plannen. Heb je ideeën, suggesties, of vragen rondom de toegankelijkheid van bijeenkomsten of initiatieven? Neem dan contact op met <a rel="noopener noreferrer" target="_blank" href="mailto:[email protected]">[email protected]</a>.
+  footer: Trots om deel uit te maken van
 
 press:
   mentions: Pers

_includes/footer.html

@@ -0,0 +1,6 @@
+<footer class="footer">
+  <div class="footer-container">
+    <img alt="" role="presentation" aria-hidden="true" height="40" src="/assets/css/images/logo.svg" width="40" class="logo">
+    <div>{% t global.footer %} <a href="https://techworkerscoalition.org/">Tech Workers Coalition</a></div>
+  </div>
+</footer>

_includes/main.scss

@@ -10,6 +10,7 @@
 @import "structures/event";
 
 @import "header";
+@import "footer";
 
 @import "layouts/home";
 
@@ -105,6 +106,13 @@ input[type="submit"] {
   }
 }
 
+html, body { min-height: 100vh; }
+
+body > footer {
+  position: sticky;
+  top: 100vh;
+}
+
 blockquote,
 ol,
 p,

_layouts/default.html

@@ -8,6 +8,9 @@
     <main class="{{ page.templateClass }}">
       {{ content }}
     </main>
+
+    {% include footer.html %}
+
     <script type="text/javascript">{% include main.js %}</script>
   </body>
 </html>

_sass/_footer.scss

@@ -0,0 +1,51 @@
+@import 'variables';
+
+// https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html 
+//
+// grayscale      ex: filter: grayscale(100%);
+// sepia          ex: filter: sepia(100%);
+// saturate       ex: filter: saturate(0%);
+// hue-rotate     ex: filter: hue-rotate(45deg);
+// invert         ex: filter: invert(100%);
+// brightness     ex: filter: brightness(15%);
+// contrast       ex: filter: contrast(200%);
+// blur           ex: filter: blur(2px);
+
+@mixin filter($filter-type,$filter-amount) { 
+  -webkit-filter: $filter-type+unquote('(#{$filter-amount})');
+  -moz-filter: $filter-type+unquote('(#{$filter-amount})');
+  -ms-filter: $filter-type+unquote('(#{$filter-amount})');
+  -o-filter: $filter-type+unquote('(#{$filter-amount})');
+  filter: $filter-type+unquote('(#{$filter-amount})');
+}
+
+.footer {
+  border-top: 1px solid;
+  padding: 2em 2em;
+  background: $black;
+  color: $white;
+  text-align: left;
+
+  @include mobile {
+    padding: 4vmin;
+  }
+
+  a {
+    color: $white;
+
+    &:hover {
+      color: $red;
+    }
+  }
+
+  &-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+
+  .logo {
+    @include filter(invert, 1);
+    margin-right: 10px;
+  }
+}