update colors

tireymorris · May 6, 2024 · 572fc4c · 572fc4c
1 parent bdc6c5a
commit 572fc4c
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 46 deletions.
diff --git a/README.md b/README.md
@@ -2,16 +2,16 @@
 
 hyperwave is a server-side framework for building web applications.
 
-- fast: Bun and Hono for best-in-class performance
-- lightweight: ~20kb payload. Demo loads in a couple seconds even while throttled to 2G.
-- productive: use the best tools for the job: Tailwind, HTMX, and TypeScript
+- fast: tiny payloads with no bloated client side rendering
+- productive: build _really_ fast with htmx, tailwind, tsx, hyperscript
+- ergonomic: best tooling of modern tooling combined with rock solid app architecture
 - portable: compile a binary to deploy anywhere
 
 ### Setup
 
 `bun install && bun run src/db.ts && bun dev`
 
-Visit port 3000 and edit `server.tsx`
+Visit port 1234 and edit `server.tsx`
 
 ---
 
@@ -35,6 +35,7 @@ app.get("/", ({ html }) =>
             class="bg-blue-100 p-4 text-sm font-bold rounded-md shadow-sm"
             hx-get="/instructions"
             hx-target="closest div"
+            _="on click toggle .loading"
           >
             fetch instructions from <code>/instructions</code>
           </button>
@@ -48,6 +49,7 @@ app.get("/", ({ html }) =>
 - The API serves a full HTML document to the client, which includes Tailwind classes and HTMX attributes
 - The response is wrapped in a `<Layout />` tag, a server-rendered functional component, which takes a `title` prop
 - The button, when clicked, will issue a `GET` request to `/instructions` and replace the content of its parent div with the response.
+- Includes a tiny hyperscript to toggle a class when the button is clicked
 
 ---
 

diff --git a/public/styles/uno.css b/public/styles/uno.css
@@ -29,7 +29,6 @@
 .top-14{top:3.5rem;}
 .m-0{margin:0;}
 .m-auto{margin:auto;}
-.my-4{margin-top:1rem;margin-bottom:1rem;}
 .me{margin-inline-end:1rem;}
 .block{display:block;}
 .hidden{display:none;}
@@ -39,43 +38,39 @@
 .min-h-14{min-height:3.5rem;}
 .w-16{width:4rem;}
 .w-40{width:10rem;}
-.w-5\/6{width:83.3333333333%;}
 .w-80{width:20rem;}
 .w-full{width:100%;}
 .hover\:w-56:hover{width:14rem;}
 .flex{display:flex;}
 .flex-col{flex-direction:column;}
 .cursor-pointer{cursor:pointer;}
 .list-none{list-style-type:none;}
-.items-start\!{align-items:flex-start !important;}
 .items-center{align-items:center;}
 .self-start{align-self:flex-start;}
-.justify-start\!{justify-content:flex-start !important;}
 .justify-center{justify-content:center;}
 .justify-between{justify-content:space-between;}
 .gap-3{gap:0.75rem;}
 .gap-4{gap:1rem;}
 .gap-8{gap:2rem;}
 .border{border-width:1px;}
 .border-b-1{border-bottom-width:1px;}
-.border-amber-300{--un-border-opacity:1;border-color:rgb(252 211 77 / var(--un-border-opacity));}
+.border-blue-300{--un-border-opacity:1;border-color:rgb(147 197 253 / var(--un-border-opacity));}
 .border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}
 .focus\:border-blue-200:focus{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}
 .rounded-md{border-radius:0.375rem;}
 .border-none{border-style:none;}
 .border-solid{border-style:solid;}
 .border-b-solid{border-bottom-style:solid;}
-.bg-amber-200{--un-bg-opacity:1;background-color:rgb(253 230 138 / var(--un-bg-opacity));}
-.bg-amber-300{--un-bg-opacity:1;background-color:rgb(252 211 77 / var(--un-bg-opacity));}
-.bg-amber-50{--un-bg-opacity:1;background-color:rgb(255 251 235 / var(--un-bg-opacity));}
-.bg-amber-900{--un-bg-opacity:1;background-color:rgb(120 53 15 / var(--un-bg-opacity));}
 .bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}
-.bg-slate-700{--un-bg-opacity:1;background-color:rgb(51 65 85 / var(--un-bg-opacity));}
+.bg-blue-200{--un-bg-opacity:1;background-color:rgb(191 219 254 / var(--un-bg-opacity));}
+.bg-blue-300{--un-bg-opacity:1;background-color:rgb(147 197 253 / var(--un-bg-opacity));}
+.bg-blue-50{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity));}
+.bg-blue-700{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
+.bg-blue-900{--un-bg-opacity:1;background-color:rgb(30 58 138 / var(--un-bg-opacity));}
 .bg-transparent{background-color:transparent;}
 .bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity));}
-.hover\:bg-amber-300:hover{--un-bg-opacity:1;background-color:rgb(252 211 77 / var(--un-bg-opacity));}
-.hover\:bg-amber-400:hover{--un-bg-opacity:1;background-color:rgb(251 191 36 / var(--un-bg-opacity));}
-.hover\:bg-slate-700:hover{--un-bg-opacity:1;background-color:rgb(51 65 85 / var(--un-bg-opacity));}
+.hover\:bg-blue-400:hover{--un-bg-opacity:1;background-color:rgb(96 165 250 / var(--un-bg-opacity));}
+.hover\:bg-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
 .fill-neutral-500{--un-fill-opacity:1;fill:rgb(115 115 115 / var(--un-fill-opacity));}
 .fill-white{--un-fill-opacity:1;fill:rgb(255 255 255 / var(--un-fill-opacity));}
 .p-0{padding:0;}
@@ -86,10 +81,8 @@
 .py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
 .py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
 .py-4{padding-top:1rem;padding-bottom:1rem;}
-.pl-0\.5{padding-left:0.125rem;}
 .pl-20{padding-left:5rem;}
 .pl-3{padding-left:0.75rem;}
-.pl-5{padding-left:1.25rem;}
 .pl-6{padding-left:1.5rem;}
 .pr-10{padding-right:2.5rem;}
 .text-left{text-align:left;}

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -11,7 +11,7 @@ export default function PinkButton({
 }: Props) {
   return (
     <button
-      class={`flex cursor-pointer items-center justify-center gap-3 rounded-md border-none px-4 py-2 text-base font-bold shadow-md  bg-amber-300 text-brown-800 hover:bg-amber-400  ${className}`}
+      class={`flex cursor-pointer items-center justify-center gap-3 rounded-md border-none px-4 py-2 text-base font-bold shadow-md  bg-blue-300 text-brown-800 hover:bg-blue-400  ${className}`}
       {...rest}
     >
       {children}

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -18,7 +18,7 @@ export default function Layout({ title, children, currentPath }: Props) {
         <title>{title}</title>
         <link
           rel="icon"
-          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🥞</text></svg>"
+          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌊</text></svg>"
         />
         <script src="https://unpkg.com/[email protected]" />
         <link rel="stylesheet" href="/styles/uno.css" />
@@ -28,12 +28,9 @@ export default function Layout({ title, children, currentPath }: Props) {
 
       <style>{`* { box-sizing: border-box; margin: 0; outline: none; color: unset; }`}</style>
 
-      <body class="font-lato m-0 bg-amber-50 text-base">
-        <header class="border-b-solid border-b-1 fixed sticky flex w-full gap-4 border-amber-300 bg-amber-200 py-3 px-4 leading-5">
-          <a
-            href="/"
-            class="no-underline text-brown-800"
-          >
+      <body class="font-lato m-0 bg-blue-50 text-base">
+        <header class="border-b-solid border-b-1 fixed sticky flex w-full gap-4 border-blue-300 bg-blue-200 py-3 px-4 leading-5">
+          <a href="/" class="no-underline text-brown-800 text-sm">
             <h1>🌊 hyperwave</h1>
           </a>
           <div class="relative hidden md:block">
@@ -46,7 +43,7 @@ export default function Layout({ title, children, currentPath }: Props) {
 
         <Nav currentPath={currentPath} />
 
-        <main class="m-auto flex flex-col justify-center gap-8 py-4 pl-20 md:pl-60 md:pr-10 bg-cream-200">
+        <main class="m-auto flex flex-col justify-center gap-8 py-4 pl-20 md:pl-60 md:pr-10">
           {children}
         </main>
       </body>

diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
@@ -1,26 +1,14 @@
 import NavItem from "./NavItem";
-import Button from "./Button"; // Consider renaming if you change the color theme
+import Button from "./Button";
 import { routes } from "../routes";
 
 export default function Nav({ currentPath }: { currentPath: string }) {
   return (
-    <aside class="transition-width group fixed top-14 block h-full w-16 bg-amber-900 leading-5 duration-200 hover:w-56 md:w-56 text-cream-100">
+    <aside class="transition-width group fixed top-14 block h-full w-16 bg-blue-900 leading-5 duration-200 hover:w-56 md:w-56 text-cream-100">
       <nav>
         <ul class="m-0 flex w-full flex-col items-center p-0">
-          <Button class="items-start! justify-start! my-4 w-5/6 pl-5 ">
-            <span class="fixed pl-0.5 text-cream-200">+</span>
-            <span class="relative left-10 m-0 p-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100 md:opacity-100">
-              Wave
-            </span>
-          </Button>
           {routes.map((route) => (
-            <NavItem
-              currentPath={currentPath}
-              route={route}
-              style="bg-amber-200 hover:bg-amber-300 text-brown-900 hover:text-brown-700"
-            >
-              {route.label}
-            </NavItem>
+            <NavItem currentPath={currentPath} route={route} />
           ))}
         </ul>
       </nav>

diff --git a/src/components/NavItem.tsx b/src/components/NavItem.tsx
@@ -8,9 +8,8 @@ type NavItemProps = {
 export default function NavItem({ currentPath, route }: NavItemProps) {
   return (
     <li
-      class={`m-0 w-full list-none pl-6 text-slate-400 hover:bg-slate-700 hover:text-white ${
-        currentPath === route.link && "bg-slate-700 text-white"
-      }`}
+      class={`m-0 w-full list-none pl-6 text-slate-400 hover:bg-blue-700 hover:text-white ${currentPath === route.link && "bg-blue-700 text-white"
+        }`}
     >
       <a
         href={route.link}