From 9a14c89ba17319e3a1beb210358fb8c7414886bc Mon Sep 17 00:00:00 2001
From: Nickiel12 <nicholasyoungsumner@gmail.com>
Date: Sun, 14 Jan 2024 18:00:51 -0800
Subject: [PATCH] switched to css properties

---
 flake.nix                |   2 +-
 web/dashboard.templ      |  20 ++++---
 web/sass/catppuccin.scss | 114 ++++++++++++++++++++++++++++++++++++++
 web/sass/catpuccin.scss  | 115 ---------------------------------------
 web/sass/nav.scss        |  24 +++++---
 web/sass/site.scss       |  48 ++++++++++------
 web/sass/variables.scss  |  27 +++++++++
 web/templates/index.html |  16 ++++--
 8 files changed, 212 insertions(+), 154 deletions(-)
 create mode 100644 web/sass/catppuccin.scss
 delete mode 100644 web/sass/catpuccin.scss
 create mode 100644 web/sass/variables.scss

diff --git a/flake.nix b/flake.nix
index 4656ecb..d0d10a9 100644
--- a/flake.nix
+++ b/flake.nix
@@ -75,7 +75,7 @@
           default = pkgs.mkShell {
             buildInputs = with pkgs; [ 
               air # live go app reloading
-              sass
+              dart-sass
               go
               gopls
               gotools
diff --git a/web/dashboard.templ b/web/dashboard.templ
index f3d0da4..08f8bd0 100644
--- a/web/dashboard.templ
+++ b/web/dashboard.templ
@@ -1,12 +1,18 @@
 package web
 
 templ dashboard() {
-    <title>Home</title>
-    <h1>Hello World!</h1>
-    <button hx-get="/hello" hx-trigger="click" hx-target="#hello" hx-swap="outerHtml">Hello you!</button>
-
-    <div id="hello">
-
+    <title>Dashboard</title>
+    <div class="container"> 
+        <div class="row">
+            <div class="c-crust col my-auto" style="width:40%;height:100px;">
+                <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>
-
 }
diff --git a/web/sass/catppuccin.scss b/web/sass/catppuccin.scss
new file mode 100644
index 0000000..f88a5c4
--- /dev/null
+++ b/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
+  )
+);
diff --git a/web/sass/catpuccin.scss b/web/sass/catpuccin.scss
deleted file mode 100644
index af6f287..0000000
--- a/web/sass/catpuccin.scss
+++ /dev/null
@@ -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
diff --git a/web/sass/nav.scss b/web/sass/nav.scss
index f35dcba..4ffd6b0 100644
--- a/web/sass/nav.scss
+++ b/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-bottom: 10px;
+        margin-top: 8px;
+        margin-bottom: 8px;
     }
     a.active {
         pointer-events: none;
-        background-color: $nav-active-bg;
-        color: $nav-active-color;
+        background-color: var(--#{$prefix}-nav-active-bg);
+        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);
     }
 }
diff --git a/web/sass/site.scss b/web/sass/site.scss
index bed97e1..0b45722 100644
--- a/web/sass/site.scss
+++ b/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 {
-    $bg: $macchiato-base;
-    $nav-bg: $macchiato-crust;
-    $green: $macchiato-green;
+w-full {
+    width: 100%;
+}
+.d-flex {
+    display: flex;
+}
+.my-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+.m-0 {
+    margin: 0px;
 }
 
-div#below-header {
-    display:flex;
+.container {
+    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);
 }
diff --git a/web/sass/variables.scss b/web/sass/variables.scss
new file mode 100644
index 0000000..716c4bd
--- /dev/null
+++ b/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);
+}
diff --git a/web/templates/index.html b/web/templates/index.html
index 54769f3..a33cd28 100644
--- a/web/templates/index.html
+++ b/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,12 +53,14 @@
         <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";
-        say_hello();
-        register_nav_links();
+            import {register_nav_links} from "/static/index.js";
+            register_nav_links();
         </script>
 </body>
 </html>