Fix the footer.

It was broken in previous commits. It should always stick to the bottom of the page, unless the page is long enough to not fit in the screen, so then it should just be thrown after the end of the content.

src/css/default.scss

@@ -388,14 +388,13 @@ HEADER
 CONTENT
 ************************************************************ */
 #layout {
-  position: relative;
   right: 0;
   padding-right: 0;
 }
 
 #content {
   padding-top: 2em;
-  padding-bottom: 4rem;
+  padding-bottom: 2rem;
 }
 
 .message-box {
@@ -451,15 +450,15 @@ FOOTER
 ************************************************************ */
 #layout {
   min-height: 100%;
-  height: 100%;
-  margin: 0 auto -6rem; /*negative margin = footer height + padding-top + padding-bottom*/
+  margin: 0 auto -6rem auto; /*negative margin = footer height + padding-top + padding-bottom*/
 }
 
 #bottom, #push {
-  height: 4rem;
+  height: 6rem;
 }
 
 #footer {
+  width: 100%;
   background: linear-gradient(141deg, $primaryBackground 0%, $transitionBackground 51%, $secondaryBackground 75%);
   height: 4rem;
   padding: 2rem 0 0;

src/js/bundle.js

@@ -21,6 +21,7 @@ $(document).ready(function () {
     $('#menuLink').click(function (e) {
         e.preventDefault();
         $('#layout').toggleClass('active');
+        $('#foot').toggleClass('active');
         $(this).toggleClass('active');
     });
 });
\ No newline at end of file

templates/base.twig

@@ -38,11 +38,11 @@
           </div>
         </div><!-- content -->
       <div id="push"></div>
-      <div id="foot">
-        {%- block footer %}{% include "_footer.twig" %}{% endblock %}
-
-      </div>
     </div><!-- layout -->
+    <div id="foot">
+      {%- block footer %}{% include "_footer.twig" %}{% endblock %}
+
+    </div>
     <script src="{{ asset('js/bundle.js') }}"></script>
     {%- block postload %}{% endblock %}