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