Add a footer (#525)

Co-authored-by: Kresten Laust <[email protected]>

Author: atjn

stregsystem/static/stregsystem/stregsystem.css

@@ -1,6 +1,10 @@
 body {
-       color: black;
-       background-color: white;
+  color: black;
+  background-color: white;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 }
 
 header {
@@ -10,6 +14,7 @@ header {
   column-gap: 4vw;
   text-align: center;
   place-items: center;
+  border-bottom: solid grey 1.5px;
 
   & .left {
     justify-self: start;
@@ -19,6 +24,10 @@ header {
   }
 }
 
+#base-content {
+  flex: 1;
+}
+
 main {
   padding: 1em;
 
@@ -140,6 +149,21 @@ table h2, table h3 {
     image-rendering: pixelated;
 }
 
+footer {
+  text-align: center;
+  border-top: solid grey 1.5px;
+
+  #footer-notes {
+    & li {
+      display: inline;
+    
+    & ~ li::before {
+        content: '• ';
+      }
+    }
+  }
+}
+
 @keyframes blink-frame {
   0%, 100% {
     opacity: 1;

stregsystem/templates/stregsystem/base.html

@@ -40,19 +40,23 @@ <h1>
     <input type="button" onclick="location.href='/signup'" value="Tilmeld" tabindex="12"/>
   </div>
 </header>
-<hr>
-
+<div id="base-content">
 {% block content %}{% endblock %}
-
-<hr>
-
-<div id="news">
-{% block news %}
-{% if news %}
-<marquee><b>{{news.text}}</b></marquee>
-{% endif %}
-{% endblock %}
 </div>
+<footer>
+  <div id="news">
+  {% block news %}
+  {% if news %}
+  <marquee><b>{{news.text}}</b></marquee>
+  {% endif %}
+  {% endblock %}
+  </div>
+  <ul id="footer-notes">
+    <li>Skabt med ☕ og 🖤 af Fklubben</li>
+    <li><a target="_blank" href="https://fklub.dk/tos">Terms of Service</a></li>
+    <li><a target="_blank" href="https://github.com/f-klubben/stregsystemet">Se koden</a></li>
+  </ul>
+</footer>
 {% theme_content %}
 </body>
 </html>