From 4f43741e07fffc9d22e2eab455f1f8e36e2d2112 Mon Sep 17 00:00:00 2001 From: "Zed A. Shaw" Date: Wed, 18 Jan 2023 07:40:10 +0400 Subject: [PATCH] First stab at a cowboy themed design. --- client/pages/Landing.svelte | 96 ++- rendered/Header.svelte | 65 +- rendered/pages/index.svelte | 96 ++- static/images/bandolier.svg | 1533 +++++++++++++++++++++++++++++++++++ static/images/colt.svg | 414 ++++++++++ static/images/cowboyhat.svg | 366 +++++++++ static/images/hero-bg.svg | 1 + 7 files changed, 2479 insertions(+), 92 deletions(-) create mode 100644 static/images/bandolier.svg create mode 100644 static/images/colt.svg create mode 100644 static/images/cowboyhat.svg create mode 100644 static/images/hero-bg.svg diff --git a/client/pages/Landing.svelte b/client/pages/Landing.svelte index 9d75c33..846763e 100644 --- a/client/pages/Landing.svelte +++ b/client/pages/Landing.svelte @@ -3,16 +3,16 @@ import IconImage from '$/client/components/IconImage.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/#/" }, + {title: "Video", icon: "video", description: "Easy video playback with aspect ratios.", url: "/client/#/bando/components/video/" }, + {title: "WebTorrent", icon: "tornado", description: "Sharing the load with WebTorrent.", url: "/client/#/bando/components/WTVideo/" }, + {title: "HLS Streaming Video", icon: "cast", description: "Efficient streaming of video, even on platforms without HLS support.", url: "/client/#/bando/components/HLSVideo/" }, + {title: "Payments", icon: "dollar-sign", description: "Fully implemented support for Paypal, Stripe, and Bitcoin.", url: "/client/#/bando/components/" }, + {title: "Authentication", icon: "log-in", description: "Authentication with bcrypt secure password storage.", url: "/client/#/bando/components/LogIn/" }, + {title: "JSON APIs", icon: "curly-braces", description: "Simple implementation of JSON API backends.", url: "/client/#/docs/lib/api.js" }, + {title: "Database ORMs", icon: "database", description: "Database access with a simple ORM and admin control panel.", url: "/client/#/bando/components/DataTable/" }, + {title: "UI Components", icon: "layout", description: "Full set of demo components to study and use.", url: "/client/#/bando/components/" }, + {title: "Admin Dashboard", icon: "keyboard", description: "Simple admin dashboard for development and management.", url: "/admin/#/" }, + {title: "Email", icon: "mail", description: "Email templates, sending emails, and testing your email setup.", url: "/client/#/docs/lib/email.js" }, ] @@ -35,12 +35,6 @@ font-size: 0.5em; } - #photo { - --w: 400px; - --h: 600px; - --value: 4; - } - modal { position: fixed; top: 0; @@ -65,7 +59,7 @@ hero { --h: 600px; --w: 100vw; - --fsize: 1.2em; + --fsize: min(1.2em, 2.5vw); display: flex; flex-direction: column; background-image: url("/images/hero-bg.svg"); @@ -110,10 +104,15 @@ } text-photo > photo { - --w: 400px; + --w: min(400px, 50vw); display: flex; justify-content: stretch; min-width: var(--w); + background-color: var(--value6); + } + + text-photo > photo > img { + width: 100%; } .solid { @@ -121,6 +120,10 @@ color: var(--value9); } + .solid a { + color: var(--value7); + } + text-center { --fsize: 1.2em; display: flex; @@ -143,8 +146,24 @@ tile > left { width: 100px; + min-width: 100px; + max-width: 100px; height: 100px; + min-height: 100px; + max-height: 100px; + } + + tile > middle h5, + tile > middle p { + margin: 3px; } + + @media only screen and (max-width: 600px) { + feature-grid { + grid-template-columns: 1fr; + } + } + @@ -156,14 +175,6 @@

A project of Learn JavaScript the Hard Way

- -

Current Status

-

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. -

- -

Production Capable

@@ -171,14 +182,14 @@
- + - +
@@ -195,10 +206,12 @@ {#each features as feature} - + + + -

{ feature.title }

+
{ feature.title }

{ feature.description }

 @@ -215,10 +228,11 @@

Learn a Personal Process

If you're just starting out it's hard to know what to do next. The Bandolier supports a personal development process 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.

+

Photo by Ealdgyth

- + @@ -242,11 +256,19 @@ npm run DANGER_ADMIN

Read the Full Quick Start Guide

- - -

Get Off Ya Phone

+ +

Current Status

+

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. +

+ + + + +

Get Off Ya Phone

-

This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to the docs and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.

- - +

This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to the docs and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.

+ + diff --git a/rendered/Header.svelte b/rendered/Header.svelte index 4d12b6c..92985e8 100644 --- a/rendered/Header.svelte +++ b/rendered/Header.svelte @@ -1,38 +1,67 @@
diff --git a/rendered/pages/index.svelte b/rendered/pages/index.svelte index 9d75c33..846763e 100644 --- a/rendered/pages/index.svelte +++ b/rendered/pages/index.svelte @@ -3,16 +3,16 @@ import IconImage from '$/client/components/IconImage.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/#/" }, + {title: "Video", icon: "video", description: "Easy video playback with aspect ratios.", url: "/client/#/bando/components/video/" }, + {title: "WebTorrent", icon: "tornado", description: "Sharing the load with WebTorrent.", url: "/client/#/bando/components/WTVideo/" }, + {title: "HLS Streaming Video", icon: "cast", description: "Efficient streaming of video, even on platforms without HLS support.", url: "/client/#/bando/components/HLSVideo/" }, + {title: "Payments", icon: "dollar-sign", description: "Fully implemented support for Paypal, Stripe, and Bitcoin.", url: "/client/#/bando/components/" }, + {title: "Authentication", icon: "log-in", description: "Authentication with bcrypt secure password storage.", url: "/client/#/bando/components/LogIn/" }, + {title: "JSON APIs", icon: "curly-braces", description: "Simple implementation of JSON API backends.", url: "/client/#/docs/lib/api.js" }, + {title: "Database ORMs", icon: "database", description: "Database access with a simple ORM and admin control panel.", url: "/client/#/bando/components/DataTable/" }, + {title: "UI Components", icon: "layout", description: "Full set of demo components to study and use.", url: "/client/#/bando/components/" }, + {title: "Admin Dashboard", icon: "keyboard", description: "Simple admin dashboard for development and management.", url: "/admin/#/" }, + {title: "Email", icon: "mail", description: "Email templates, sending emails, and testing your email setup.", url: "/client/#/docs/lib/email.js" }, ] @@ -35,12 +35,6 @@ font-size: 0.5em; } - #photo { - --w: 400px; - --h: 600px; - --value: 4; - } - modal { position: fixed; top: 0; @@ -65,7 +59,7 @@ hero { --h: 600px; --w: 100vw; - --fsize: 1.2em; + --fsize: min(1.2em, 2.5vw); display: flex; flex-direction: column; background-image: url("/images/hero-bg.svg"); @@ -110,10 +104,15 @@ } text-photo > photo { - --w: 400px; + --w: min(400px, 50vw); display: flex; justify-content: stretch; min-width: var(--w); + background-color: var(--value6); + } + + text-photo > photo > img { + width: 100%; } .solid { @@ -121,6 +120,10 @@ color: var(--value9); } + .solid a { + color: var(--value7); + } + text-center { --fsize: 1.2em; display: flex; @@ -143,8 +146,24 @@ tile > left { width: 100px; + min-width: 100px; + max-width: 100px; height: 100px; + min-height: 100px; + max-height: 100px; + } + + tile > middle h5, + tile > middle p { + margin: 3px; } + + @media only screen and (max-width: 600px) { + feature-grid { + grid-template-columns: 1fr; + } + } + @@ -156,14 +175,6 @@

A project of Learn JavaScript the Hard Way

- -

Current Status

-

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. -

- -

Production Capable

@@ -171,14 +182,14 @@
- + - +
@@ -195,10 +206,12 @@ {#each features as feature} - + + + -

{ feature.title }

+
{ feature.title }

{ feature.description }

 @@ -215,10 +228,11 @@

Learn a Personal Process

If you're just starting out it's hard to know what to do next. The Bandolier supports a personal development process 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.

+

Photo by Ealdgyth

- + @@ -242,11 +256,19 @@ npm run DANGER_ADMIN

Read the Full Quick Start Guide

- - -

Get Off Ya Phone

+ +

Current Status

+

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. +

+ + + + +

Get Off Ya Phone

-

This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to the docs and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.

- - +

This app is a work in progress so warping it to your phone isn't done yet. You can just go straight to the docs and when you're serious go find a real computer and stop making people support your phone for reading professional documentation.

+ + diff --git a/static/images/bandolier.svg b/static/images/bandolier.svg new file mode 100644 index 0000000..815df7d --- /dev/null +++ b/static/images/bandolier.svg @@ -0,0 +1,1533 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/colt.svg b/static/images/colt.svg new file mode 100644 index 0000000..e66a26b --- /dev/null +++ b/static/images/colt.svg @@ -0,0 +1,414 @@ + + + + +Created by potrace 1.10, written by Peter Selinger 2001-2011 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/cowboyhat.svg b/static/images/cowboyhat.svg new file mode 100644 index 0000000..2bc7bce --- /dev/null +++ b/static/images/cowboyhat.svg @@ -0,0 +1,366 @@ + + + + +Created by potrace 1.10, written by Peter Selinger 2001-2011 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/hero-bg.svg b/static/images/hero-bg.svg new file mode 100644 index 0000000..898cc69 --- /dev/null +++ b/static/images/hero-bg.svg @@ -0,0 +1 @@ + \ No newline at end of file