Fixed footer

Footer will now stick to the bottom of the page if the content doesn't fill the view height.

Author: weerox

_data/colors.yml

@@ -3,7 +3,7 @@
 fails: "#ffcccc"
 works: "#ccffcc"
 hint-background-color: "#ffffcc"
-default-background-color: white"
+default-background-color: "white"
 regular-expression-text-backgound-color: "#eeeeee"
 regular-expression-text-border-color: "#bbbbbb"
 progress-color: "#bbbbbb"

_layouts/step.html

@@ -95,7 +95,7 @@ <h2>{{ page.title | escape }}</h2>
         {% elsif language == "en" %}
           <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Regex Tutorial</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Nicco Kunzmann</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
         {% elsif language == "sv" %}
-          <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Regex Tutorial</span> av <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Nicco Kunzmann</span> är licensed under en <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Erkännande 4.0 Internationell Licens</a>.
+          <span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Regex Tutorial</span> av <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Nicco Kunzmann</span> är licenserad under en <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Erkännande 4.0 Internationell Licens</a>.
         {% endif %}
         {% assign lowercase_content = content | downcase %}
         {% if lowercase_content contains "<img" %}

css/tutorial.css

@@ -21,7 +21,7 @@
   border-style: solid;
 }
 
-.key {  
+.key {
   background-color: {{ site.data.colors.regular-expression-text-backgound-color }};
   display: inline-block;
   padding: 3px 5px;
@@ -58,13 +58,17 @@ header h2 {
 }
 
 body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
   margin: 0px;
   background-color: {{ site.data.colors.default-background-color }};
 }
 
 .main {
   padding-right: 1em;
   padding-left: 1em;
+  flex: 1;
 }
 @media (min-width: 40em) {
   .main {
@@ -83,10 +87,10 @@ footer img {
   vertical-align: middle;
 }
 
-footer .links { 
+footer .links {
   padding-bottom: 0.5em;
 }
-footer .links a { 
+footer .links a {
   margin-left: 1em;
   margin-right: 1em;
   white-space: nowrap;
@@ -113,4 +117,4 @@ footer a {
 
 img {
   max-width: 100%;
-}
+}