style: add consistent button and fancy link hover effects

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;
   }
 
-  /* 
+  /* Button & Link Components */
-     Typography (Prose) Customization
+  .btn-primary {
-     We explicitly set the internal prose variables to our theme variables.
+    @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);

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}}

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>