SebinNyshkim/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: ♻️ move blockquote styles from layout to main css file

Browse source 
Excessive use of the prose- prefix bloats the resulting CSS bundle and makes styles rather hard to maintain
This commit is contained in:
Sebin Nyshkim 2025-06-04 16:43:03 +02:00
parent ff3c0fb23a
commit ce7de30e5c
2 changed files with 10 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/css/style.css
View file

@ -40,6 +40,15 @@ h6 {
font-family: var(--font-heading); font-family: var(--font-heading);
} }
blockquote {
@apply relative mt-10 rounded-xl border-2 border-sky-500 ps-6 pe-6 font-normal text-slate-700 not-italic *:before:content-none *:after:content-none lg:ps-8 lg:pe-8 2xl:ps-10 2xl:pe-10 dark:text-slate-300;
&::before {
@apply absolute -top-8 left-4 block h-12 w-20 bg-slate-300 text-center text-8xl leading-none font-bold text-slate-300 not-italic content-['“'] dark:bg-slate-900 dark:text-slate-900;
-webkit-text-stroke: var(--color-sky-600) 0.25rem;
}
}
pre, pre,
code { code {
font-family: var(--font-monospace); font-family: var(--font-monospace);

2
src/layouts/blogpost.njk
View file

@ -31,7 +31,7 @@ layout: base.njk
</div> </div>
</header> </header>
<section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-blockquote:relative prose-blockquote:border-0 prose-blockquote:ps-16 prose-blockquote:font-normal prose-blockquote:text-slate-700 prose-blockquote:not-italic prose-blockquote:before:absolute prose-blockquote:before:top-0 prose-blockquote:before:left-0 prose-blockquote:before:-z-10 prose-blockquote:before:h-[1em] prose-blockquote:before:text-8xl prose-blockquote:before:leading-none prose-blockquote:before:font-bold prose-blockquote:before:text-sky-500 prose-blockquote:before:not-italic prose-blockquote:before:content-['“'] prose-blockquote:*:before:content-none prose-blockquote:*:after:content-none lg:prose-blockquote:ps-20 lg:prose-blockquote:before:text-9xl 2xl:prose-blockquote:ps-24 2xl:prose-blockquote:before:text-[10rem] prose-blockquote:dark:text-slate-300 prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl"> <section class="mx-auto prose px-safe-offset-4 prose-slate md:prose-lg md:px-safe-offset-6 lg:prose-xl 2xl:prose-2xl dark:prose-invert prose-headings:font-normal prose-p:text-justify prose-figcaption:text-center prose-figcaption:text-balance prose-strong:font-bold prose-strong:text-inherit prose-li:marker:text-inherit! prose-th:font-bold prose-img:mx-auto prose-img:rounded-3xl">
{{ content | safe }} {{ content | safe }}
</section> </section>
</article> </article>