feat: add beautiful initial-letter drop cap effect to content
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:
@@ -184,6 +184,18 @@
|
|||||||
.prose a:hover {
|
.prose a:hover {
|
||||||
background-size: 100% 1px;
|
background-size: 100% 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Initial Letter (Drop Cap) Effect */
|
||||||
|
.post-content > p:first-of-type::first-letter {
|
||||||
|
-webkit-initial-letter: 3 2;
|
||||||
|
initial-letter: 3 2;
|
||||||
|
color: var(--brand-primary);
|
||||||
|
@apply font-serif font-bold mr-4 float-left transition-colors duration-300;
|
||||||
|
/* Fallback for browsers that don't support initial-letter */
|
||||||
|
@supports not (initial-letter: 3) {
|
||||||
|
@apply text-7xl leading-[0.8] mt-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-logo {
|
.site-logo {
|
||||||
|
|||||||
Reference in New Issue
Block a user