Lots of dumb changes just to make the landing page not suck. Going with a western theme, kind of sepia tones.

client/Header.svelte

@@ -15,6 +15,23 @@
     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;
@@ -26,6 +43,7 @@
       font-size: 1.4em;
     }
   }
+
 </style>
 
 <header class:fixed>
@@ -33,13 +51,13 @@
       {#if $user.authenticated}
         <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="/feed.rss"><Icon name="rss" tooltip="RSS Feed." tip_position="bottom-left" /></a></li>
+          <li><a href="/feed.rss"><Icon color="var(--value7)" 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. -->
@@ -48,18 +66,18 @@
           {#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="/client/#/"><Icon name="book" tooltip="Docs" /></a></li>
+          <li><a href="/client/#/"><Icon color="var(--value7)" name="book" tooltip="Docs" /></a></li>
-          <li><Darkmode /></li>
+            <li><Darkmode dark_icon_color="var(--value7)" light_icon_color="var(--value7)" /></li>
         </ul>
       {/if}
   </nav>

client/components/Darkmode.svelte

@@ -5,6 +5,8 @@
   import {onMount} from 'svelte';
 
   export let theme = "light";
+  export let light_icon_color="var(--color)";
+  export let dark_icon_color="var(--color)"
 
   const set_theme = () => {
     document.documentElement.setAttribute('data-theme', theme);
@@ -28,10 +30,10 @@
 
 {#if theme == 'dark'}
   <span style="cursor: pointer;" on:click={ () => toggle() }>
-    <Icon name="sunrise" tip_position="bottom-left" tooltip="Light mode." size="32" />
+    <Icon name="sunrise" color={ dark_icon_color } tip_position="bottom-left" tooltip="Light mode." size="32" />
   </span>
 {:else}
   <span style="cursor: pointer;" on:click={ () => toggle() }>
-    <Icon name="sunset" size="32" tip_position="bottom-left" tooltip="Dark mode."/>
+    <Icon name="sunset" color={ light_icon_color } size="32" tip_position="bottom-left" tooltip="Dark mode."/>
   </span>
 {/if}

client/components/IconImage.svelte

@@ -9,14 +9,14 @@
   export let linejoin="round";
   export let name="";
   export let pattern="dots-sm";
-  export let height="200";
+  export let height="100%";
-  export let width="200";
+  export let width="100%";
   export let thickness="2";
   export let testid=`iconimage-default-${name}`;
   export let hue='orange';
   export let background_hue='blue';
   export let grayscale = 0;
-  export let aspect_ratio = "16/9";
+  export let aspect_ratio = "1/1";
 
   let random_background = rando({luminosity: 'light', hue: background_hue});
   let random_pattern = rando({luminosity: 'light', hue});

client/pages/Landing.svelte

@@ -1,7 +1,19 @@
 <script>
   import Layout from '../Layout.svelte';
   import IconImage from '$/client/components/IconImage.svelte';
-  import Blockstart from "$/client/components/Blockstart.svelte";
+
+  const features = [
+    {title: "Video", icon: "video", description: "This is some video.", url: "/client/#/bando/components/video/" },
+    {title: "WebTorrent", icon: "tornado", description: "This is some video.", url: "/client/#/bando/components/WTVideo/" },
+    {title: "HLS Streaming Video", icon: "cast", description: "This is some video.", url: "/client/#/bando/components/HLSVideo/" },
+    {title: "Payments", icon: "dollar-sign", description: "This is some video.", url: "/client/#/bando/components/" },
+    {title: "Authentication", icon: "log-in", description: "This is some video.", url: "/client/#/bando/components/LogIn/" },
+    {title: "JSON APIs", icon: "curly-braces", description: "This is some video.", url: "/client/#/docs/lib/api.js" },
+    {title: "Database ORMs", icon: "database", description: "This is some video.", url: "/client/#/bando/components/DataTable/" },
+    {title: "UI Components", icon: "layout", description: "This is some video.", url: "/client/#/bando/components/" },
+    {title: "Admin Dashboard", icon: "keyboard", description: "This is some video.", url: "/admin/#/" },
+    {title: "Email", icon: "mail", description: "This is some video.", url: "/client/#/" },
+  ]
 </script>
 
 <style>
@@ -22,76 +34,195 @@
     color: var(--color);
     font-size: 0.5em;
   }
+
+  #photo {
+    --w: 400px;
+    --h: 600px;
+    --value: 4;
+  }
+
+  modal {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 100;
+    padding: 2rem;
+    display: none;
+  }
+
+
+  @media only screen and (max-width: 550px) {
+    modal {
+      display: flex;
+      justify-content: center;
+      align-items: start;
+    }
+  }
+
+  hero {
+    --h: 600px;
+    --w: 100vw;
+    --fsize: 1.2em;
+    display: flex;
+    flex-direction: column;
+    background-image: url("/images/hero-bg.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-width: var(--w);
+    height: var(--h);
+    padding-left: 20vw;
+    padding-right: 20vw;
+    font-size: var(--fsize);
+    text-align: center;
+    color: var(--value8);
+  }
+
+  hero a {
+    color: var(--value6);
+  }
+
+  text-photo {
+    --w: 100vw;
+    --h: 600px;
+    --pad: 0px;
+    --fsize: 1.2em;
+    display: flex;
+    flex-direction: row;
+    min-width: var(--w);
+    min-height: var(--h);
+    padding: var(--pad);
+    font-size: var(--fsize);
+  }
+
+  text-photo > div {
+    --pad: 5vw;
+    flex: 1 1 auto;
+    justify-self: center;
+    align-self: center;
+    padding: var(--pad);
+  }
+
+  text-photo > div h1 {
+    text-align: center;
+  }
+
+  text-photo > photo {
+    --w: 400px;
+    display: flex;
+    justify-content: stretch;
+    min-width: var(--w);
+  }
+
+  .solid {
+    background-color: var(--value1);
+    color: var(--value9);
+  }
+
+  text-center {
+    --fsize: 1.2em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    font-size: var(--fsize);
+    padding-left: 10vw;
+    padding-right: 10vw;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  feature-grid {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  tile > left {
+    width: 100px;
+    height: 100px;
+  }
 </style>
 
 <Layout bare={ true } fullwidth={true}>
-  <Blockstart>
+  <hero>
-    <block class="center" style="--value: 7; --w: 100%; --h: 600px; margin-bottom: var(--bottom-margin);">
     <h1 class="center-text">The Bandolier</h1>
     <h2 class="center-text">An educational fullstack web development framework.</h2>
-      <p class="center" style="--w: 800px">A belt full of web development ammunition. A full featured web framework designed to be studied. The Bandolier contains simple implementations of almost every feature found in other frameworks, but in small easily studied forms.</p>
+    <p class="center" style="--w: min(100%, 800px)">A belt full of web development ammunition. A full featured web framework designed to be studied. The Bandolier contains simple implementations of almost every feature found in other frameworks, but in small easily studied forms.</p>
 
     <h2 class="center-text" style="font-size: 1.2em;">A project of <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a></h2>
-    </block>
+  </hero>
+
+  <text-center style="background-color: var(--value6)">
+    <h2 class="center-self">Current Status</h2>
+    <p class="no-flex center-self" style="--w: 50%">The Bandolier is currently ready for testing and
+      about 50% of the documnetation is written.  You can currently access all of the documentation, and
+      soon there will be a way to play with the administrator console.
+    </p>
+  </text-center>
+
+  <text-photo>
+    <div>
+      <h1>Production Capable</h1>
+      <p>The Bandolier isn't "student grade". It's based on code used to power <a href="https://learnjsthehardway.com">learnjsthehardway.com</a> supporting thousands of users all watching thousands of hours of <b>video</b>.  <b>Yet, it's still easy to study and use.</b>  The Bandolier demonstrates that you don't have to be complicated to be useful.</p>
+    </div>
+
+    <photo class="mobile-hide">
+      <IconImage name="server-cog" height="100%" width="100%" background="var(--value5)" />
+    </photo>
+  </text-photo>
+
+
+  <text-photo class="solid">
+    <photo class="mobile-hide">
+      <IconImage name="banana" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
+    </photo>
+
+    <div>
+      <h1>Low Friction Progress</h1>
+      <p>The code isn't hidden away in a convoluted tree of directories and <code>node_modules</code>.  It's readily available for you to view, study, change, or even replace as you need.  No only that but The Bandolier <b>advocates</b> copying, modifying, and replacing code as you learn. All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a <a href="https://go.dev/">Go</a> backend?  Go for it. </p>
+    </div>
+  </text-photo>
+
+  <text-center>
+    <h2 class="center-self">Full Featured</h2>
+    <p class="no-flex center-self" style="--w: 50%">The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement.  Authentication, standard <a href="https://www.npmjs.com/package/bcryptjs">bcrypt</a> password storage, <a href="/client/#/bando/components/HLSVideo/">HLS Video Streaming</a>, and <a href="/client/#/icons/">icons</a> are just a few of the <a href="/client/#/bando/components/">convenient features</a>.  And, if you don't like how The Bandolier does it, then <b>replace it</b>.</p>
 
-    <block class="center horizontal" style="--w: 100%; --pad: 0px;">
+    <feature-grid>
-      <left class="fill center" style="--pad: 20px;">
+      {#each features as feature}
-        <h1>Production Ready</h1>
+      <tile>
-        <p>The Bandolier is based on code used to power <a href="https://learnjsthehardway.com">learnjsthehardway.com</a> supporting thousands of users all watching video.  <b>Yet, it's still easy to study and use.</b> All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a <a href="https://go.dev/">Go</a> backend?  Go for it.</p>
+        <left>
+          <IconImage name={ feature.icon } background="var(--value4)" />
         </left>
-
+        <middle>
-      <shape style="--value 4; --w: 400px; --h: 600px">
+          <h4><a href={ feature.url }>{ feature.title }</a></h4>
-        <h4>Photo</h4>
+          <p>{ feature.description }</p>
-      </shape>
+        </middle>
-    </block>
+      </tile>
-
+      {/each}
-    <block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
+    </feature-grid>
-      <shape style="--value 4; --w: 400px; --h: 600px">
+  </text-center>
-        <h4>Photo</h4>
+
-      </shape>
+  <text-center>
-
-      <right class="fill center" style="--pad: 20px;">
-        <h1>Low Friction Code</h1>
-        <p>The code isn't hidden away in a convoluted tree of directories and <code>node_modules</code>.  It's readily available for you to view, study, change, or even replace as you need.  No only that but The Bandolier <b>advocates</b> copying, modifying, and replacing code as you learn.</p>
-      </right>
-    </block>
-
-    <block class="center" style="--h: min-content">
-      <h2 class="center-self">Full Featured</h2>
-      <p class="no-flex center-self" style="--w: 50%">The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement.  Authentication, standard <a href="https://www.npmjs.com/package/bcryptjs">bcrypt</a> password storage, <a href="/client/#/bando/components/HLSVideo/">HLS Video Streaming</a>, and <a href="/client/#/icons/">icons</a> are just a few of the convenient features.  If you don't like how The Bandolier does it, then <b>replace it</b>.</p>
-    </block>
-
-    <grid class="center-self" style="--cols: 3;">
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Video</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">WebTorrent</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">HLS Streams</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Payments</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Auth</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">JSON APIs</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Databases</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">UI Components</a></shape>
-      <shape style="--w: 200px; --h: 200px; --value: 3; --text: 9;"><a href="#">Admin Panels</a></shape>
-    </grid>
-
-    <hr>
-
-    <block class="center" style="--h: min-content">
       <h1 class="center-self">Progressive Development</h1>
       <p class="center-self no-flex" style="--w: 50%">Other frameworks make you create 4, 5, or sometimes 10 different files just to get a "Hello World" going.  The Bandolier requires 1 new file to start, and editing 1 other file. <b>There's even a template generator to start all of your files in each step.</b> Each new step in the development process requires only 1 or 2 new files, and everything keeps working as you work.</p>
-    </block>
+  </text-center>
 
-    <block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
+  <text-photo class="solid">
-      <left class="fill center" style="--pad: 20px;">
+    <div>
         <h1>Learn a Personal Process</h1>
         <p>If you're just starting out it's hard to know what to do next.  The Bandolier supports a <b>personal development process</b> that takes you from an initial UI to a working application in logical steps. The process is the result of watching thousands of beginners struggle with getting started, and has worked to help them start and finish their projects.</p>
-      </left>
+    </div>
 
-      <shape style="--value 4; --w: 400px; --h: 600px">
+    <photo class="mobile-hide">
-        <h4>Photo</h4>
+      <IconImage name="terminal-square" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
-      </shape>
+    </photo>
-    </block>
+  </text-photo>
 
-    <block class="center">
+  <text-center>
     <h1 class="center-text no-flex">The Fastest Quick Start in the West<sup>*</sup></h1>
     <pre>
 <code>
@@ -109,7 +240,13 @@ npm run DANGER_ADMIN
     <div class="no-flex" style="font-size: 0.8em;">* Fast is defined as relative to the speed of <code>node_modules</code> LOL.</div>
 
     <h2><a class="center-text" href="/client/#/quick/">Read the Full Quick Start Guide</a></h2>
-    </block>
+  </text-center>
+
+    <modal>
+      <callout class="warning"><span>
+        <h1>Get Off Ya Phone</h1>
 
-  </Blockstart>
+        <p>This app is a work in progress so warping it to your phone isn't done yet.  You can just go straight to <a href="/client/#/">the docs</a> and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.</p>
+      </span></callout>
+    </modal>
 </Layout>

rendered/pages/index.svelte

@@ -1,7 +1,19 @@
 <script>
   import Layout from '../Layout.svelte';
   import IconImage from '$/client/components/IconImage.svelte';
-  import Blockstart from "$/client/components/Blockstart.svelte";
+
+  const features = [
+    {title: "Video", icon: "video", description: "This is some video.", url: "/client/#/bando/components/video/" },
+    {title: "WebTorrent", icon: "tornado", description: "This is some video.", url: "/client/#/bando/components/WTVideo/" },
+    {title: "HLS Streaming Video", icon: "cast", description: "This is some video.", url: "/client/#/bando/components/HLSVideo/" },
+    {title: "Payments", icon: "dollar-sign", description: "This is some video.", url: "/client/#/bando/components/" },
+    {title: "Authentication", icon: "log-in", description: "This is some video.", url: "/client/#/bando/components/LogIn/" },
+    {title: "JSON APIs", icon: "curly-braces", description: "This is some video.", url: "/client/#/docs/lib/api.js" },
+    {title: "Database ORMs", icon: "database", description: "This is some video.", url: "/client/#/bando/components/DataTable/" },
+    {title: "UI Components", icon: "layout", description: "This is some video.", url: "/client/#/bando/components/" },
+    {title: "Admin Dashboard", icon: "keyboard", description: "This is some video.", url: "/admin/#/" },
+    {title: "Email", icon: "mail", description: "This is some video.", url: "/client/#/" },
+  ]
 </script>
 
 <style>
@@ -41,12 +53,6 @@
     display: none;
   }
 
-  .feature-grid > * {
-    --w: min(200px, 30vw);
-    --h: min(200px, 30vw);
-    --value: 3;
-    --text: 9;
-  }
 
   @media only screen and (max-width: 550px) {
     modal {
@@ -56,76 +62,167 @@
     }
   }
 
+  hero {
+    --h: 600px;
+    --w: 100vw;
+    --fsize: 1.2em;
+    display: flex;
+    flex-direction: column;
+    background-image: url("/images/hero-bg.svg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    min-width: var(--w);
+    height: var(--h);
+    padding-left: 20vw;
+    padding-right: 20vw;
+    font-size: var(--fsize);
+    text-align: center;
+    color: var(--value8);
+  }
+
+  hero a {
+    color: var(--value6);
+  }
+
+  text-photo {
+    --w: 100vw;
+    --h: 600px;
+    --pad: 0px;
+    --fsize: 1.2em;
+    display: flex;
+    flex-direction: row;
+    min-width: var(--w);
+    min-height: var(--h);
+    padding: var(--pad);
+    font-size: var(--fsize);
+  }
+
+  text-photo > div {
+    --pad: 5vw;
+    flex: 1 1 auto;
+    justify-self: center;
+    align-self: center;
+    padding: var(--pad);
+  }
+
+  text-photo > div h1 {
+    text-align: center;
+  }
+
+  text-photo > photo {
+    --w: 400px;
+    display: flex;
+    justify-content: stretch;
+    min-width: var(--w);
+  }
+
+  .solid {
+    background-color: var(--value1);
+    color: var(--value9);
+  }
+
+  text-center {
+    --fsize: 1.2em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    font-size: var(--fsize);
+    padding-left: 10vw;
+    padding-right: 10vw;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+  }
+
+  feature-grid {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  tile > left {
+    width: 100px;
+    height: 100px;
+  }
 </style>
 
 <Layout bare={ true } fullwidth={true}>
-  <Blockstart>
+  <hero>
-    <block class="center" style="--value: 7; --w: 100vw; --h: 600px; margin-bottom: var(--bottom-margin);">
     <h1 class="center-text">The Bandolier</h1>
     <h2 class="center-text">An educational fullstack web development framework.</h2>
     <p class="center" style="--w: min(100%, 800px)">A belt full of web development ammunition. A full featured web framework designed to be studied. The Bandolier contains simple implementations of almost every feature found in other frameworks, but in small easily studied forms.</p>
 
     <h2 class="center-text" style="font-size: 1.2em;">A project of <a href="https://learnjsthehardway.com/">Learn JavaScript the Hard Way</a></h2>
-    </block>
+  </hero>
-
+
-    <block class="center horizontal" style="--w: 100vw; --pad: 0px;">
+  <text-center style="background-color: var(--value6)">
-      <left class="fill center" style="--pad: 20px;">
+    <h2 class="center-self">Current Status</h2>
+    <p class="no-flex center-self" style="--w: 50%">The Bandolier is currently ready for testing and
+      about 50% of the documnetation is written.  You can currently access all of the documentation, and
+      soon there will be a way to play with the administrator console.
+    </p>
+  </text-center>
+
+  <text-photo>
+    <div>
       <h1>Production Capable</h1>
       <p>The Bandolier isn't "student grade". It's based on code used to power <a href="https://learnjsthehardway.com">learnjsthehardway.com</a> supporting thousands of users all watching thousands of hours of <b>video</b>.  <b>Yet, it's still easy to study and use.</b>  The Bandolier demonstrates that you don't have to be complicated to be useful.</p>
-      </left>
+    </div>
 
-      <shape id="photo" class="mobile-hide">
+    <photo class="mobile-hide">
-        <h4>Photo</h4>
+      <IconImage name="server-cog" height="100%" width="100%" background="var(--value5)" />
-      </shape>
+    </photo>
-    </block>
+  </text-photo>
 
-    <block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
-      <shape id="photo" class="mobile-hide">
-        <h4>Photo</h4>
-      </shape>
 
-      <right class="fill center" style="--pad: 20px;">
+  <text-photo class="solid">
+    <photo class="mobile-hide">
+      <IconImage name="banana" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
+    </photo>
+
+    <div>
       <h1>Low Friction Progress</h1>
       <p>The code isn't hidden away in a convoluted tree of directories and <code>node_modules</code>.  It's readily available for you to view, study, change, or even replace as you need.  No only that but The Bandolier <b>advocates</b> copying, modifying, and replacing code as you learn. All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a <a href="https://go.dev/">Go</a> backend?  Go for it. </p>
-      </right>
+    </div>
-    </block>
+  </text-photo>
 
-    <block class="center" style="--h: min-content">
+  <text-center>
     <h2 class="center-self">Full Featured</h2>
     <p class="no-flex center-self" style="--w: 50%">The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement.  Authentication, standard <a href="https://www.npmjs.com/package/bcryptjs">bcrypt</a> password storage, <a href="/client/#/bando/components/HLSVideo/">HLS Video Streaming</a>, and <a href="/client/#/icons/">icons</a> are just a few of the <a href="/client/#/bando/components/">convenient features</a>.  And, if you don't like how The Bandolier does it, then <b>replace it</b>.</p>
-    </block>
+
-
+    <feature-grid>
-    <grid class="center-self feature-grid" style="--cols: 3;">
+      {#each features as feature}
-      <shape><a href="#">Video</a></shape>
+      <tile>
-      <shape><a href="#">WebTorrent</a></shape>
+        <left>
-      <shape><a href="#">HLS Streams</a></shape>
+          <IconImage name={ feature.icon } background="var(--value4)" />
-      <shape><a href="#">Payments</a></shape>
+        </left>
-      <shape><a href="#">Auth</a></shape>
+        <middle>
-      <shape><a href="#">JSON APIs</a></shape>
+          <h4><a href={ feature.url }>{ feature.title }</a></h4>
-      <shape><a href="#">Databases</a></shape>
+          <p>{ feature.description }</p>
-      <shape><a href="#">UI Components</a></shape>
+        </middle>
-      <shape><a href="#">Admin Panels</a></shape>
+      </tile>
-    </grid>
+      {/each}
-
+    </feature-grid>
-    <hr>
+  </text-center>
-
+
-    <block class="center" style="--h: min-content">
+  <text-center>
       <h1 class="center-self">Progressive Development</h1>
       <p class="center-self no-flex" style="--w: 50%">Other frameworks make you create 4, 5, or sometimes 10 different files just to get a "Hello World" going.  The Bandolier requires 1 new file to start, and editing 1 other file. <b>There's even a template generator to start all of your files in each step.</b> Each new step in the development process requires only 1 or 2 new files, and everything keeps working as you work.</p>
-    </block>
+  </text-center>
 
-    <block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
+  <text-photo class="solid">
-      <left class="fill center" style="--pad: 20px;">
+    <div>
         <h1>Learn a Personal Process</h1>
         <p>If you're just starting out it's hard to know what to do next.  The Bandolier supports a <b>personal development process</b> that takes you from an initial UI to a working application in logical steps. The process is the result of watching thousands of beginners struggle with getting started, and has worked to help them start and finish their projects.</p>
-      </left>
+    </div>
 
-      <shape id="photo" class="mobile-hide">
+    <photo class="mobile-hide">
-        <h4>Photo</h4>
+      <IconImage name="terminal-square" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
-      </shape>
+    </photo>
-    </block>
+  </text-photo>
 
-    <block class="center">
+  <text-center>
     <h1 class="center-text no-flex">The Fastest Quick Start in the West<sup>*</sup></h1>
     <pre>
 <code>
@@ -143,7 +240,7 @@ npm run DANGER_ADMIN
     <div class="no-flex" style="font-size: 0.8em;">* Fast is defined as relative to the speed of <code>node_modules</code> LOL.</div>
 
     <h2><a class="center-text" href="/client/#/quick/">Read the Full Quick Start Guide</a></h2>
-    </block>
+  </text-center>
 
     <modal>
       <callout class="warning"><span>
@@ -152,5 +249,4 @@ npm run DANGER_ADMIN
         <p>This app is a work in progress so warping it to your phone isn't done yet.  You can just go straight to <a href="/client/#/">the docs</a> and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.</p>
       </span></callout>
     </modal>
-  </Blockstart>
 </Layout>

static/client/index.html

@@ -10,7 +10,6 @@
 
   <link rel='icon' type='image/png' href='/favicon.png'>
   <link rel='stylesheet' href='/global.css'>
-  <link rel='stylesheet' href='/blockstart.css'>
   <link rel='stylesheet' href='/css/pattern.min.css'>
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

static/color.css

@@ -9,17 +9,18 @@
 }
 
 :root {
-  --value9: hsl(0, 0%, 100%); /* not used too often */
+  --value9: hsl(60, 100%, 99%);
-  --value8: hsl(210, 17%, 98%);
+  --value8: hsl(65, 64%, 92%);
-  --value8a: hsl(210, 17%, 98%, 0);
+  --value8a: hsl(65, 64%, 92%, 0);
-  --value7: #e9ecef;
+  --value7: hsl(37, 76%, 85%);
-  --value6: #dee2e6;
+  --value6: hsl(32, 89%, 75%);
-  --value5: #ced4da;
+  --value5: hsl(32, 78%, 66%);
-  --value4: #adb5bd;
+  --value4: hsl(24, 69%, 60%);
-  --value3: #6c757d;
+  --value3: hsl(30, 45%, 37%);
-  --value2: #495057;
+  --value2: hsl(9, 20%, 24%);
-  --value1: #343a40;
+  --value1: hsl(28, 18%, 14%);
-  --value0: #212529;
+  --value0: hsl(105, 100%, 1%);
+
   --orange: #fb5607;
   --yellow: #ffbe0b;
   --red: #ff006e;

static/global.css

@@ -61,7 +61,6 @@ header {
   display: flex;
   justify-content: center;
   text-align: var(--justify-important);
-  border-bottom: 1px solid var(--color-bg-secondary);
 }
 
 header,
@@ -652,6 +651,12 @@ tile {
   border: 1px solid #eee;
 }
 
+tile > left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 tile > middle {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1510,13 +1515,14 @@ grid {
 #register-button button {
   font-size: 0.9em;
   background-color: unset;
-  color: var(--color-text);
+  color: var(--value7);
   padding: 3px;
+  border: 2px solid var(--value7);
 }
 
 #register-button:hover button {
-  background-color: var(--color);
+  background-color: var(--value0);
-  color: var(--color-bg);
+  color: var(--value7);
   filter: unset;
 }