added dashboard cards

web/dashboard.templ

@@ -4,15 +4,24 @@ templ dashboard() {
     <title>Dashboard</title>
     <div class="container"> 
         <div class="row">
-            <div class="c-crust col my-auto" style="width:40%;height:100px;">
+            <div class="c-crust col card mx-auto cr-all">
-                <div class="c-mantle w-full">
+                <div class="c-s0 d-flex w-full cr-top">
-                    <p class="m-0">Back</p>
+                    <i class="my-auto py-3 ps-3 ms-1" data-feather="arrow-left"></i>
+                    <i class="my-auto py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
                 </div>
                 
             </div>
-            <div class="c-crust col my-auto" style="width:40%;height:100px;">
+            <div class="c-crust col card mx-auto cr-all">
-                
+                <div class="c-s0 d-flex w-full cr-top">
+                    <i class="my-auto py-3 ps-3 ms-1" data-feather="arrow-left"></i>
+                    <i class="my-auto py-3 pe-3 me-1 ms-auto" data-feather="arrow-right"></i>
+                </div>
             </div>
         </div>
+        <div class="row">
+            <table>
+
+            </table>
+        </div>
     </div>
 }

web/sass/site.scss

@@ -4,9 +4,10 @@ $prefix: pf;
 
 // highlight transition speed
 $hl-trn-spd: 0.2s;
+$border-radius: 8px;
 
+@import 'utility-classes';
 @import 'mixins';
-
 @import 'nav';
 
 
@@ -14,19 +15,6 @@ body {
     background-color: var(--#{$prefix}-bg);
 }
 
-w-full {
-    width: 100%;
-}
-.d-flex {
-    display: flex;
-}
-.my-auto {
-    margin-left: auto;
-    margin-right: auto;
-}
-.m-0 {
-    margin: 0px;
-}
 
 .container {
     width: 100%;
@@ -41,6 +29,24 @@ w-full {
 
 .col {
     box-sizing: border-box;
+    margin-top: 20px;
+    width: clamp(300px, 80%, 450px);
+}
+.card {
+    aspect-ratio: 16 / 12;
+}
+@media (min-width: 1362px) {
+    .card-table {
+        box-sizing: border-box;
+        width: clamp(300px, 80%, 450px);
+    }
+}
+@media (max-width: 1362px) {
+    .card-table {
+        box-sizing: border-box;
+        margin-left: 10%;
+        margin-right: 10%;
+    }
 }
 
 div#left-col {

web/sass/utility-classes.scss

@@ -0,0 +1,79 @@
+$sizes: (
+    "auto": auto,
+    "0": 0px,
+    "1": 2px,
+    "2": 5px,
+    "3": 8px,
+    "4": 10px,
+    "5": 15px
+);
+$directions: (
+    "s": "left",
+    "e": "right",
+    "t": "top",
+    "b": "bottom"
+);
+
+@each $size, $val in $sizes {
+    .m-#{$size} {
+        margin: $val;
+    }
+    @each $dir, $dir-val in $directions {
+        .m#{$dir}-#{$size} {
+            margin-#{$dir-val}: $val;
+        }
+        .p#{$dir}-#{$size} {
+            padding-#{$dir-val}: $val;
+        }
+
+    }
+    .mx-#{$size} {
+        margin-left: $val;
+        margin-right: $val;
+    }
+    .my-#{$size} {
+        margin-top: $val;
+        margin-right: $val;
+    }
+    .px-#{$size} {
+        padding-left: $val;
+        padding-right: $val;
+    }
+    .py-#{$size} {
+        padding-top: $val;
+        padding-bottom: $val;
+    }
+}
+.my-auto {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+.mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.w-full {
+    width: 100%;
+}
+.w-50 {
+    width: 50%;
+}
+.d-flex {
+    display: flex;
+}
+.cr-all {
+    border-radius: $border-radius;
+}
+.cr-top {
+    border-radius: $border-radius $border-radius 0px 0px;
+}
+.cr-right {
+    border-radius: 0px $border-radius $border-radius 0px;
+}
+.cr-left {
+    border-radius: $border-radius 0px 0px $border-radius;
+}
+.cr-bottom {
+    border-radius: 0px 0px $border-radius $border-radius;
+}

web/sass/variables.scss

@@ -6,6 +6,8 @@
         --#{$prefix}-crust: #{map-get($color, 'crust')};
         --#{$prefix}-mantle: #{map-get($color, 'mantle')};
         --#{$prefix}-surface0: #{map-get($color, 'surface0')};
+        --#{$prefix}-surface1: #{map-get($color, 'surface1')};
+        --#{$prefix}-text: #{map-get($color, 'text')};
 
         --#{$prefix}-nav-bg: #{map-get($color, 'crust')};
         --#{$prefix}-nav-color: #{map-get($color, 'text')};
@@ -16,9 +18,15 @@
     }
 }
 
+.c-text {
+    color: var(--#{$prefix}-text);
+}
 .c-s0 {
     background-color: var(--#{$prefix}-surface0);
 }
+.c-s1 {
+    background-color: var(--#{$prefix}-surface1);
+}
 .c-crust {
     background-color: var(--#{$prefix}-crust);
 }

web/templates/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/static/site.css">
     <script src="/static/htmx.min.js"></script>
+    <script src="/static/feather.min.js"></script>
 </head>
 <body class="latte">
     <header>
@@ -61,6 +62,7 @@
         <script type="module">
             import {register_nav_links} from "/static/index.js";
             register_nav_links();
+            feather.replace();
         </script>
 </body>
 </html>