Layout and template changes from 0.7.0 of the bandolier-website.

client/pages/Live.svelte

@@ -81,7 +81,6 @@
 <style>
 
   container {
-    padding-top: var(--fixed-header-height);
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -93,6 +92,7 @@
     overflow-y: auto;
     -ms-overflow-style: none;  /* IE and Edge */
     scrollbar-width: none;  /* Firefox */
+    aspect-ratio: 16/9;
   }
 
   /* This combined with the -ms-overflow-style and scrollbar-width is how you remove
@@ -166,14 +166,14 @@
           {:else if stream.poster }
             <SnapImage src={ stream.poster } />
           {:else}
-            <IconImage name="film" />
+            <IconImage height="unset" aspect_ratio="16/9" name="film" />
           {/if}
         {:else if stream.state === "finished"}
-          <IconImage name="video-off" />
+          <IconImage height="unset" aspect_ratio="16/9" name="video-off" />
         {:else if stream.state === "pending"}
-          <IconImage name="clock" />
+          <IconImage height="unset" aspect_ratio="16/9" name="clock" />
         {:else}
-          <IconImage name="video" />
+          <IconImage height="unset" aspect_ratio="16/9" name="video" />
         {/if}
 
         <info>

commands/templates/client/Header.svelte

@@ -9,40 +9,75 @@
   export let fixed = false;
 </script>
 
+<style>
+  #logo {
+    font-family: fancy;
+    font-size: 2em;
+  }
+
+  header {
+    background-color: var(--value0);
+  }
+
+  header a {
+    color: var(--value7);
+  }
+
+  nav {
+    background-color: var(--value0);
+    color: var(--value7);
+  }
+
+  nav * {
+    color: var(--value7);
+  }
+
+  @media only screen and (max-width: 600px) {
+    #logo {
+      font-size: 1.5em;
+    }
+  }
+
+  @media only screen and (max-width: 390px) {
+    #logo {
+      font-size: 1.4em;
+    }
+  }
+
+</style>
+
 <header class:fixed>
   <nav>
       {#if $user.authenticated}
-        <a href="/" use:link><Icon name="home" tooltip="Home." size="36" /></a>
+        <a href="/intro/" use:link id="logo">The Bandolier</a>
         <ul>
-          <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon name="log-out" tooltip="Log out."/></a></li>
+          <li><a href="/" on:click|preventDefault={ logout_user } data-testid="logout-link"><Icon color="var(--value7)" name="log-out" tooltip="Log out."/></a></li>
-          <li><a data-testid="user-profile-button" href="/profile/" use:link><Icon name="settings" tooltip="Settings."/></a></li>
+          <li><a data-testid="user-profile-button" href="/profile/" use:link><Icon color="var(--value7)" name="settings" tooltip="Settings."/></a></li>
-          <li><a href="/live/" use:link><Icon name="video" tooltip="Past/Present streams."/></a></li>
+          <li><a href="/feed.rss"><Icon color="var(--value7)" name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
-          <li><a href="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
           {#if $user.admin }
-            <li><a href="/admin/#/"><Icon name="keyboard" tooltip="Admin database."/></a></li>
+            <li><a href="/admin/#/"><Icon color="var(--value7)" name="keyboard" tooltip="Admin database."/></a></li>
           {/if}
-          <li><Darkmode /></li>
+          <li><Darkmode dark_icon_color="var(--value7)" light_icon_color="var(--value7)" /></li>
       </ul>
       {:else}
         <!-- don't use:link because we want them to go to the landing page if they aren't logged in. -->
-        <a href="/"><Icon name="home" size="36" /></a>
+        <a href="/intro/" use:link id="logo">The Bandolier</a>
         <ul>
           {#if register_enabled}
             <li><a id="register-button" href="/client/#/register/">
               <span class="mobile">
-                <Icon name="dollar-sign" tooltip="Register."/>
+                <Icon color="var(--value7)" name="dollar-sign" tooltip="Register."/>
               </span>
 
               <span class="mobile-hide">
-                <button type="button">Register</button>
+                <button type="button" class="inverted">Register</button>
               </span>
               </a>
             </li>
           {/if}
-          <li><a href="/login/" use:link><Icon name="log-in" tooltip="Log in." /></a></li>
+          <li><a href="/login/" use:link><Icon color="var(--value7)" name="log-in" tooltip="Log in." /></a></li>
-          <li><a href="/blog/"><Icon name="book" tooltip="Blog posts." /></a></li>
+          <li><a href="/client/#/"><Icon color="var(--value7)" name="book" tooltip="Docs" /></a></li>
-          <li><a href="/live/" use:link><Icon name="video" tooltip="Livestreams." /></a></li>
+            <li><Darkmode dark_icon_color="var(--value7)" light_icon_color="var(--value7)" /></li>
-          <li><Darkmode /></li>
         </ul>
       {/if}
   </nav>

commands/templates/rendered/Footer.svelte

@@ -39,7 +39,9 @@
   <a id="logo" style="color: var(--value9);" href="/blockstart/demos/">LJSTHW</a>
 
   <p>
-    The Bandoler Project, an educational web framework.
+    BIG CO, a
+    complete course in full stack web
+    development.
   </p>
 
   <span><a href="https://twitter.com/lzsthw">follow me @lzsthw</a></span>

commands/templates/rendered/pages/index.svelte

@@ -95,7 +95,7 @@
 
   components {
     display: grid;
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
 
   components component {