From 382bb8253bba0b59ee4bee3a3bc3840045c8acd6 Mon Sep 17 00:00:00 2001 From: "Zed A. Shaw" Date: Tue, 17 Jan 2023 20:41:17 +0400 Subject: [PATCH] Lots of dumb changes just to make the landing page not suck. Going with a western theme, kind of sepia tones. --- client/Header.svelte | 38 +++-- client/components/Darkmode.svelte | 6 +- client/components/IconImage.svelte | 6 +- client/pages/Landing.svelte | 263 ++++++++++++++++++++++------- rendered/pages/index.svelte | 234 +++++++++++++++++-------- static/client/index.html | 1 - static/color.css | 23 +-- static/global.css | 14 +- 8 files changed, 422 insertions(+), 163 deletions(-) diff --git a/client/Header.svelte b/client/Header.svelte index f4c7efc..52cbc45 100644 --- a/client/Header.svelte +++ b/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; } } +
@@ -33,13 +51,13 @@ {#if $user.authenticated} {:else} @@ -48,18 +66,18 @@ {#if register_enabled}
  • - + - +
    • {/if} -
    • -
    • -
    • +
    • +
    • +
    • {/if} diff --git a/client/components/Darkmode.svelte b/client/components/Darkmode.svelte index c7308e6..c699bad 100644 --- a/client/components/Darkmode.svelte +++ b/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'} toggle() }> - + {:else} toggle() }> - + {/if} diff --git a/client/components/IconImage.svelte b/client/components/IconImage.svelte index 9397075..3ab7d74 100644 --- a/client/components/IconImage.svelte +++ b/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 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}); diff --git a/client/pages/Landing.svelte b/client/pages/Landing.svelte index 8526b5e..9d75c33 100644 --- a/client/pages/Landing.svelte +++ b/client/pages/Landing.svelte @@ -1,7 +1,19 @@ - - -

    The Bandolier

    -

    An educational fullstack web development framework.

    -

    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.

    - -

    A project of Learn JavaScript the Hard Way

    -     - - - -

    Production Ready

    -

    The Bandolier is based on code used to power learnjsthehardway.com supporting thousands of users all watching video. Yet, it's still easy to study and use. All of the components are loosely coupled and easily replaced. Don't like my ORM? Use your favorite. Want to write a Go backend? Go for it.

    -     - - -

    Photo

    -     -     - - - -

    Photo

    -     - - -

    Low Friction Code

    -

    The code isn't hidden away in a convoluted tree of directories and node_modules. It's readily available for you to view, study, change, or even replace as you need. No only that but The Bandolier advocates copying, modifying, and replacing code as you learn.

    -     -     - - -

    Full Featured

    -

    The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement. Authentication, standard bcrypt password storage, HLS Video Streaming, and icons are just a few of the convenient features. If you don't like how The Bandolier does it, then replace it.

    -     - - - Video - WebTorrent - HLS Streams - Payments - Auth - JSON APIs - Databases - UI Components - Admin Panels - - -
    - - + +

    The Bandolier

    +

    An educational fullstack web development framework.

    +

    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.

    + +

    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

    +

    The Bandolier isn't "student grade". It's based on code used to power learnjsthehardway.com supporting thousands of users all watching thousands of hours of video. Yet, it's still easy to study and use. The Bandolier demonstrates that you don't have to be complicated to be useful.

    +
    + + + + +     + + + + + + + +
    +

    Low Friction Progress

    +

    The code isn't hidden away in a convoluted tree of directories and node_modules. It's readily available for you to view, study, change, or even replace as you need. No only that but The Bandolier advocates 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 Go backend? Go for it.

    +
    +     + + +

    Full Featured

    +

    The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement. Authentication, standard bcrypt password storage, HLS Video Streaming, and icons are just a few of the convenient features. And, if you don't like how The Bandolier does it, then replace it.

    + + + {#each features as feature} + + + + + +

    { feature.title }

    +

    { feature.description }

    +     +     + {/each} +     +     + +

    Progressive Development

    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. There's even a template generator to start all of your files in each step. Each new step in the development process requires only 1 or 2 new files, and everything keeps working as you work.

    -     + - - + +

    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

    -     -     + + + + - +

    The Fastest Quick Start in the West*

     
@@ -109,7 +240,13 @@ npm run DANGER_ADMIN
     
    * Fast is defined as relative to the speed of node_modules LOL.
    
 
     
    Read the Full Quick Start Guide
    
-    
+  
+
+    
+      
+        
    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.
    
+          
+        
 
diff --git a/rendered/pages/index.svelte b/rendered/pages/index.svelte
index c87b452..9d75c33 100644
--- a/rendered/pages/index.svelte
+++ b/rendered/pages/index.svelte
@@ -1,7 +1,19 @@
 
 
 
 
 
-  
-    
-      
    The Bandolier
    
-      
    An educational fullstack web development framework.
    
-      
    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.
    
-
-      
    A project of Learn JavaScript the Hard Way
    
-        
-
-    
-      
-        
    Production Capable
    
-        
    The Bandolier isn't "student grade". It's based on code used to power learnjsthehardway.com supporting thousands of users all watching thousands of hours of video.  Yet, it's still easy to study and use.  The Bandolier demonstrates that you don't have to be complicated to be useful.
    
-          
-
-      
-        
    Photo
    
-          
-        
-
-    
-      
-        
    Photo
    
-          
-
-      
-        
    Low Friction Progress
    
-        
    The code isn't hidden away in a convoluted tree of directories and node_modules.  It's readily available for you to view, study, change, or even replace as you need.  No only that but The Bandolier advocates 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 Go backend?  Go for it. 
    
-          
-        
-
-    
-      
    Full Featured
    
-      
    The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement.  Authentication, standard bcrypt password storage, HLS Video Streaming, and icons are just a few of the convenient features.  And, if you don't like how The Bandolier does it, then replace it.
    
-        
-
-    
-      Video
-      WebTorrent
-      HLS Streams
-      Payments
-      Auth
-      JSON APIs
-      Databases
-      UI Components
-      Admin Panels
-    
-
-    
    
-
-    
+  
+    
    The Bandolier
    
+    
    An educational fullstack web development framework.
    
+    
    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.
    
+
+    
    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
    
+      
    The Bandolier isn't "student grade". It's based on code used to power learnjsthehardway.com supporting thousands of users all watching thousands of hours of video.  Yet, it's still easy to study and use.  The Bandolier demonstrates that you don't have to be complicated to be useful.
    
+    
    
+
+    
+      
+    
+      
+
+
+  
+    
+      
+    
+
+    
    
+      
    Low Friction Progress
    
+      
    The code isn't hidden away in a convoluted tree of directories and node_modules.  It's readily available for you to view, study, change, or even replace as you need.  No only that but The Bandolier advocates 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 Go backend?  Go for it. 
    
+    
    
+      
+
+  
+    
    Full Featured
    
+    
    The Bandolier comes with nearly everything you need, and a lot of things modern web developers shouldn't have to implement.  Authentication, standard bcrypt password storage, HLS Video Streaming, and icons are just a few of the convenient features.  And, if you don't like how The Bandolier does it, then replace it.
    
+
+    
+      {#each features as feature}
+      
+        
+          
+        
+        
+          
    { feature.title }
    
+          
    { feature.description }
    
+            
+          
+      {/each}
+        
+      
+
+  
       
    Progressive Development
    
       
    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. There's even a template generator to start all of your files in each step. Each new step in the development process requires only 1 or 2 new files, and everything keeps working as you work.
    
-        
+  
 
-    
-      
+  
+    
    
         
    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
    
-          
-        
+    
+      
+    
+  
 
-    
+  
     
    The Fastest Quick Start in the West*
    
     
     
@@ -143,7 +240,7 @@ npm run DANGER_ADMIN
     
    * Fast is defined as relative to the speed of node_modules LOL.
    
 
     
    Read the Full Quick Start Guide
    
-    
+  
 
     
       
@@ -152,5 +249,4 @@ npm run DANGER_ADMIN
         
    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/client/index.html b/static/client/index.html
index 658a591..bc7838d 100644
--- a/static/client/index.html
+++ b/static/client/index.html
@@ -10,7 +10,6 @@
 
   
   
-  
   
   
   
diff --git a/static/color.css b/static/color.css
index a1c2e57..eadffb1 100644
--- a/static/color.css
+++ b/static/color.css
@@ -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;
diff --git a/static/global.css b/static/global.css
index 104c07f..6c9a9ac 100644
--- a/static/global.css
+++ b/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);
-  color: var(--color-bg);
+  background-color: var(--value0);
+  color: var(--value7);
   filter: unset;
 }