gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle blockquotes with academic flair

Browse Source
This commit is contained in:
gbanyan
2025-11-19 00:47:28 +08:00
parent af0d2e3a6c
commit 82a459bede
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
styles/globals.css
View File

@@ -36,12 +36,35 @@ body {
/* Subtle hover for article elements */
.prose blockquote {
@apply transition-transform transition-shadow duration-180 ease-snappy;
border-left: 4px solid var(--color-accent, #2563eb);
background: linear-gradient(135deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.08));
padding: 1.2rem 1.5rem;
font-style: italic;
color: rgba(15, 23, 42, 0.75);
position: relative;
}
.dark .prose blockquote {
background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.06));
color: rgba(226, 232, 240, 0.8);
border-left-color: rgba(96, 165, 250, 0.9);
}
.prose blockquote:hover {
@apply -translate-y-0.5 shadow-sm;
}
.prose blockquote::before {
content: '“';
position: absolute;
top: 0.5rem;
left: 0.8rem;
font-size: 3rem;
font-family: 'Times New Roman', 'Noto Serif TC', serif;
color: rgba(37, 99, 235, 0.25);
pointer-events: none;
}
.prose pre {
@apply transition-transform transition-shadow duration-180 ease-snappy;
}