style: add consistent button and fancy link hover effects
All checks were successful
Deploy Theme / deploy (push) Successful in 13s

This commit is contained in:
2026-02-20 09:33:22 +01:00
parent 0bfeb87a49
commit 332f4197a3
3 changed files with 25 additions and 6 deletions

View File

@@ -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);