From 1776fd1e933209deebbaf3bc6d49c83768f104a6 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Tue, 19 May 2026 02:46:22 +0700
Subject: feat: smooth rem transition through screen size change (also zoom
 more) feat: add elevation to accent buttons feat: make blog catalogue buttons
 accent feat: redo shadowing & inset shadowing feat: add edge blur for
 thumbnails feat: replace most px units with rem units feat: inset shadow
 elevation attributes feat: remove most dotted borders fix: path validating in
 get like handler feat: add left padding to radio buttons in blog catalogue

---
 views/partials/blog-page-like-button.html | 6 +++---
 views/partials/catalogue-blog-cards.html  | 8 ++++----
 views/partials/general-page-header.html   | 2 +-
 views/partials/personal-page-status.html  | 2 +-
 4 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'views/partials')

diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index af668e6..50ceae9 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,5 +1,5 @@
 <button hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
-    class="accent-button rounded-xl flex flex-row shrink-0 w-fit h-full mx-2 my-auto{{ if .Liked }} active{{ end }}">
+    class="accent-button rounded-xl relative shrink-0 w-fit aspect-square mr-4 p-2 my-auto{{ if .Liked }} active{{ end }}">
     {{ if .Liked }}
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Like-Hand-1--Streamline-Freehand" class="h-10">
         <desc>
@@ -12,7 +12,7 @@
             <path d="M13.94 4.33a2.57 2.57 0 0 1 1.43 0.88 4.52 4.52 0 0 1 1 1.54 0.57 0.57 0 0 0 0.56 0.37 0.57 0.57 0 0 0 0.53 -0.41 2.81 2.81 0 0 1 1 -1.41 6.9 6.9 0 0 1 1.69 -1 0.49 0.49 0 0 0 0.31 -0.43 0.5 0.5 0 0 0 -0.24 -0.47 8.18 8.18 0 0 1 -2.26 -1.47 2.39 2.39 0 0 1 -0.71 -1.46 0.34 0.34 0 0 0 -0.34 -0.34 0.35 0.35 0 0 0 -0.34 0.35 0.29 0.29 0 0 0 -0.27 0.23 4.41 4.41 0 0 1 -1 1.63 3.53 3.53 0 0 1 -1.48 1 0.47 0.47 0 0 0 -0.32 0.5 0.48 0.48 0 0 0 0.44 0.49Zm2 -1.47a5.53 5.53 0 0 0 0.82 -1.44 3.34 3.34 0 0 0 0.59 1 6.91 6.91 0 0 0 1.53 1.3 5.93 5.93 0 0 0 -1.48 1 6.91 6.91 0 0 0 -0.51 0.57 4.8 4.8 0 0 0 -0.7 -0.85 4 4 0 0 0 -1 -0.74 5.76 5.76 0 0 0 0.71 -0.84Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
         </g>
     </svg>
-    <div class="ml-auto bg-accent-light rounded-full w-6 h-6 text-main! font-m-plus! font-normal! tracking-normal! not-italic! text-lg!">{{ .LikedCount }}</div>
+    <div class="absolute left-10 -top-2 bg-accent-light rounded-full w-6 h-6 text-main! font-m-plus! font-normal! tracking-normal! not-italic! text-lg!">{{ .LikedCount }}</div>
     {{ else }}
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Like-Hand--Streamline-Freehand" class="h-10">
         <desc>
@@ -23,6 +23,6 @@
             <path d="M3.53 9.34a2.22 2.22 0 0 0 -1.24 -0.88 5.37 5.37 0 0 0 -2 -0.26 0.3 0.3 0 0 0 -0.29 0.31 0.3 0.3 0 0 0 0.32 0.29 4.36 4.36 0 0 1 1.44 0.25 1.74 1.74 0 0 1 1 0.69A9.16 9.16 0 0 1 3 11.8c0 0.64 0.06 1.38 0.09 2.14 0 1.07 0.08 2.2 0.11 3.22s0.06 2.19 0 2.84c0 0.23 -0.12 0.45 -0.07 0.51A2.7 2.7 0 0 1 2 21a3.34 3.34 0 0 1 -1.49 0 0.34 0.34 0 0 0 -0.22 0.65 4.22 4.22 0 0 0 1.82 0.13 3.37 3.37 0 0 0 1.79 -0.69 1.82 1.82 0 0 0 0.26 -0.82 37.13 37.13 0 0 0 0.14 -5.13c0 -1 -0.1 -2 -0.19 -2.83a12.48 12.48 0 0 0 -0.58 -2.97Z" fill="var(--color-accent-deep)" fill-rule="evenodd" stroke-width="1"></path>
         </g>
     </svg>
-    <div class="ml-auto bg-accent-deep rounded-full w-6 h-6 text-background! font-m-plus! font-normal! tracking-normal! not-italic! text-lg!">{{ .LikedCount }}</div>
+    <div class="absolute left-10 -top-2 bg-accent-deep rounded-full w-6 h-6 text-background! font-m-plus! font-normal! tracking-normal! not-italic! text-lg!">{{ .LikedCount }}</div>
     {{ end }}
 </button>
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index b066a9e..6466262 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,7 +1,7 @@
 {{- range .BlogPages }}
-<hr class="first-of-type:hidden border-t-2 border-dotted border-main-hard">
-<div {{ if .ToHighlight }}id="blog-page-highlighted"{{ end }} class="w-full flex flex-row items-stretch {{ if .ToHighlight }}bg-accent-light bg-paper{{ end }}">
-    <div class="relative min-h-24 flex flex-col w-28 overflow-hidden shrink-0 mask-r-from-70% mask-r-to-100%">
+<hr class="first-of-type:hidden border-t-[0.375rem] my-1 w-24 mx-auto border-dotted border-main-hard">
+<div {{ if .ToHighlight }}id="blog-page-highlighted"{{ end }} class="w-full flex flex-row items-stretch mask-t-from-[calc(100%-0.5rem)] mask-t-to-100% mask-b-from-[calc(100%-0.5rem)] mask-b-to-100% {{ if .ToHighlight }}bg-accent-light bg-paper{{ end }}">
+    <div class="relative min-h-24 flex flex-col w-32 overflow-hidden shrink-0 mask-r-from-[calc(100%-1rem)] mask-r-to-100%">
         <img onclick="return changeUrl('{{ .ArticleLink }}');" class="h-full min-h-24 w-full cursor-pointer select-none object-cover block absolute" src="{{ printf $.PhotoStorage.Thumbnail320p.BaseUrl .Thumbnail }}">
         <div class="w-full h-6 flex flex-row mt-auto relative">
             <div class="flex-1/2 flex flex-row justify-center select-none bg-linear-180 {{ if .Liked }}from-accent-deep/40 to-accent-deep/80 text-background-dark{{ else }}from-accent-light/40 to-accent-light/80 text-main-hard{{ end }}">
@@ -14,7 +14,7 @@
             </div>
         </div>
     </div>
-    <div class="grow w-full h-fit flex flex-col justify-center my-auto py-1 px-1">
+    <div class="grow w-full h-fit flex flex-col justify-center my-auto py-1 px-2">
         <div class="flex flex-row gap-2 max-w-full">
             <a href="{{ .ArticleLink }}" onclick="return changeUrl('{{ .ArticleLink }}');" class="grow-2 text-base cursor-pointer font-m-plus">
                 <span class="font-extrabold">{{ .Title }}</span>
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index 3b8a6c8..ce77b5c 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -2,7 +2,7 @@
 <div class="flex flex-row mb-2">
     {{ block "header" . }}{{ end }}
     <h1
-        class="text-4xl font-m-plus font-bold italic text-shadow-[0_2px_2px_var(--color-main-soft)] text-left my-auto"
+        class="text-4xl font-m-plus font-bold italic text-shadow-[0_0.125rem_0.125rem_var(--color-main-soft)] text-left my-auto"
     >
         {{ .Title }}
     </h1>
diff --git a/views/partials/personal-page-status.html b/views/partials/personal-page-status.html
index 078fb24..41033a9 100644
--- a/views/partials/personal-page-status.html
+++ b/views/partials/personal-page-status.html
@@ -1,4 +1,4 @@
-<div id="{{ .StatusId }}" class='z-26 w-full inset-shadow-[0_0_0.4rem_black]
+<div id="{{ .StatusId }}" class='z-26 w-full inset-shadow-elevation-6
     {{if eq .Status "OK"}}bg-green-700 text-green-100
     {{else if eq .Status "Failed"}}bg-red-700 text-red-100
     {{else}}bg-paper bg-background-dark text-main-soft{{end}}
-- 
cgit v1.3.1+13