Swap out PNG files for SVG files, add proof-of-concept style for upload page.

WebHostLib/static/styles/cloudHeader.css

@@ -0,0 +1,34 @@
+#cloud-header{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    background: url('../static/backgrounds/header/cloud-header.svg') repeat-x;
+    background-size: auto 90px;
+    width: 100%;
+    height: 90px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    font-family: HyliaSerif, sans-serif;
+    padding: 10px;
+    line-height: 2rem;
+}
+
+#cloud-header #site-title img{
+    width: 40px;
+    height: 40px;
+}
+
+#cloud-header a{
+    color: #67bbab;
+    text-decoration: none;
+    cursor: pointer;
+    margin-right: 1.2rem;
+    font-size: 1.2rem;
+}
+
+@media (width: 800px) {
+    #cloud-header{
+        font-size: 4rem;
+    }
+}

WebHostLib/static/styles/globalStyles.css

@@ -0,0 +1,62 @@
+@font-face {
+    font-family: "HyliaSerif";
+    src: url('../static/fonts/HyliaSerifBeta-Regular.otf') format("opentype");
+}
+
+html{
+    background-image: url('../static/backgrounds/oceans/oceans-0002.svg');
+    background-repeat: repeat;
+    background-size: 250px 250px;
+    margin-top: 110px;
+}
+
+body{
+    margin: 0;
+    padding-bottom: 62px;
+}
+
+button{
+    padding: 0.25rem;
+    margin: 0.25rem;
+    border-radius: 4px;
+}
+
+h1, h2, h3{
+    font-family: HyliaSerif, sans-serif;
+    font-size: 3rem;
+    font-weight: normal;
+    margin: 0;
+}
+
+.grass-island{
+    background:
+        url('../static/backgrounds/cliffs/cliff-top-left-corner.svg') top left no-repeat,
+        url('../static/backgrounds/cliffs/cliff-top-right-corner.svg') top right no-repeat,
+        url('../static/backgrounds/cliffs/cliff-bottom-left-corner.svg') bottom left no-repeat,
+        url('../static/backgrounds/cliffs/cliff-bottom-right-corner.svg') bottom right no-repeat,
+        url('../static/backgrounds/cliffs/cliff-top.svg') top repeat-x,
+        url('../static/backgrounds/cliffs/cliff-bottom.svg') bottom repeat-x,
+        url('../static/backgrounds/cliffs/cliff-left.svg') left repeat-y,
+        url('../static/backgrounds/cliffs/cliff-right.svg') right repeat-y,
+        url('../static/backgrounds/grass/grass-0003.svg') repeat;
+
+    background-size:
+        200px 200px, /* top-left */
+        200px 200px, /* top-right */
+        200px 200px, /* bottom-left */
+        200px 200px, /* bottom-right */
+        auto 96px, /* top */
+        auto 114px, /* bottom */
+        84px auto, /* left */
+        84px auto, /* right */
+        150px 150px; /* center */
+
+    min-width: 240px;
+    min-height: 70px;
+
+    padding: 160px 80px 170px;
+}
+
+.dirt-island{
+
+}

WebHostLib/static/styles/grassFooter.css

@@ -0,0 +1,14 @@
+#island-footer{
+    background: url('../static/backgrounds/footer/footer-0003.svg') repeat-x bottom;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    width: 100%;
+    height: 62px;
+    margin-top: 2rem;
+    padding-left: 0.5rem;
+    line-height: 30px;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+}

WebHostLib/static/styles/uploads.css

@@ -5,6 +5,10 @@
     flex-wrap: wrap;
 }
 
+#uploads{
+    text-align: center;
+}
+
 #uploads-form-wrapper{
     width: 100%;
     text-align: center;

WebHostLib/templates/cloudHeader.html

@@ -0,0 +1,12 @@
+{% block header %}
+    <header id="cloud-header">
+        <a href="/" id="site-title">
+            <img src="/favicon.ico" alt="Favicon" />
+        </a>
+        <a href="/generate">Start Game</a>
+        <a href="/uploads">Host Game</a>
+        <a href="/tutorial">Setup Guide</a>
+        <a href="/player-settings">Player Settings</a>
+        <a href="/mysterycheck">YAML Tester</a>
+    </header>
+{% endblock %}

WebHostLib/templates/grassFooter.html

@@ -0,0 +1,5 @@
+{% block footer %}
+    <footer id="island-footer">
+        Copyright 2020 APPlaceHolder
+    </footer>
+{% endblock %}

WebHostLib/templates/pageWrapper.html

@@ -4,6 +4,9 @@
     <meta charset="UTF-8">
     <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") }}" />
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cloudHeader.css") }}" />
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/grassFooter.css") }}" />
     <script type="application/ecmascript" src="{{ static_autoversion("assets/cookieNotice.js") }}"></script>
     {% block head %}
         <title>Multiworld</title>

WebHostLib/templates/uploads.html

@@ -8,8 +8,10 @@
 {% endblock %}
 
 {% block body %}
+    {% include 'cloudHeader.html' %}
+
     <div id="uploads-wrapper">
-        <div id="uploads" class="main-content">
+        <div id="uploads" class="grass-island">
             <h3>Upload Multidata</h3>
             <p>To host a game, you need to upload a .multidata file or a .zip file created by the
                 multiworld generator.</p>
@@ -52,4 +54,6 @@
             {% endif %}
         </div>
     </div>
+
+    {% include 'grassFooter.html' %}
 {% endblock %}