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;