From e9f425cd5ec0233d2115dea1a672c44081b34e6d Mon Sep 17 00:00:00 2001
From: arne <hi@arnes.space>
Date: Fri, 25 Feb 2022 10:44:42 +0100
Subject: [PATCH] Add footer

---
 src/_includes/root.njk |  7 +++++-
 src/assets/style.scss  | 49 ++++++++++++++++++++++++++++++++++++------
 2 files changed, 49 insertions(+), 7 deletions(-)
diff --git a/src/_includes/root.njk b/src/_includes/root.njk
index f365c29..4cac572 100644
--- a/src/_includes/root.njk
+++ b/src/_includes/root.njk
@@ -9,7 +9,7 @@
   </head>
   <body>
     <main class="{{ page.url | pageClasses }}">
-      <header><a href="/" title="Back to the homepage">{{ content | header | safe }}</a></header>
+      <header><a href="{{ '/' | url }}" title="Back to the homepage">{{ content | header | safe }}</a></header>
       <aside>
         <h1>{{ page.title }}</h1>
         {% block sidebar %}
@@ -18,6 +18,11 @@
       <article>
         {{ content | safe }}
       </article>
+      <footer>
+        None of your personal data is transferred to third party servers while using these websites. Your IP address is <a href="https://manual.uberspace.de/web-logs/#privacy">anonymized, logged, and stored for 7 days</a>. This allows me to get an impression of the popularity of individual pages.
+
+        Contents are <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA</a> unless noted otherwise.
+      </footer>
     </main>
   </body>
 </html>
diff --git a/src/assets/style.scss b/src/assets/style.scss
index f99f864..2758ea4 100644
--- a/src/assets/style.scss
+++ b/src/assets/style.scss
@@ -26,6 +26,8 @@ body {
   font-family: monospace;
   font-size: 16px;
   line-height: 1.5;
+  display: flex;
+  min-height: 100vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -84,14 +86,14 @@ main {
   max-width: 960px;
   margin: 48px;
   grid-gap: 32px;
-  // grid-auto-rows: 1fr;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-rows: auto minmax(0, 1fr) auto; // grow the content area, shrink the other ones
   grid-template-areas:
     "header header header header"
-    "aside content content content";
+    "aside content content content"
+    "footer footer footer footer";
   grid-auto-flow: dense;
 
-
   p {
     text-align: justify
   }
@@ -115,11 +117,12 @@ main {
   main {
     max-width: unset;
     margin: 32px;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-template-columns: minmax(0, 1fr);
     grid-template-areas:
       "header"
       "aside"
-      "content";
+      "content"
+      "footer";
   }
 }
 
@@ -168,18 +171,52 @@ article {
   }
 }
 
+footer {
+  grid-area: footer;
+  color: #aaa;
+  padding-top: 48px;
+  border-top: 1px dotted #aaa;
+
+  a {
+    color: #888;
+    background: #88888822;
+    box-shadow: .3em 0 0 #88888822,
+                -.3em 0 0 #88888822;
+
+    &:hover {
+      background: #88888844;
+      box-shadow: .3em 0 0 #88888844,
+                  -.3em 0 0 #88888844;
+    }
+  }
+}
+
 // special page styling
 
 .home {
   grid-template-areas:
     "header header header header"
-    "aside aside aside aside";
+    "aside aside aside aside"
+    "footer footer footer footer";
 
   aside {
+    nav {
+      padding-bottom: 16px;
+    }
+
+    a {
+      // let post titles break
+      display: inline;
+    }
+
     ul {
       list-style: inside;
       padding: 0 0 0 16px;
       margin: 0 0 32px;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
     }
   }
 
