Updates cliff side assets, modified styles, more to come

WebHostLib/static/styles/cloudHeader.css

@@ -15,21 +15,23 @@
     z-index: 9999;
 }
 
+#cloud-header #site-title{
+    margin-right: 7px;
+}
+
+#cloud-header #cloud-header-spacer{
+    flex-grow: 1
+}
+
 #cloud-header #site-title img{
     width: 40px;
     height: 40px;
 }
 
 #cloud-header a{
-    color: #67bbab;
+    color: #2f6b83;
     text-decoration: none;
     cursor: pointer;
     margin-right: 1.2rem;
     font-size: 1.2rem;
 }
-
-@media (width: 800px) {
-    #cloud-header{
-        font-size: 4rem;
-    }
-}

WebHostLib/static/styles/generate.css

@@ -6,10 +6,15 @@
 }
 
 #generate-game{
-    width: 660px;
+    width: 700px;
+    min-height: 360px;
     text-align: center;
 }
 
+#generate-game p{
+    text-align: left;
+}
+
 #generate-game-form-wrapper{
     width: 100%;
     text-align: center;

WebHostLib/static/styles/globalStyles.css

@@ -8,22 +8,37 @@ html{
     background-repeat: repeat;
     background-size: 250px 250px;
     margin-top: 110px;
+    font-family: 'Jost', sans-serif;
+    font-size: 1.1rem;
+    color: #000000;
 }
 
 body{
     margin: 0;
 }
 
+a{
+    color: #ffef00;
+}
+
 button{
-    padding: 0.25rem;
+    padding: 8px 12px;
-    margin: 0.25rem;
     border-radius: 4px;
 }
 
+button.button-grass{
+    border: 1px solid black;
+}
+
+button.button-dirt{
+    border: 1px solid black;
+}
+
 h1, h2, h3, h4, h5, h6{
     font-family: HyliaSerif, sans-serif;
     font-weight: normal;
     margin: 0;
+    color: #032605;
 }
 
 h1{ font-size: 3rem; }
@@ -48,26 +63,26 @@ h5, h6{
         url('../static/backgrounds/cliffs/grass/cliff-bottom.png') bottom repeat-x,
         url('../static/backgrounds/cliffs/grass/cliff-left.png') left repeat-y,
         url('../static/backgrounds/cliffs/grass/cliff-right.png') right repeat-y,
-        url('../static/backgrounds/grass/grass-0004.png') repeat;
+        url('../static/backgrounds/grass/grass-0007-large.png') repeat;
 
     background-size:
         140px 120px, /* top-left */
         140px 120px, /* top-right */
         140px 140px, /* bottom-left */
         140px 140px, /* bottom-right */
-        20px 120px, /* top */
+        20px 71px, /* top */
-        20px 140px, /* bottom */
+        20px 100px, /* bottom */
-        140px 20px, /* left */
+        71px 20px, /* left */
-        140px 20px, /* right */
+        71px 20px, /* right */
-        140px 140px; /* center */
+        525px 525px; /* center */
 
     min-width: 280px;
     min-height: 280px;
 
-    padding-left: 80px;
+    padding-left: 120px;
-    padding-right: 80px;
+    padding-right: 120px;
-    padding-top: 76px;
+    padding-top: 100px;
-    padding-bottom: 106px;
+    padding-bottom: 120px;
 }
 
 .dirt-island{

WebHostLib/static/styles/hostGame.css

@@ -6,7 +6,8 @@
 }
 
 #host-game{
-    width: 620px;
+    width: 700px;
+    min-height: 360px;
     text-align: center;
 }
 

WebHostLib/static/styles/islandFooter.css

@@ -1,14 +1,20 @@
 #island-footer{
-    background: url('../static/backgrounds/footer/footer-0003.png') repeat-x bottom;
+    background: url('../static/backgrounds/footer/footer-0001.png') repeat-x bottom;
     background-size: auto 90px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     width: calc(100% - 0.5rem);
-    height: 90px;
     padding-left: 0.5rem;
-    line-height: 30px;
+    padding-top: 50px;
     position: fixed;
     bottom: 0;
     left: 0;
+    color: #dfedc6
+}
+
+#island-footer #links a{
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    color: #dfedc6;
 }

WebHostLib/static/styles/landing.css

@@ -6,19 +6,38 @@
 }
 
 #landing{
-    width: 820px;
+    width: 860px;
-    min-height: 440px;
+    min-height: 320px;
 }
 
 #landing-header{
     text-align: center;
     width: 100%;
-    margin: 0;
+    margin-bottom: 50px;
+}
+
+#landing-header h1{
+    color: #ffffff;
+    font-size: 3.5rem;
+    text-shadow: 1px 1px 7px #000000;
+    -webkit-text-stroke: 1px #00582e;
+}
+
+#landing-header h4{
+    color: #ffffff;
+    font-size: 1.75rem;
+    margin-bottom: 0;
+    text-shadow: 1px 1px 7px #000000;
+    font-kerning: none;
+}
+
+#landing-header-links{
+    padding-bottom: 10px;
 }
 
 #landing-header-links a{
+    margin-bottom: 10px;
     margin-left: 1em;
-    margin-right: 1em;
 }
 
 #landing-buttons{
@@ -29,14 +48,3 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
 }
-
-iframe{
-    margin-left: 0.5rem;
-    border: none;
-}
-
-@media only screen and (max-width: 1300px) {
-    iframe{
-        display: none;
-    }
-}

WebHostLib/static/styles/player-settings.css

@@ -100,3 +100,7 @@ html{
     justify-content: space-between;
     width: 100%;
 }
+
+#player-settings a{
+    color: #ffffff;
+}

WebHostLib/templates/cloudHeader.html

@@ -3,9 +3,12 @@
         <a href="/" id="site-title">
             <img src="/favicon.ico" alt="Favicon" />
         </a>
-        <a href="/generate">Start Game</a>
+        <a href="/">multiworld randomizer</a>
-        <a href="/uploads">Host Game</a>
+        <div id="cloud-header-spacer"></div>
-        <a href="/tutorial">Setup Guide</a>
+        <a href="/generate">start game</a>
-        <a href="/player-settings">Player Settings</a>
+        <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>
     </header>
 {% endblock %}

WebHostLib/templates/generate.html

@@ -11,7 +11,7 @@
     {% include 'cloudHeader.html' %}
     <div id="generate-game-wrapper">
         <div id="generate-game" class="grass-island">
-            <h3>Generate Game{% if race %} (Race Mode){% endif %}</h3>
+            <h1>Generate Game{% if race %} (Race Mode){% endif %}</h1>
             <p>
                 This page accepts a yaml file containing generator options.
                 You can find a documented example at

WebHostLib/templates/islandFooter.html

@@ -1,6 +1,12 @@
 {% block footer %}
-    <div id="island-footer-spacer"></div>
     <footer id="island-footer">
-        Copyright 2020 APPlaceHolder
+        <div id="copyright-notice">© 2020 APPlaceHolder</div>
+        <div id="links">
+            <a href="https://github.com/Berserker66/MultiWorld-Utilities">Source Code</a>
+            -
+            <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>
+            -
+            <a href="https://github.com/Berserker66/MultiWorld-Utilities/graphs/contributors">Contributors</a>
+        </div>
     </footer>
 {% endblock %}

WebHostLib/templates/landing.html

@@ -8,38 +8,25 @@
 {% block body %}
     {% include 'cloudHeader.html' %}
     <div id="landing-wrapper">
-        <div id="landing" class="grass-island">
         <div id="landing-header">
-                <h4>The Legend of Zelda: A Link to the Past</h4>
+            <h4>the legend of zelda: a link to the past</h4>
-                <h1>MultiWorld Randomizer</h1>
+            <h1>MULTIWORLD RANDOMIZER</h1>
-                <p id="landing-header-links">
-                    <a href="https://github.com/Berserker66/MultiWorld-Utilities">Source Code</a>
-                    -
-                    <a href="https://github.com/Berserker66/MultiWorld-Utilities/wiki">Wiki</a>
-                    -
-                    <a href="https://github.com/Berserker66/MultiWorld-Utilities/graphs/contributors">Contributors</a>
-                </p>
         </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
                     Link to the Past.</p>
-                <p>This is also a multiworld, meaning your items may be placed into other players' worlds, and
+                <p>This is also a multiworld, meaning it is multiplayer. Your items may be placed into other
-                    other players's items may be placed into your world. When a player picks up an item which does
+                    players' worlds, and their items may be placed into yours. When a player picks up an item which
-                    not belong to them, it is sent back to the player it belongs to over the internet.</p>
+                    does not belong to them, it is sent back to the player it belongs to over the internet.</p>
-                <p>This website allows you to host a multiworld game, and provides item and location trackers for all
+                <p>This website allows you to generate and host a multiworld game, and provides item and location
-                    games hosted here.</p>
+                    trackers for all games hosted here. To learn how to get started playing,
-                <p>Currently, a locally installed client is required to play. This client should handle patching
+                    <a href="/tutorial">click here.</a></p>
-                    your ROM files and connecting to the multiworld server. More information on how to set up a local
+                <p>This website is under active development. If you find a bug, please report it
-                    client may be found on the
+                    <a href="https://github.com/Berserker66/MultiWorld-Utilities/issues">here.</a></p>
-                    <a href="{{ url_for("tutorial") }}">Setup Guide</a>.</p>
-                <p>This website is under active development. As such, your hosted rooms may occasionally disappear,
-                    and there may be bugs. If you do happen to find a bug, please report it
-                    <a href="https://github.com/Berserker66/MultiWorld-Utilities/issues">here</a>.</p>
                 <p>{{ seeds }} games were created and {{ rooms }} hosted in the last 7 days.</p>
             </div>
         </div>
-        <iframe src="https://discordapp.com/widget?id=731205301247803413&theme=light"
-                width="300" height="500" allowtransparency="true"></iframe>
     </div>
     {% include 'islandFooter.html' %}
 {% endblock %}

WebHostLib/templates/pageWrapper.html

@@ -2,6 +2,8 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Jost&display=swap" rel="stylesheet">
     <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") }}" />

WebHostLib/templates/playerSettings.html

@@ -15,6 +15,8 @@
             This page is used to configure your player settings. You have three presets you can control, which
             you can access using the dropdown menu below. These settings will be usable when generating a
             single player game, or you can export them to a <code>.yaml</code> file and use them in a multiworld.
+            If you already have a settings file you would like to validate, you may do so on the
+            <a href="/mysterycheck">verification page</a>.
         </div>
 
         <div id="settings-wrapper">