switched to css properties

flake.nix

@@ -75,7 +75,7 @@
           default = pkgs.mkShell {
             buildInputs = with pkgs; [ 
               air # live go app reloading
-              sass
+              dart-sass
               go
               gopls
               gotools

web/dashboard.templ

@@ -1,12 +1,18 @@
 package web
 
 templ dashboard() {
-    <title>Home</title>
+    <title>Dashboard</title>
-    <h1>Hello World!</h1>
+    <div class="container"> 
-    <button hx-get="/hello" hx-trigger="click" hx-target="#hello" hx-swap="outerHtml">Hello you!</button>
+        <div class="row">
-
+            <div class="c-crust col my-auto" style="width:40%;height:100px;">
-    <div id="hello">
+                <div class="c-mantle w-full">
-
+                    <p class="m-0">Back</p>
                 </div>
                 
+            </div>
+            <div class="c-crust col my-auto" style="width:40%;height:100px;">
+                
+            </div>
+        </div>
+    </div>
 }

web/sass/catppuccin.scss

@@ -0,0 +1,114 @@
+$palette: (
+  "latte": (
+    "rosewater": #dc8a78,
+    "flamingo": #dd7878,
+    "pink": #ea76cb,
+    "mauve": #8839ef,
+    "red": #d20f39,
+    "maroon": #e64553,
+    "peach": #fe640b,
+    "yellow": #df8e1d,
+    "green": #40a02b,
+    "teal": #179299,
+    "sky": #04a5e5,
+    "sapphire": #209fb5,
+    "blue": #1e66f5,
+    "lavender": #7287fd,
+    "text": #4c4f69,
+    "subtext1": #5c5f77,
+    "subtext0": #6c6f85,
+    "overlay2": #7c7f93,
+    "overlay1": #8c8fa1,
+    "overlay0": #9ca0b0,
+    "surface2": #acb0be,
+    "surface1": #bcc0cc,
+    "surface0": #ccd0da,
+    "base": #eff1f5,
+    "mantle": #e6e9ef,
+    "crust": #dce0e8
+  ),
+  "frappe": (
+    "rosewater": #f2d5cf,
+    "flamingo": #eebebe,
+    "pink": #f4b8e4,
+    "mauve": #ca9ee6,
+    "red": #e78284,
+    "maroon": #ea999c,
+    "peach": #ef9f76,
+    "yellow": #e5c890,
+    "green": #a6d189,
+    "teal": #81c8be,
+    "sky": #99d1db,
+    "sapphire": #85c1dc,
+    "blue": #8caaee,
+    "lavender": #babbf1,
+    "text": #c6d0f5,
+    "subtext1": #b5bfe2,
+    "subtext0": #a5adce,
+    "overlay2": #949cbb,
+    "overlay1": #838ba7,
+    "overlay0": #737994,
+    "surface2": #626880,
+    "surface1": #51576d,
+    "surface0": #414559,
+    "base": #303446,
+    "mantle": #292c3c,
+    "crust": #232634
+  ),
+  "macchiato": (
+    "rosewater": #f4dbd6,
+    "flamingo": #f0c6c6,
+    "pink": #f5bde6,
+    "mauve": #c6a0f6,
+    "red": #ed8796,
+    "maroon": #ee99a0,
+    "peach": #f5a97f,
+    "yellow": #eed49f,
+    "green": #a6da95,
+    "teal": #8bd5ca,
+    "sky": #91d7e3,
+    "sapphire": #7dc4e4,
+    "blue": #8aadf4,
+    "lavender": #b7bdf8,
+    "text": #cad3f5,
+    "subtext1": #b8c0e0,
+    "subtext0": #a5adcb,
+    "overlay2": #939ab7,
+    "overlay1": #8087a2,
+    "overlay0": #6e738d,
+    "surface2": #5b6078,
+    "surface1": #494d64,
+    "surface0": #363a4f,
+    "base": #24273a,
+    "mantle": #1e2030,
+    "crust": #181926
+  ),
+  "mocha": (
+    "rosewater": #f5e0dc,
+    "flamingo": #f2cdcd,
+    "pink": #f5c2e7,
+    "mauve": #cba6f7,
+    "red": #f38ba8,
+    "maroon": #eba0ac,
+    "peach": #fab387,
+    "yellow": #f9e2af,
+    "green": #a6e3a1,
+    "teal": #94e2d5,
+    "sky": #89dceb,
+    "sapphire": #74c7ec,
+    "blue": #89b4fa,
+    "lavender": #b4befe,
+    "text": #cdd6f4,
+    "subtext1": #bac2de,
+    "subtext0": #a6adc8,
+    "overlay2": #9399b2,
+    "overlay1": #7f849c,
+    "overlay0": #6c7086,
+    "surface2": #585b70,
+    "surface1": #45475a,
+    "surface0": #313244,
+    "base": #1e1e2e,
+    "mantle": #181825,
+    "crust": #11111b
+  )
+);

web/sass/catpuccin.scss

@@ -1,115 +0,0 @@
-
-///latte
-$latte-base: #eff1f5;
-$latte-text: #4c4f69;
-$latte-pink: #ea76cb;
-$latte-mauve: #8839ef;
-$latte-red: #d20f39;
-$latte-maroon: #e64553;
-$latte-peach: #fe640b;
-$latte-yellow: #df8e1d;
-$latte-green: #40a02b;
-$latte-teal: #179299;
-$latte-sky: #04a5e5;
-$latte-sapphire: #209fb5;
-$latte-blue: #1e66f5;
-$latte-lavender: #7287fd;
-$latte-text: #4c4f69;
-$latte-subtext1: #5c5f77;
-$latte-subtext0: #6c6f85;
-$latte-overlay2: #7c7f93;
-$latte-overlay1: #8c8fa1;
-$latte-overlay0: #9ca0b0;
-$latte-surface2: #acb0be;
-$latte-surface1: #bcc0cc;
-$latte-surface0: #ccd0da;
-$latte-base: #eff1f5;
-$latte-mantle: #e6e9ef;
-$latte-crust: #dce0e8;
-///frappé
-$frappe-base: #303446;
-$frappe-text: #c6d0f5;
-$frappe-pink: #f4b8e4;
-$frappe-mauve: #ca9ee6;
-$frappe-red: #e78284;
-$frappe-maroon: #ea999c;
-$frappe-peach: #ef9f76;
-$frappe-yellow: #e5c890;
-$frappe-green: #a6d189;
-$frappe-teal: #81c8be;
-$frappe-sky: #99d1db;
-$frappe-sapphire: #85c1dc;
-$frappe-blue: #8caaee;
-$frappe-lavender: #babbf1;
-$frappe-text: #c6d0f5;
-$frappe-subtext1: #b5bfe2;
-$frappe-subtext0: #a5adce;
-$frappe-overlay2: #949cbb;
-$frappe-overlay1: #838ba7;
-$frappe-overlay0: #737994;
-$frappe-surface2: #626880;
-$frappe-surface1: #51576d;
-$frappe-surface0: #414559;
-$frappe-base: #303446;
-$frappe-mantle: #292c3c;
-$frappe-crust: #232634;
-///macchiato
-$macchiato-base: #24273a;
-$macchiato-text: #cad3f5;
-$macchiato-pink: #f5bde6;
-$macchiato-mauve: #c6a0f6;
-$macchiato-red: #ed8796;
-$macchiato-maroon: #ee99a0;
-$macchiato-peach: #f5a97f;
-$macchiato-yellow: #eed49f;
-$macchiato-green: #a6da95;
-$macchiato-teal: #8bd5ca;
-$macchiato-sky: #91d7e3;
-$macchiato-sapphire: #7dc4e4;
-$macchiato-blue: #8aadf4;
-$macchiato-lavender: #b7bdf8;
-$macchiato-text: #cad3f5;
-$macchiato-subtext1: #b8c0e0;
-$macchiato-subtext0: #a5adcb;
-$macchiato-overlay2: #939ab7;
-$macchiato-overlay1: #8087a2;
-$macchiato-overlay0: #6e738d;
-$macchiato-surface2: #5b6078;
-$macchiato-surface1: #494d64;
-$macchiato-surface0: #363a4f;
-$macchiato-base: #24273a;
-$macchiato-mantle: #1e2030;
-$macchiato-crust: #181926;
-///mocha
-$mocha-base: #1e1e2e;
-$mocha-text: #cdd6f4;
-$mocha-pink: #f5c2e7;
-$mocha-mauve: #cba6f7;
-$mocha-red: #f38ba8;
-$mocha-maroon: #eba0ac;
-$mocha-peach: #fab387;
-$mocha-yellow: #f9e2af;
-$mocha-green: #a6e3a1;
-$mocha-teal: #94e2d5;
-$mocha-sky: #89dceb;
-$mocha-sapphire: #74c7ec;
-$mocha-blue: #89b4fa;
-$mocha-lavender: #b4befe;
-$mocha-text: #cdd6f4;
-$mocha-subtext1: #bac2de;
-$mocha-subtext0: #a6adc8;
-$mocha-overlay2: #9399b2;
-$mocha-overlay1: #7f849c;
-$mocha-overlay0: #6c7086;
-$mocha-surface2: #585b70;
-$mocha-surface1: #45475a;
-$mocha-surface0: #313244;
-$mocha-base: #1e1e2e;
-$mocha-mantle: #181825;
-$mocha-crust: #11111b;
-
-
-
-/// scss file using the themes from
-/// Catppuccin : https://github.com/catppuccin/catppuccin
-/// Claquettes

web/sass/nav.scss

@@ -1,15 +1,21 @@
 header {
-    background-color: $nav-bg;
+    background-color: var(--#{$prefix}-nav-bg);
     height: 30px;
     width: 100%;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 nav {
-    background-color: $nav-bg;
     display: flex;
     flex-direction: column;
 
+    a#logo-a {
+        font-size: 12pt;
+        pointer-events: none;
+        color: var(--#{$prefix}-nav-color);
+        background-color: var(--#{$prefix}-nav-logo-bg);
+    }
+
     ul {
         margin: 0;
         padding: 0;
@@ -17,26 +23,26 @@ nav {
         padding-left: 0;
     }
     li { 
-        margin-top: 10px;
+        margin-top: 8px;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
     }
     a.active {
         pointer-events: none;
-        background-color: $nav-active-bg;
+        background-color: var(--#{$prefix}-nav-active-bg);
-        color: $nav-active-color;
+        color: var(--#{$prefix}-nav-active-color);
     }
     a {
         transition: background-color $hl-trn-spd ease-in, color $hl-trn-spd ease-in;
         border-radius: 5px;
         text-align: center;
-        padding: 12px 0px;
+        padding: 6px 0px;
         display: inline-block;
         cursor: pointer;
-        color: $nav-color;
+        color: var(--#{$prefix}-nav-color);
         width: 100%;
         text-decoration: none;
     }
     a:hover {
-        background-color: $nav-hover;
+        background-color: var(--#{$prefix}-nav-hover);
     }
 }

web/sass/site.scss

@@ -1,37 +1,52 @@
-@import 'catpuccin';
+$prefix: pf;
+
+@import "variables";
 
 // highlight transition speed
 $hl-trn-spd: 0.2s;
 
-$bg: $latte-base;
-$nav-bg: $latte-crust;
-$nav-color: $latte-text;
-$nav-hover: $latte-surface2;
-$nav-active-bg: $latte-mauve;
-$nav-active-color: $latte-base;
-$green: $latte-green;
-
 @import 'mixins';
 
 @import 'nav';
 
+
 body {
-    background-color: $latte-base;
+    background-color: var(--#{$prefix}-bg);
 }
 
-body.dark-mode {
+w-full {
-    $bg: $macchiato-base;
+    width: 100%;
-    $nav-bg: $macchiato-crust;
+}
-    $green: $macchiato-green;
+.d-flex {
+    display: flex;
+}
+.my-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+.m-0 {
+    margin: 0px;
 }
 
-div#below-header {
+.container {
-    display:flex;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.col {
+    box-sizing: border-box;
 }
 
 div#left-col {
     width: 15vw;
     padding: 10px;
+    background-color: var(--#{$prefix}-nav-bg);
 }
 
 div#main-body-content {
@@ -51,4 +66,5 @@ div#main-body-content.htmx-added {
 div#right-col {
     width: 15vw;
     padding: 10px;
+    background-color: var(--#{$prefix}-nav-bg);
 }

web/sass/variables.scss

@@ -0,0 +1,27 @@
+@use 'catppuccin';
+
+@each $flavor, $color in catppuccin.$palette {
+    body.#{$flavor} {
+        --#{$prefix}-bg: #{map-get($color, 'base')};
+        --#{$prefix}-crust: #{map-get($color, 'crust')};
+        --#{$prefix}-mantle: #{map-get($color, 'mantle')};
+        --#{$prefix}-surface0: #{map-get($color, 'surface0')};
+
+        --#{$prefix}-nav-bg: #{map-get($color, 'crust')};
+        --#{$prefix}-nav-color: #{map-get($color, 'text')};
+        --#{$prefix}-nav-logo-bg: #{map-get($color, 'rosewater')};
+        --#{$prefix}-nav-hover:  #{map-get($color, 'surface2')};
+        --#{$prefix}-nav-active-bg: #{map-get($color, 'mauve')};
+        --#{$prefix}-nav-active-color: #{map-get($color, 'base')};
+    }
+}
+
+.c-s0 {
+    background-color: var(--#{$prefix}-surface0);
+}
+.c-crust {
+    background-color: var(--#{$prefix}-crust);
+}
+.c-mantle {
+    background-color: var(--#{$prefix}-mantle);
+}

web/templates/index.html

@@ -6,16 +6,18 @@
     <link rel="stylesheet" href="/static/site.css">
     <script src="/static/htmx.min.js"></script>
 </head>
-<body>
+<body class="latte">
     <header>
 
     </header>
-    <div id="below-header">
+    <div class="d-flex" id="below-header">
 
         <div id="left-col">
             <nav>
-                <button class="title" href="/">Recount!</button>
                 <ul>
+                    <li>
+                        <a id="logo-a">Recount</a>
+                    </li>
                     <li>
                         <a 
                         hx-get="/" 
@@ -51,11 +53,13 @@
         <div id="main-body-content">
             {{.InnerHtml}}
         </div>
+        <div id="right-col">
+
+        </div>
     </div>
         <script type="module" src="/static/index.js"></script>
         <script type="module">
-        import {say_hello, register_nav_links} from "/static/index.js";
+            import {register_nav_links} from "/static/index.js";
-        say_hello();
             register_nav_links();
         </script>
 </body>