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

main
Zed A. Shaw 2 years ago
parent 78b2f0e13d
commit 382bb8253b
  1. 38
      client/Header.svelte
  2. 6
      client/components/Darkmode.svelte
  3. 6
      client/components/IconImage.svelte
  4. 263
      client/pages/Landing.svelte
  5. 234
      rendered/pages/index.svelte
  6. 1
      static/client/index.html
  7. 23
      static/color.css
  8. 14
      static/global.css

@ -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 data-testid="user-profile-button" href="/profile/" use:link><Icon 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="/" 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 color="var(--value7)" name="settings" tooltip="Settings."/></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="/client/#/"><Icon name="book" tooltip="Docs" /></a></li>
<li><Darkmode /></li>
<li><a href="/login/" use:link><Icon color="var(--value7)" name="log-in" tooltip="Log in." /></a></li>
<li><a href="/client/#/"><Icon color="var(--value7)" name="book" tooltip="Docs" /></a></li>
<li><Darkmode dark_icon_color="var(--value7)" light_icon_color="var(--value7)" /></li>
</ul>
{/if}
</nav>

@ -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}

@ -9,14 +9,14 @@
export let linejoin="round";
export let name="";
export let pattern="dots-sm";
export let height="200";
export let width="200";
export let height="100%";
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});

@ -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>
<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>
<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>
<block class="center horizontal" style="--w: 100%; --pad: 0px;">
<left class="fill center" style="--pad: 20px;">
<h1>Production Ready</h1>
<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>
<shape style="--value 4; --w: 400px; --h: 600px">
<h4>Photo</h4>
</shape>
</block>
<block class="horizontal" style="--value: 7; --w: 100%; --pad: 0px;">
<shape style="--value 4; --w: 400px; --h: 600px">
<h4>Photo</h4>
</shape>
<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">
<hero>
<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>
</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>
<feature-grid>
{#each features as feature}
<tile>
<left>
<IconImage name={ feature.icon } background="var(--value4)" />
</left>
<middle>
<h4><a href={ feature.url }>{ feature.title }</a></h4>
<p>{ feature.description }</p>
</middle>
</tile>
{/each}
</feature-grid>
</text-center>
<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;">
<left class="fill center" style="--pad: 20px;">
<text-photo class="solid">
<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">
<h4>Photo</h4>
</shape>
</block>
<photo class="mobile-hide">
<IconImage name="terminal-square" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
</photo>
</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>

@ -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>
<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>
<block class="center horizontal" style="--w: 100vw; --pad: 0px;">
<left class="fill center" style="--pad: 20px;">
<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>
<shape id="photo" class="mobile-hide">
<h4>Photo</h4>
</shape>
</block>
<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;">
<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>
</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 <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>
<grid class="center-self feature-grid" style="--cols: 3;">
<shape><a href="#">Video</a></shape>
<shape><a href="#">WebTorrent</a></shape>
<shape><a href="#">HLS Streams</a></shape>
<shape><a href="#">Payments</a></shape>
<shape><a href="#">Auth</a></shape>
<shape><a href="#">JSON APIs</a></shape>
<shape><a href="#">Databases</a></shape>
<shape><a href="#">UI Components</a></shape>
<shape><a href="#">Admin Panels</a></shape>
</grid>
<hr>
<block class="center" style="--h: min-content">
<hero>
<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>
</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>
<feature-grid>
{#each features as feature}
<tile>
<left>
<IconImage name={ feature.icon } background="var(--value4)" />
</left>
<middle>
<h4><a href={ feature.url }>{ feature.title }</a></h4>
<p>{ feature.description }</p>
</middle>
</tile>
{/each}
</feature-grid>
</text-center>
<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;">
<left class="fill center" style="--pad: 20px;">
<text-photo class="solid">
<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">
<h4>Photo</h4>
</shape>
</block>
<photo class="mobile-hide">
<IconImage name="terminal-square" height="100%" width="100%" background="var(--value3)" color="var(--value7)" />
</photo>
</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>

@ -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">

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

@ -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);
color: var(--color-bg);
background-color: var(--value0);
color: var(--value7);
filter: unset;
}

Loading…
Cancel
Save