From 332f4197a36a1dada0900d9ce1f447b8d4af20bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Fri, 20 Feb 2026 09:33:22 +0100
Subject: [PATCH] style: add consistent button and fancy link hover effects

---
 assets/css/tailwind.css | 27 +++++++++++++++++++++++----
 partials/footer.hbs     |  2 +-
 post.hbs                |  2 +-
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 8361991..972f924 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -83,10 +83,29 @@
     @apply text-[var(--text-primary)] text-3xl font-bold hover:text-[var(--brand-primary)] transition-colors duration-200;
   }
 
-  /* 
-     Typography (Prose) Customization
-     We explicitly set the internal prose variables to our theme variables.
-  */
+  /* Button & Link Components */
+  .btn-primary {
+    @apply inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm 
+           bg-[var(--brand-primary)] text-[var(--bg-primary)] hover:bg-[var(--brand-secondary)] 
+           hover:scale-105 active:scale-95 transition-all duration-200 cursor-pointer;
+  }
+
+  .fancy-link {
+    @apply font-medium transition-all duration-300 relative inline-block;
+    color: var(--brand-primary) !important;
+    text-decoration: none !important;
+    background-image: linear-gradient(var(--brand-primary), var(--brand-primary));
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    background-size: 0 1px;
+  }
+
+  .fancy-link:hover {
+    @apply text-[var(--text-primary)];
+    background-size: 100% 1px;
+  }
+
+  /* Typography (Prose) Customization */
   .prose {
     --tw-prose-body: var(--text-primary);
     --tw-prose-headings: var(--brand-primary);
diff --git a/partials/footer.hbs b/partials/footer.hbs
index af28e5b..9257724 100644
--- a/partials/footer.hbs
+++ b/partials/footer.hbs
@@ -8,7 +8,7 @@
             {{/if}}
         </a>
         <p class="text-sm text-[var(--text-secondary)] sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-[var(--bg-secondary)] sm:py-2 sm:mt-0 mt-4">
-            © {{date format="YYYY"}} {{@site.title}} — Created by <a href="https://pivoine.art" class="text-[var(--brand-primary)] hover:text-[var(--text-primary)] transition-colors duration-200 font-medium">Valknar</a>
+            © {{date format="YYYY"}} {{@site.title}} — Created by <a href="https://pivoine.art" class="fancy-link">Valknar</a>
         </p>
         <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
             {{#if @site.facebook}}
diff --git a/post.hbs b/post.hbs
index e07c854..ff05b1e 100644
--- a/post.hbs
+++ b/post.hbs
@@ -31,7 +31,7 @@
     </section>
 
     <footer class="mt-12 pt-8 border-t border-[var(--bg-tertiary)] text-center">
-        <a href="/" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-[var(--text-primary)] bg-[var(--brand-primary)] hover:bg-[var(--brand-secondary)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--brand-primary)] transition duration-200">
+        <a href="/" class="btn-primary">
             &larr; Back to Home
         </a>
     </footer>