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

refactor: ♻️ make less use of @apply to reduce resulting css bundle size

Browse source
This commit is contained in:
Sebin Nyshkim 2024-10-15 21:43:55 +02:00
parent 7b2e1b14b3
commit 9f7387c54b
12 changed files with 25 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/css/modules/buttons.css
View file

@ -1,3 +0,0 @@
.read-more-button {
@apply inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 text-lg font-bold text-white no-underline transition-colors duration-300 hover:bg-sky-700;
}

11
src/css/modules/details.css
View file

@ -1,11 +0,0 @@
details {
@apply rounded-lg border border-solid border-sky-500 text-sky-500;
}
details[open] summary {
@apply rounded-none rounded-t-lg;
}
summary {
@apply rounded-lg bg-sky-200 p-4;
}

11
src/css/modules/navigation.css
View file

@ -1,11 +0,0 @@
.eleventy-navigation .nav-list {
@apply mx-3 flex gap-2 md:mx-6 md:gap-3;
}
.eleventy-navigation .nav-link {
@apply rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800;
}
.eleventy-navigation a.active {
@apply bg-sky-900 shadow-lg dark:bg-sky-800;
}

20
src/css/modules/pagination.css
View file

@ -1,20 +0,0 @@
.pagination {
@apply flex justify-center gap-2;
}
.pagination a,
.pagination span {
@apply flex size-10 items-center justify-center rounded-full;
}
.pagination [aria-current] {
@apply text-slate-300 bg-sky-600 dark:bg-slate-700;
}
.pagination a {
@apply bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700;
}
.pagination span {
@apply cursor-not-allowed bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700;
}

15
src/css/modules/postmeta.css
View file

@ -1,15 +0,0 @@
.postmeta {
@apply flex flex-wrap items-center gap-4;
}
.postmeta > * {
@apply inline-flex items-center gap-1;
}
.postmeta a {
@apply hover:text-sky-400;
}
.postmeta svg {
@apply stroke-sky-600 dark:stroke-sky-600;
}

7
src/css/modules/tags.css
View file

@ -1,7 +0,0 @@
.tags {
@apply flex gap-1;
}
.tags .tag {
@apply inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500;
}

12
src/css/style.css
View file

@ -1,10 +1,4 @@
@import url(modules/buttons.css);
@import url(modules/callouts.css);
@import url(modules/details.css);
@import url(modules/navigation.css);
@import url(modules/pagination.css);
@import url(modules/postmeta.css);
@import url(modules/tags.css);
@tailwind base;
@tailwind components;
@ -30,13 +24,13 @@ h6 {
font-variation-settings: 'XROT' 0, 'YROT' 0;
}
a:not(.nav-link, .read-more-button) {
a:not(nav a, .button) {
@apply font-normal text-inherit underline decoration-sky-600 decoration-2 underline-offset-4 transition-colors duration-300 hover:text-sky-600;
}
.blogpost {
/* .blogpost {
@apply prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl;
}
} */
.footnote-item:target p {
@apply bg-slate-200 dark:bg-sky-950;

6
src/layouts/base.njk
View file

@ -34,9 +34,9 @@
collections.all |
eleventyNavigation |
eleventyNavigationToHtml({
listClass: "nav-list",
anchorClass: "nav-link",
activeAnchorClass: "active",
listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3",
anchorClass: "rounded-xl px-4 py-2 text-base sm:text-lg md:text-xl capitalize text-white transition-all duration-300 hover:bg-sky-900 hover:shadow-lg md:m-0 md:max-h-12 hover:dark:bg-sky-800",
activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800",
activeKey: eleventyNavigation.key or page.url.split('/')[1]
}) |
safe

8
src/layouts/blogpost.njk
View file

@ -2,10 +2,10 @@
layout: base.njk
---
<article class="blogpost">
<article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
<h1 class="text-4xl">{{ title }}</h1>
<aside class="not-prose space-y-4 text-base">
<ul class="postmeta">
<ul class="flex flex-wrap items-center gap-4 *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600">
<li>
{% lucide "calendar", {"size": "20"} %}
<time datetime="{{ page.date | isoDate }}" title="{{ page.date | longDate }}">
@ -22,9 +22,9 @@ layout: base.njk
</li>
</ul>
{% if tags.length > 0 %}
<ul class="tags">
<ul class="flex gap-1">
{% for tag in tags %}
<li class="tag">
<li class="inline-flex items-center gap-1 rounded-md border border-solid border-sky-500 bg-sky-200 px-1.5 py-0.5 text-sky-500 dark:border-sky-500 dark:bg-sky-950 dark:text-sky-500">
{% lucide "tag", {"size": "20"} %}
{{ tag }}
</li>

2
src/layouts/page.njk
View file

@ -2,6 +2,6 @@
layout: base.njk
---
<section class="blogpost">
<section class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
{{ content | safe }}
</section>

22
src/layouts/postlist.njk
View file

@ -2,7 +2,7 @@
layout: base.njk
---
<section class="blogpost">
<section class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
<h1>{{ title }}</h1>
<p>Everything I have written, from newest to oldest.</p>
@ -12,24 +12,24 @@ layout: base.njk
{% if pagination.pages.length > 1 %}
<nav>
<ol class="pagination">
<ol class="flex justify-center gap-2">
<li>
{% if page.url != pagination.href.first %}
<a href="{{ pagination.href.first }}">{% lucide "chevron-first" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.first }}">{% lucide "chevron-first" %}</a>
{% else %}
<span>{% lucide "chevron-first" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-first" %}</span>
{% endif %}
</li>
<li>
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">{% lucide "chevron-left" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.previous }}">{% lucide "chevron-left" %}</a>
{% else %}
<span>{% lucide "chevron-left" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-left" %}</span>
{% endif %}
</li>
{%- for pageEntry in pagination.pages %}
<li>
<a
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 aria-[current]:bg-sky-600 aria-[current]:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700 aria-[current]:dark:bg-slate-700"
href="{{ pagination.hrefs[ loop.index0 ] }}"
{% if page.url == pagination.hrefs[ loop.index0 ] %}
aria-current="page"
@ -41,16 +41,16 @@ layout: base.njk
{%- endfor %}
<li>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">{% lucide "chevron-right" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.next }}">{% lucide "chevron-right" %}</a>
{% else %}
<span>{% lucide "chevron-right" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-right" %}</span>
{% endif %}
</li>
<li>
{% if page.url != pagination.href.last %}
<a href="{{ pagination.href.last }}">{% lucide "chevron-last" %}</a>
<a class="flex size-10 items-center justify-center rounded-full bg-slate-100 hover:bg-sky-600 hover:text-slate-300 dark:bg-slate-800 hover:dark:bg-slate-700" href="{{ pagination.href.last }}">{% lucide "chevron-last" %}</a>
{% else %}
<span>{% lucide "chevron-last" %}</span>
<span class="flex size-10 cursor-not-allowed items-center justify-center rounded-full bg-slate-400 text-slate-300 dark:bg-slate-950 dark:text-slate-700">{% lucide "chevron-last" %}</span>
{% endif %}
</li>
</ol>

6
src/posts.njk
View file

@ -12,10 +12,10 @@ pagination:
---
{% for post in blogposts %}
<article class="blogpost">
<article class="prose prose-slate mx-auto md:prose-lg lg:prose-xl dark:prose-invert prose-headings:font-normal prose-strong:text-inherit prose-li:marker:!text-inherit prose-th:font-bold prose-img:rounded-3xl">
<h1>{{ post.data.title }}</h1>
<aside class="not-prose space-y-4 text-base">
<ul class="postmeta">
<ul class="flex flex-wrap items-center gap-4 *:inline-flex *:items-center *:gap-1 *:*:stroke-sky-600">
<li>
{% lucide "calendar", {"size": "20"} %}
<time datetime="{{ post.date | isoDate }}" title="{{ post.date | longDate }}">
@ -39,7 +39,7 @@ pagination:
<p>{{ post.data.description }}</p>
<a href="{{ post.url }}" class="not-prose read-more-button">
<a href="{{ post.url }}" class="not-prose button inline-flex items-center gap-2 rounded-xl bg-sky-600 px-5 py-2 text-lg font-bold text-white no-underline transition-colors duration-300 hover:bg-sky-700">
Read on {% lucide "chevron-right", {"size":"20"} %}
</a>
</article>