From 00c8b5678e9b0728e48465eb89eb29a4234d0f37 Mon Sep 17 00:00:00 2001
From: tijl <contact@tijl.dev>
Date: Thu, 5 Sep 2024 00:06:08 +0200
Subject: [PATCH] new UI theming

---
 tailwind.config.ts           |  9 +++--
 web/lib/main.css             |  6 +++
 web/views/blog.html          |  2 +-
 web/views/layouts/base.html  |  2 +-
 web/views/partials/menu.html | 10 +++--
 web/views/services.html      | 73 +++++++++++++++++++-----------------
 6 files changed, 58 insertions(+), 44 deletions(-)

diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0ffabe5..6c92f84 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -15,15 +15,18 @@ module.exports = {
 					secondary: "#804df3", // #804df3
 					accent: "#66c4fa", // #66c4fa
 					neutral: "#f7931a", // #212121
-					"base-100": "#181818", // previously 171717
-					"base-200": "#151515", // previously 151515
-					"base-300": "#101010", // previously 121212
+					//"base-100": "#181818", // previously 171717
+					"base-100": "#0B0908",
+					"base-200": "#0B0908", // previously 151515
+					"base-300": "#121212", // previously 121212
 					info: "#0ea5e9",
 					success: "#22c55e",
 					warning: "#FBBD23",
 					error: "#ef4444",
 
 					"--rounded-btn": "0.75rem",
+					"--border-btn": "2px",
+					"--tab-border": "2px",
 					//"--btn-text-case": "uppercase",
 				},
 			},
diff --git a/web/lib/main.css b/web/lib/main.css
index 8660fa5..a45e637 100644
--- a/web/lib/main.css
+++ b/web/lib/main.css
@@ -2,6 +2,12 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+@layer components {
+    .btn:not(.btn-ghost) {
+        @apply border-base-300 border-2 ;
+    }
+}
+
 @layer base {
     *, html {
         font-family: "Cantarell", "CantarellVF", sans-serif;
diff --git a/web/views/blog.html b/web/views/blog.html
index b4257c5..d2b0aad 100644
--- a/web/views/blog.html
+++ b/web/views/blog.html
@@ -2,7 +2,7 @@
     <div class="grid gap-4">
         {{range .Posts}}
         <a href="/blog/{{.Meta.Slug}}"
-            class="card posts-item bg-base-300 hover:bg-base-100 border-[2px] border-base-200 shadow-xl cursor-pointer">
+            class="card posts-item bg-base-100 border-[2px] border-base-300 shadow-xl cursor-pointer">
             <div class="card-body">
                 <header class="card-title">
                     <h2 class="card-title text-2xl">{{.Meta.Title}}</h2>
diff --git a/web/views/layouts/base.html b/web/views/layouts/base.html
index 9efc18f..e7a4341 100644
--- a/web/views/layouts/base.html
+++ b/web/views/layouts/base.html
@@ -16,7 +16,7 @@
     <header>
         {{template "partials/menu" .}}
     </header>
-    <main id="main-content" class="mx-6 pt-24 pb-4">
+    <main id="main-content" class="mx-4 pt-24 pb-4">
         {{embed}}
     </main>
 </body>
diff --git a/web/views/partials/menu.html b/web/views/partials/menu.html
index 8c56b43..3c0c236 100644
--- a/web/views/partials/menu.html
+++ b/web/views/partials/menu.html
@@ -1,5 +1,5 @@
 <nav hx-boost="true" class="z-[100] flex fixed mx-auto w-full md:w-[80%] lg:w-[75%]">
-    <div class="mt-4 mx-4 rounded-2xl shadow-xl bg-base-300 navbar">
+    <div class="mt-4 mx-4 rounded-2xl shadow-xl bg-base-100 border-base-300 border-[2px] navbar">
         <div class="flex-1">
             <a href="/" class="btn btn-ghost font-mono text-xl">tijl.dev</a>
         </div>
@@ -12,7 +12,8 @@
                             d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
                     </svg>
                 </summary>
-                <ul class="mt-3 z-[101] menu dropdown-content bg-base-300 rounded-box w-52 p-3 shadow-xl gap-1">
+                <ul
+                    class="mt-2 z-[101] menu dropdown-content bg-base-100 border-2 border-base-300 border-t-none rounded-t-none rounded-box w-52 p-3 shadow-xl gap-1">
                     <li>
                         <a class='flex gap-4 {{if eq .Path "/"}}active{{end}}' href="/">
                             <span class="w-5 text-center">
@@ -57,7 +58,7 @@
                     </li>
                     <li class="flex-none">
                         <details class="dropdown">
-                            <summary><button class="flex gap-4">
+                            <summary><button type="menu" class="flex gap-4">
                                     <span class="w-5 text-center">
                                         {{icon "language"}}
                                     </span>
@@ -65,7 +66,8 @@
                                 </button>
                             </summary>
 
-                            <ul class="menu dropdown-content z-[102] bg-base-200 rounded-box w-48 p-3 shadow-xl gap-1">
+                            <ul
+                                class="menu dropdown-content z-[102] bg-base-100 border-2 border-base-300 rounded-box w-48 p-3 shadow-xl gap-1">
                                 <li>
                                     <a class='flex gap-4 {{if eq .Language "en"}}active{{end}}'
                                         href="/settings?lang=en&redirect={{.Path}}">
diff --git a/web/views/services.html b/web/views/services.html
index fda7758..de9691b 100644
--- a/web/views/services.html
+++ b/web/views/services.html
@@ -1,40 +1,43 @@
-<div class="prose mb-4">
-    <h1 class="m-0">Service's</h1>
-    <hr class="m-0 w-full" />
-</div>
-
-<div class="mt-4 flex justify-center">
-    <div class="flex gap-2">
-        {{range .Services}}
-        <a href="#{{.Slug}}" id="service-{{.Slug}}" class="group"
-            onmouseover="this.querySelector('img').style.transform='scale({{incfloat .Scale 1.1}})';"
-            onmouseout="this.querySelector('img').style.transform='scale({{incfloat .Scale 1}})';">
-            <div class="relative w-24 h-24 rounded-2xl rounded-3xl shadow-2xl" style="background-color: {{.Color}};">
-                <div class="absolute inset-0 flex items-center justify-center">
-                    <img alt="{{.Name}} logo"
-                        class="text-white transform transition-transform duration-300 drop-shadow-2xl"
-                        style="transform: scale({{incfloat .Scale 1}});" src="/static/assets/{{.Slug}}.svg" />
-                </div>
-            </div>
-            <div id="service-{{.Slug}}-label" class="w-24 text-center mt-2 rounded-2xl rounded-b-none py-1">
-                {{.Name}}
-            </div>
-        </a>
-        {{end}}
+<div class="mx-2">
+    <div class="prose mb-4">
+        <h1 class="m-0">Service's</h1>
+        <hr class="m-0 w-full" />
     </div>
-</div>
 
-<div class="card bg-base-300" id="services-info">
-    {{range .Services}}
-    <div class="card-body hidden" id="service-{{.Slug}}-info">
-        <h2 class="card-title">{{.Name}}</h2>
-        <p>{{.Description}}</p>
-        <div class="card-actions justify-end">
-            <a href="/service/{{.Slug}}/info" class="btn bg-base-300">Info</a>
-            <a href="/service/{{.Slug}}" class="btn btn-primary">Open</a>
+    <div class="z-[99] mt-4 flex justify-center">
+        <div class="flex gap-2">
+            {{range .Services}}
+            <a href="#{{.Slug}}" id="service-{{.Slug}}" class="group"
+                onmouseover="this.querySelector('img').style.transform='scale({{incfloat .Scale 1.1}})';"
+                onmouseout="this.querySelector('img').style.transform='scale({{incfloat .Scale 1}})';">
+                <div class="relative w-24 h-24 rounded-3xl shadow-2xl" style="background-color: {{.Color}};">
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <img alt="{{.Name}} logo"
+                            class="text-white transform transition-transform duration-300 drop-shadow-2xl"
+                            style="transform: scale({{incfloat .Scale 1}});" src="/static/assets/{{.Slug}}.svg" />
+                    </div>
+                </div>
+                <div id="service-{{.Slug}}-label"
+                    class="w-24 text-center mt-2 -mb-[2px] border-2 border-base-300 rounded-2xl rounded-b-none py-1">
+                    {{.Name}}
+                </div>
+            </a>
+            {{end}}
         </div>
     </div>
-    {{end}}
+
+    <div class="bg-base-100 rounded-2xl border-base-300 border-2" id="services-info">
+        {{range .Services}}
+        <div class="card-body hidden" id="service-{{.Slug}}-info">
+            <h2 class="card-title">{{.Name}}</h2>
+            <p>{{.Description}}</p>
+            <div class="card-actions justify-end">
+                <a href="/service/{{.Slug}}/info" class="btn">Info</a>
+                <a href="/service/{{.Slug}}" class="btn btn-primary">Open</a>
+            </div>
+        </div>
+        {{end}}
+    </div>
 </div>
 
 <script>
@@ -47,10 +50,10 @@
                         element.classList.remove("hidden")
                         setTimeout(() => {
                             document.querySelectorAll('a[id^="service-"]').forEach(button2 => {
-                                document.getElementById("service-" + button2.id.slice(8) + "-label").classList.remove("bg-base-300")
+                                document.getElementById("service-" + button2.id.slice(8) + "-label").classList.remove("border-b-base-100")
                                 button2.href = "#" + button2.id.slice(8)
                             })
-                            document.getElementById("service-" + button.id.slice(8) + "-label").classList.add("bg-base-300")
+                            document.getElementById("service-" + button.id.slice(8) + "-label").classList.add("border-b-base-100")
                             button.href = "/service/" + button.id.slice(8)
                         }, 0)
                     } else {