diff --git a/WebHostLib/static/assets/styleController.js b/WebHostLib/static/assets/styleController.js index 120d281d..ef00bda0 100644 --- a/WebHostLib/static/assets/styleController.js +++ b/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); }); diff --git a/WebHostLib/static/styles/cloudHeader.css b/WebHostLib/static/styles/cloudHeader.css index 98c2357a..8cc03a83 100644 --- a/WebHostLib/static/styles/cloudHeader.css +++ b/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; diff --git a/WebHostLib/static/styles/globalStyles.css b/WebHostLib/static/styles/globalStyles.css index 9d270b54..88c46f5e 100644 --- a/WebHostLib/static/styles/globalStyles.css +++ b/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; diff --git a/WebHostLib/static/styles/islandFooter.css b/WebHostLib/static/styles/islandFooter.css index 0bd088db..c7b69d5e 100644 --- a/WebHostLib/static/styles/islandFooter.css +++ b/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 } diff --git a/WebHostLib/static/styles/landing.css b/WebHostLib/static/styles/landing.css index 696377e4..94a578ba 100644 --- a/WebHostLib/static/styles/landing.css +++ b/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; +} + diff --git a/WebHostLib/templates/cloudHeader.html b/WebHostLib/templates/cloudHeader.html index 144e85a3..90e28144 100644 --- a/WebHostLib/templates/cloudHeader.html +++ b/WebHostLib/templates/cloudHeader.html @@ -1,3 +1,7 @@ +{% block head %} + +{% endblock %} + {% block header %}
@@ -9,6 +13,6 @@ host game setup guide player settings - discord + discord
{% endblock %} diff --git a/WebHostLib/templates/islandFooter.html b/WebHostLib/templates/islandFooter.html index 97745275..eb7a52af 100644 --- a/WebHostLib/templates/islandFooter.html +++ b/WebHostLib/templates/islandFooter.html @@ -10,3 +10,7 @@ {% endblock %} + +{% block head %} + +{% endblock %} diff --git a/WebHostLib/templates/landing.html b/WebHostLib/templates/landing.html index 047313e1..0312a73c 100644 --- a/WebHostLib/templates/landing.html +++ b/WebHostLib/templates/landing.html @@ -6,12 +6,14 @@ {% endblock %} {% block body %} - {% include 'cloudHeader.html' %}

the legend of zelda: a link to the past

MULTIWORLD RANDOMIZER

+
+ Buttons here, eventually! +

This is a randomizer for The Legend of Zelda: A diff --git a/WebHostLib/templates/pageWrapper.html b/WebHostLib/templates/pageWrapper.html index 1392b736..103ef069 100644 --- a/WebHostLib/templates/pageWrapper.html +++ b/WebHostLib/templates/pageWrapper.html @@ -7,8 +7,6 @@ - - {% block head %}