Many small adjustments

- Adjust header width for scrollbar presence
- Added new header assets for grass and dirt
- Adjusted styles for hosted and tracker
- Expand header to implement templating system
- Much more I have forgotten

WebHostLib/templates/check.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="check-wrapper">
         <div id="check" class="grass-island">
             <h3>Upload Yaml</h3>

WebHostLib/templates/checkResult.html

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="check-result-wrapper">
         <div id="check-result" class="grass-island">
             {% for filename, resulttext in results.items() %}

WebHostLib/templates/cloudHeader.html

@@ -1,18 +0,0 @@
-{% block head %}
-    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/cloudHeader.css") }}" />
-{% endblock %}
-
-{% block header %}
-    <header id="cloud-header">
-        <a href="/" id="site-title">
-            <img src="/favicon.ico" alt="Favicon" />
-        </a>
-        <a href="/">multiworld randomizer</a>
-        <div id="cloud-header-spacer"></div>
-        <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="https://discord.gg/8Z65BR2">discord</a>
-    </header>
-{% endblock %}

WebHostLib/templates/generate.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="generate-game-wrapper">
         <div id="generate-game" class="grass-island">
             <h1>Start Game{% if race %} (Race Mode){% endif %}</h1>

WebHostLib/templates/header/baseHeader.html

@@ -0,0 +1,21 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/baseHeader.css") }}" />
+{% endblock %}
+
+{% block header %}
+    <header id="base-header">
+        <div id="base-header-left">
+            <a href="/" id="site-title">
+                <img src="/favicon.ico" alt="Favicon" />
+            </a>
+            <a href="/">multiworld randomizer</a>
+        </div>
+        <div id="base-header-right">
+            <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="https://discord.gg/8Z65BR2">discord</a>
+        </div>
+    </header>
+{% endblock %}

WebHostLib/templates/header/dirtHeader.html

@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/dirtHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}

WebHostLib/templates/header/grassHeader.html

@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/grassHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}

WebHostLib/templates/header/oceanHeader.html

@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/header/oceanHeader.css") }}" />
+{% endblock %}
+
+{% include 'header/baseHeader.html' %}

WebHostLib/templates/hostGame.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
 
     <div id="host-game-wrapper">
         <div id="host-game" class="grass-island {% if rooms %}wider{% endif %}">

WebHostLib/templates/hostRoom.html

@@ -6,7 +6,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <div id="host-room">
         {% if room.owner == session["_id"] %}
             Room created from <a href="{{ url_for("viewSeed", seed=room.seed.id) }}">Seed #{{ room.seed.id|suuid }}</a>

WebHostLib/templates/pageWrapper.html

@@ -19,7 +19,7 @@
     {% if messages %}
         <div>
             {% for message in messages %}
-                <div class="alert alert-danger" role="alert">{{ message }}</div>
+                <div class="user-message">{{ message }}</div>
             {% endfor %}
         </div>
     {% endif %}

WebHostLib/templates/playerSettings.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <div id="player-settings">
         <h1>Player Settings</h1>
         <div id="instructions">

WebHostLib/templates/tracker.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/dirtHeader.html' %}
     <div id="tracker-wrapper" data-tracker="{{ room.tracker|suuid }}">
         <div id="tracker-header-bar">
             <input placeholder="Search" id="search"/>
@@ -20,7 +20,7 @@
                     Multistream
                 </a>
             </span>
-            <span>This tracker will automatically update itself periodically.</span>
+            <span class="info">This tracker will automatically update itself periodically.</span>
         </div>
         <div id="tables-container">
             {% for team, players in inventory.items() %}

WebHostLib/templates/tutorial.html

@@ -1,7 +1,7 @@
 {% extends 'pageWrapper.html' %}
 
 {% block head %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/grassHeader.html' %}
     <title>Setup Tutorial</title>
     <link rel="stylesheet" type="text/css" href="{{ static_autoversion("styles/tutorial.css") }}" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"

WebHostLib/templates/viewSeed.html

@@ -8,7 +8,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include 'cloudHeader.html' %}
+    {% include 'header/oceanHeader.html' %}
     <div id="view-seed-wrapper">
         <div id="view-seed" class="grass-island">
             <h3>Seed Info</h3>

WebHostLib/templates/waitSeed.html

@@ -8,9 +8,11 @@
 {% endblock %}
 
 {% block body %}
-    <div id="wait-seed-wrapper">
+    {% include 'header/oceanHeader.html' %}
+    <div id="wait-seed-wrapper" class="grass-island">
         <div class="main-content">
             Waiting for game to generate, this page auto-refreshes to check.
         </div>
     </div>
+    {% include 'islandFooter.html' %}
 {% endblock %}