Update footer styling

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>

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 {

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;
+  }
 }

src/scss/mobile/_containers.scss

@@ -12,6 +12,8 @@ header {
 }
 
 main {
+  margin-bottom: $general-padding;
+  
   #sideColumn {
     display: block;
     width: 0;

src/scss/mobile/_structure.scss

@@ -88,4 +88,14 @@
   }
 }
 
+#bottom {
+  position: relative;
+  bottom: unset;
+
+  .separator {
+    display: block;
+    visibility: hidden;
+  }
+}
+
 }