switched to css properties
This commit is contained in:
parent
f97b31093c
commit
9a14c89ba1
8 changed files with 212 additions and 154 deletions
|
|
@ -75,7 +75,7 @@
|
|||
default = pkgs.mkShell {
|
||||
buildInputs = with pkgs; [
|
||||
air # live go app reloading
|
||||
sass
|
||||
dart-sass
|
||||
go
|
||||
gopls
|
||||
gotools
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
114
web/sass/catppuccin.scss
Normal file
114
web/sass/catppuccin.scss
Normal file
|
|
@ -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
|
||||
)
|
||||
);
|
||||
|
|
@ -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
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
27
web/sass/variables.scss
Normal file
27
web/sass/variables.scss
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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";
|
||||
say_hello();
|
||||
import {register_nav_links} from "/static/index.js";
|
||||
register_nav_links();
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue