Slew of minor style adjustments

- Added padding to bottom of /setup-guide to accomodate iPhone users with curved screen bottoms
- Added screen orientation detection to /player-settings to force select inputs into a single column on mobile devices
- Added an X to the cookie notice to indicate it can be closed
- Changed "Generate Game" to "Start Game" so it matches the header

WebHostLib/static/assets/cookieNotice.js

@@ -5,6 +5,10 @@ window.addEventListener('load', () => {
     const cookieNotice = document.createElement('div');
     cookieNotice.innerText = "This website uses cookies to store information about the games you play.";
     cookieNotice.setAttribute('id', 'cookie-notice');
+    const closeButton = document.createElement('span');
+    closeButton.setAttribute('id', 'close-button');
+    closeButton.innerText = 'X';
+    cookieNotice.appendChild(closeButton);
     document.body.appendChild(cookieNotice);
     cookieNotice.addEventListener('click', () => {
         localStorage.setItem('cookieNotice', "1");

WebHostLib/static/styles/cookieNotice.css

@@ -9,3 +9,8 @@
     text-align: center;
     cursor: pointer;
 }
+
+#cookie-notice #close-button{
+    float: right;
+    padding-right: 10px;
+}

WebHostLib/static/styles/playerSettings.css

@@ -75,6 +75,7 @@ html{
     padding: 3px;
     border-radius: 3px;
     min-width: 150px;
+    background-color: #ffffff;
 }
 
 #player-settings #game-options, #player-settings #rom-options{
@@ -97,7 +98,7 @@ html{
     cursor: default;
 }
 
-@media all and (max-width: 1000px){
+@media all and (max-width: 1000px), all and (orientation: portrait){
     #player-settings #game-options, #player-settings #rom-options{
         justify-content: flex-start;
         flex-wrap: wrap;

WebHostLib/static/styles/tutorial.css

@@ -5,12 +5,13 @@ html{
 }
 
 #tutorial-wrapper{
-    width: 70rem;
+    display: flex;
+    flex-direction: column;
     margin-left: auto;
     margin-right: auto;
     background-color: rgba(0, 0, 0, 0.15);
     border-radius: 8px;
-    padding: 1rem;
+    padding: 1rem 1rem 3rem;
     color: #eeffeb;
 }
 

WebHostLib/static/styles/weightedSettings.css

@@ -148,5 +148,6 @@ html{
     padding: 3px;
     border-radius: 3px;
     min-width: 150px;
+    background-color: #ffffff;
 }
 

WebHostLib/templates/playerSettings.html

@@ -11,7 +11,7 @@
 {% block body %}
     {% include 'header/grassHeader.html' %}
     <div id="player-settings">
-        <h1>Generate Game</h1>
+        <h1>Start Game</h1>
         <p>Choose the options you would like to play with! You may generate a single-player game from this page,
             or download a settings file you can use to participate in a MultiWorld. If you would like to make
             your settings extra random, check out the <a href="/weighted-settings">weighted settings</a>