From 2b4fd70b85f953d46ecc32258eeb09af74446c47 Mon Sep 17 00:00:00 2001
From: Robbie Antenesse <dev@alamantus.com>
Date: Thu, 30 May 2019 14:59:38 -0600
Subject: [PATCH] Update footer styling

---
 index.html                       |  2 +-
 src/scss/_containers.scss        |  2 +-
 src/scss/_structure.scss         | 12 ++++++++++++
 src/scss/mobile/_containers.scss |  2 ++
 src/scss/mobile/_structure.scss  | 10 ++++++++++
 5 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 523ff29..ae086a9 100644
--- a/index.html
+++ b/index.html
@@ -136,7 +136,7 @@
     <a href="https://blog.lexicon.ga" target="_blank" class="small button">Blog</a>
     <a href="https://github.com/Alamantus/Lexiconga/issues" target="_blank" class="small button">Issues</a>
     <a href="https://github.com/Alamantus/Lexiconga/releases" target="_blank" class="small button">Updates</a>
-    |
+    <span class="separator">|</span>
     <a class="button" id="helpInfoButton">Help</a>
     <a class="button" id="termsInfoButton">Terms</a>
     <a class="button" id="privacyInfoButton">Privacy</a>
diff --git a/src/scss/_containers.scss b/src/scss/_containers.scss
index e2d5caa..339384c 100644
--- a/src/scss/_containers.scss
+++ b/src/scss/_containers.scss
@@ -14,7 +14,7 @@ main {
   width: 90%;
   max-width: 1000px;
   min-height: 400px;
-  margin: 0 auto;
+  margin: 0 auto $header-height;
 
   #sideColumn,
   #mainColumn {
diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss
index e08cf91..1027564 100644
--- a/src/scss/_structure.scss
+++ b/src/scss/_structure.scss
@@ -339,6 +339,7 @@ $nav-font-height: 16px;
   bottom: $general-padding;
   right: $general-padding;
   max-width: 300px;
+  z-index: 10;
 
   .message {
     position: relative;
@@ -391,10 +392,21 @@ $nav-font-height: 16px;
 }
 
 #bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  background-color: $light;
   text-align: center;
+  padding: $general-padding / 2;
 
   a {
     color: #000000;
     text-decoration: none;
   }
+
+  .separator {
+    display: inline;
+  }
 }
diff --git a/src/scss/mobile/_containers.scss b/src/scss/mobile/_containers.scss
index b9989d9..3f58e92 100644
--- a/src/scss/mobile/_containers.scss
+++ b/src/scss/mobile/_containers.scss
@@ -12,6 +12,8 @@ header {
 }
 
 main {
+  margin-bottom: $general-padding;
+  
   #sideColumn {
     display: block;
     width: 0;
diff --git a/src/scss/mobile/_structure.scss b/src/scss/mobile/_structure.scss
index 049e554..f0c971c 100644
--- a/src/scss/mobile/_structure.scss
+++ b/src/scss/mobile/_structure.scss
@@ -88,4 +88,14 @@
   }
 }
 
+#bottom {
+  position: relative;
+  bottom: unset;
+
+  .separator {
+    display: block;
+    visibility: hidden;
+  }
+}
+
 }