style: add consistent button and fancy link hover effects
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user