Add ability to add a footer

The user can now add a footer by setting a parameter in the
configuration.

5 files changed, 65 insertions, 20 deletions

diff --git a/README.md b/README.md
index 559727c..6943de0 100644
--- a/README.md
+++ b/README.md
@@ -55,6 +55,7 @@ paginate = 4
   showTaxonomyLinks = false
   nBlogLatest = 4 # number of blog post om the home page
   blogLatestHeading = "My writing"
+  footer = "This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."
 
   [params.social]
     github = "example"
@@ -442,6 +443,19 @@ naturally set the dimensions of the `<div>`, using inline CSS. The
 parameters defaults to floating to the right, the width defaults to
 `12em`, and the height defaults to `auto`.
 
+# How to set a footer
+
+If you want to add a footer to your webpage, you can use the `footer`
+key in your configuration, e.g:
+
+```yaml
+params:
+  footer: "This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License."
+```
+
+This will add a HTML <footer> element with a <span> element with your
+text in it.
+
 # Other projects used in this theme
 
 The theme does not secretly download any resources from other websites
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6f991dd..5f8e2ec 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,5 +6,6 @@
         <div id="content">
         {{- block "main" . }}{{- end }}
         </div>
+        {{- partial "footer.html" . -}}
     </body>
 </html>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 308b1d0..ab79762 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,2 +1,3 @@
-</body>
-</html>
+<footer>
+    <span>{{ .Site.Params.Footer }}</span>
+</footer>
diff --git a/static/css/styles.css b/static/css/styles.css
index b4b6f82..439fb82 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,6 +1,12 @@
 @charset "UTF-8";
+html {
+  margin: 0;
+  height: 100vh;
+}
+
 body {
   margin: 0;
+  min-height: 100vh;
   overflow-y: scroll;
   font-size: 1.21em;
   line-height: 1.21;
@@ -636,26 +642,17 @@ cite {
 
 /* The Modal (background) */
 .modal {
-  display: none;
-  /* Hidden by default */
-  position: fixed;
-  /* Stay in place */
-  z-index: 1;
-  /* Sit on top */
-  padding-top: 5vh;
-  /* Location of the box */
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  padding-top: 5vh; /* Location of the box */
   left: 0;
   top: 0;
-  width: 100%;
-  /* Full width */
-  height: 100%;
-  /* Full height */
-  overflow: auto;
-  /* Enable scroll if needed */
-  background-color: rgb(0, 0, 0);
-  /* Fallback color */
-  background-color: rgba(0, 0, 0, 0.9);
-  /* Black w/ opacity */
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
 }
 
 /* Modal Content (image) */
@@ -765,4 +762,17 @@ cite {
   cursor: pointer;
 }
 
+footer {
+  position: fixed;
+  width: 100vw;
+  color: #444;
+  font-size: 0.8em;
+  padding-left: 1em;
+  padding-top: 0.2em;
+  padding-bottom: 0.1em;
+  bottom: 0;
+  left: 0;
+  background-color: #f7f7f7;
+}
+
 /*# sourceMappingURL=styles.css.map */
diff --git a/static/css/styles.scss b/static/css/styles.scss
index 97c7758..c04e2fd 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -45,8 +45,14 @@ $header-line-height: 1.25;
 
 // HUGO
 
+html {
+    margin: 0;
+    height: 100vh;
+}
+
 body {
     margin: 0;
+    min-height: 100vh;
     overflow-y: scroll;
     font-size: $base-font-size * 1.1;
     line-height: $base-line-height * 1.1;
@@ -802,3 +808,16 @@ cite {
     text-decoration: none;
     cursor: pointer;
 }
+
+footer {
+    position: fixed;
+    width: 100vw;
+    color: #444;
+    font-size: .8em;
+    padding-left: 1em;
+    padding-top: .2em;
+    padding-bottom: .1em;
+    bottom: 0;
+    left: 0;
+    background-color: #f7f7f7;
+}