From 7b9a760e67d704700947de046c56cf9bfdf4a77d Mon Sep 17 00:00:00 2001 From: Nickiel12 Date: Fri, 12 Jan 2024 21:59:19 -0800 Subject: [PATCH] style setup --- web/sass/mixins.scss | 9 +++++++++ web/sass/nav.scss | 30 ++++++++++++++++++++++++++++++ web/sass/site.scss | 18 ++++++++++++++++++ web/templates/index.html | 20 ++++++++++++++------ 4 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 web/sass/mixins.scss create mode 100644 web/sass/nav.scss diff --git a/web/sass/mixins.scss b/web/sass/mixins.scss new file mode 100644 index 0000000..396459e --- /dev/null +++ b/web/sass/mixins.scss @@ -0,0 +1,9 @@ +@mixin button_link() { + cursor: pointer; + background-color: transparent; + background-repeat: no-repeat; + border: none; + overflow: hidden; + outline: none; + border-radius: 5px; +} diff --git a/web/sass/nav.scss b/web/sass/nav.scss new file mode 100644 index 0000000..41ae196 --- /dev/null +++ b/web/sass/nav.scss @@ -0,0 +1,30 @@ +nav { + background-color: $nav-bg; + display: flex; + + ul { + margin: 0; + padding: 0; + list-style: none; + } + li { display: inline-block; } + + button.title { + color: $green; + } + button.active { + background-color: $nav-active-bg; + color: $nav-active-color; + } + button { + color: $nav-color; + display: block; + padding: 12px 24px; + text-decoration: none; + @include button_link; + } + button:hover { + background-color: $nav-hover; + } + +} diff --git a/web/sass/site.scss b/web/sass/site.scss index 8d2b15e..559f068 100644 --- a/web/sass/site.scss +++ b/web/sass/site.scss @@ -1,5 +1,23 @@ @import 'catpuccin'; +$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; } + +body.dark-mode { + $bg: $macchiato-base; + $nav-bg: $macchiato-crust; + $green: $macchiato-green; +} diff --git a/web/templates/index.html b/web/templates/index.html index 455c569..cf6dc8f 100644 --- a/web/templates/index.html +++ b/web/templates/index.html @@ -8,14 +8,22 @@ {{.Title}} -
- -
-

Hello World!

- +
+ +
+
+

Hello World!

+ -
+
+