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 %}
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 %}