Fix header and footer positioning

WebHostLib/static/assets/styleController.js

@@ -1,3 +1,25 @@
+const adjustFooterHeight = () => {
+  // If there is no footer on this page, do nothing
+  const footer = document.getElementById('island-footer');
+  if (!footer) { return; }
+
+  // If the body is taller than the window, also do nothing
+  if (document.body.offsetHeight > window.innerHeight) {
+    footer.style.marginTop = '0';
+    return;
+  }
+
+  // Add a margin-top to the footer to position it at the bottom of the screen
+  const sibling = footer.previousElementSibling;
+  const margin = (window.innerHeight - sibling.offsetTop - sibling.offsetHeight - footer.offsetHeight);
+  if (margin < 1) {
+    footer.style.marginTop = '0';
+    return;
+  }
+  footer.style.marginTop = `${margin}px`;
+};
+
 window.addEventListener('load', () => {
-  // Animate the water by swapping out background images every few seconds, maybe?
+  adjustFooterHeight();
+  window.addEventListener('resize', adjustFooterHeight);
 });

WebHostLib/static/styles/cloudHeader.css

@@ -1,10 +1,14 @@
+html{
+    padding-top: 110px;
+}
+
 #cloud-header{
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
     background: url('../static/backgrounds/header/cloud-header.png') repeat-x;
     background-size: auto 90px;
-    width: 100%;
+    width: calc(100% - 20px);
     height: 90px;
     position: fixed;
     top: 0;

WebHostLib/static/styles/globalStyles.css

@@ -7,7 +7,6 @@ html{
     background-image: url('../static/backgrounds/oceans/oceans-0002.png');
     background-repeat: repeat;
     background-size: 250px 250px;
-    margin-top: 110px;
     font-family: 'Jost', sans-serif;
     font-size: 1.1rem;
     color: #000000;

WebHostLib/static/styles/islandFooter.css

@@ -7,9 +7,6 @@
     width: calc(100% - 0.5rem);
     padding-left: 0.5rem;
     padding-top: 50px;
-    position: fixed;
-    bottom: 0;
-    left: 0;
     color: #dfedc6
 }
 

WebHostLib/static/styles/landing.css

@@ -1,13 +1,9 @@
 #landing-wrapper{
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     flex-wrap: wrap;
-}
-
-#landing{
-    width: 860px;
-    min-height: 320px;
+    margin-top: 50px;
 }
 
 #landing-header{
@@ -31,20 +27,16 @@
     font-kerning: none;
 }
 
-#landing-header-links{
-    padding-bottom: 10px;
-}
-
-#landing-header-links a{
-    margin-bottom: 10px;
-    margin-left: 1em;
-}
-
 #landing-buttons{
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    flex-wrap: wrap;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+    margin-left: auto;
+    margin-right: auto;
+    height: 50px;
 }
+
+#landing{
+    width: 860px;
+    min-height: 320px;
+    margin-left: auto;
+    margin-right: auto;
+}
+

WebHostLib/templates/cloudHeader.html

@@ -1,3 +1,7 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cloudHeader.css") }}" />
+{% endblock %}
+
 {% block header %}
     <header id="cloud-header">
         <a href="/" id="site-title">
@@ -9,6 +13,6 @@
         <a href="/uploads">host game</a>
         <a href="/tutorial">setup guide</a>
         <a href="/player-settings">player settings</a>
-        <a href="https://discord.com/8Z65BR2">discord</a>
+        <a href="https://discord.gg/8Z65BR2">discord</a>
     </header>
 {% endblock %}

WebHostLib/templates/islandFooter.html

@@ -10,3 +10,7 @@
         </div>
     </footer>
 {% endblock %}
+
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/islandFooter.css") }}" />
+{% endblock %}

WebHostLib/templates/landing.html

@@ -6,12 +6,14 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
     <div id="landing-wrapper">
         <div id="landing-header">
             <h4>the legend of zelda: a link to the past</h4>
             <h1>MULTIWORLD RANDOMIZER</h1>
         </div>
+        <div id="landing-buttons">
+            Buttons here, eventually!
+        </div>
         <div id="landing" class="grass-island">
             <div id="landing-body">
                 <p>This is a <span data-tooltip="Allegedly.">randomizer</span> for The Legend of Zelda: A

WebHostLib/templates/pageWrapper.html

@@ -7,8 +7,6 @@
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/tooltip.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cookieNotice.css") }}" />
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/globalStyles.css") }}" />
-    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cloudHeader.css") }}" />
-    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/islandFooter.css") }}" />
     <script type="application/ecmascript" src="{{ static_autoversion("assets/styleController.js") }}"></script>
     <script type="application/ecmascript" src="{{ static_autoversion("assets/cookieNotice.js") }}"></script>
     {% block head %}