feat: move like button to header to make it more prominent

fix: light hard and soft colors mismatch in lilac theme
refactor: use var for noise image in themes

5 files changed, 20 insertions, 21 deletions

diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 87f7946..97b412c 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -175,22 +175,22 @@
     <div class="flex flex-col [@media(max-height:32rem)]:flex-row">
         <div id="sidebar" class="bg-sidebar flex sticky flex-col z-20 w-dvw xs:w-[90dvw] sm:w-[80dvw] md:w-[75dvw] lg:w-[70dvw] xl:w-[65dvw] 2xl:w-[60dvw] [@media(max-height:32rem)]:w-fit h-fit [@media(max-height:32rem)]:h-dvh shadow-[0_0_1rem_black]">
             <div class="text-[3rem] flex flex-row [@media(max-height:32rem)]:flex-col gap-0 relative z-20">
-                <a onclick="return changeUrl('/../', true);" href="./" id="sidebar-back-button" class="toolbar-button w-fit h-fit hidden" draggable="false">
+                <a onclick="return changeUrl('/../', true);" href="./" id="sidebar-back-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
                     <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i>
                 </a>
-                <a onclick="return changeUrl('/{{ .Lang }}');" href="/{{ .Lang }}" id="sidebar-home-button" class="toolbar-button w-fit h-fit hidden" draggable="false">
+                <a onclick="return changeUrl('/{{ .Lang }}');" href="/{{ .Lang }}" id="sidebar-home-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
                     <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i>
                 </a>
-                <a onclick="return changeUrl('/{{ .Lang }}/blog');" href="/{{ .Lang }}/blog" id="sidebar-blog-button" class="toolbar-button w-fit h-fit hidden" draggable="false">
+                <a onclick="return changeUrl('/{{ .Lang }}/blog');" href="/{{ .Lang }}/blog" id="sidebar-blog-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
                     <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i>
                 </a>
-                <a href="/{{ .Lang }}/map" id="sidebar-map-button" class="toolbar-button w-fit h-fit hidden" draggable="false">
+                <a href="/{{ .Lang }}/map" id="sidebar-map-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
                     <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i>
                 </a>
-                <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="toolbar-button w-fit h-fit" draggable="false">
+                <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
                     <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i>
                 </div>
-                <a onclick="return changeUrl('/{{ .Lang }}/user');" href="/{{ .Lang }}/user" id="sidebar-user-button" class="toolbar-button w-fit h-fit hidden" draggable="false">
+                <a onclick="return changeUrl('/{{ .Lang }}/user');" href="/{{ .Lang }}/user" id="sidebar-user-button" class="themed-button themed-button-sidebar w-fit h-fit hidden" draggable="false">
                     <i class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i>
                 </a>
             </div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 6b6cd6b..f488d64 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -63,6 +63,6 @@
 </div>
 {{ end }}
 
-{{ define "footer" }}
+{{ define "header" }}
 <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
 {{ end }}
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 8961aab..52ea841 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -44,22 +44,22 @@
 
     <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-fit h-auto">
         <div class="text-[3rem] flex flex-col gap-0 relative z-1001">
-            <a href="./" class="toolbar-button w-fit h-fit" draggable="false">
+            <a href="./" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
                 <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i>
             </a>
-            <a href="/{{ .Lang }}" class="toolbar-button w-fit h-fit" draggable="false">
+            <a href="/{{ .Lang }}" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
                 <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i>
             </a>
-            <a href="/{{ .Lang }}/blog" class="toolbar-button w-fit h-fit" draggable="false">
+            <a href="/{{ .Lang }}/blog" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
                 <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i>
             </a>
-            <a href="/{{ .Lang }}/map" class="toolbar-button w-fit h-fit" draggable="false">
+            <a href="/{{ .Lang }}/map" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
                 <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i>
             </a>
-            <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="toolbar-button w-fit h-fit" draggable="false">
+            <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
                 <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i>
             </div>
-            <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="toolbar-button w-fit h-fit" draggable="false">
+            <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
                 <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i>
             </a>
         </div>
diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index 8d555da..8da52a6 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,6 +1,5 @@
-<button 
-    hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
-    class="text-sm/[0.9] shrink-0 font-andika text-left px-1 py-0.5 {{ if .Liked }}bg-main-soft hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-hard hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-2 border-background-dark">
-    <i class="fas fa-thumbs-up w-3 h-3"></i>
-    <span class="italic ml-0.5 text-background-light">({{ .LikedCount }})</span>
+<button hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
+    class="themed-button themed-button-like flex flex-col shrink-0 w-fit h-fit mr-2 my-auto{{ if .Liked }} active{{ end }}">
+    <i class="fas fa-thumbs-up w-8 h-fit py-0.5 content-center text-center"></i>
+    <div class="h-fit px-0.5 content-center bg-(--background-medium-color) text-(--main-hard-color)">{{ .LikedCount }}</div>
 </button>
\ No newline at end of file
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index 83a1058..e019d3b 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,5 +1,5 @@
 <title>{{ .Title }} // SAYA TODAY</title>
 <div class="flex flex-row mb-2">
-    <p class="text-4xl font-andika font-light italic text-shadow-[0_2px_2px_var(--main-soft-color)] text-left mt-auto">{{ .Title }}</p>
-</div>
-{{ block "header" . }}{{ end }}
+    {{ block "header" . }}{{ end }}
+    <p class="text-4xl font-andika font-light italic text-shadow-[0_2px_2px_var(--main-soft-color)] text-left my-auto">{{ .Title }}</p>
+</div>
\ No newline at end of file