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

src/css/modules/buttons.css

@@ -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;
-}

src/css/modules/details.css

@@ -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;
-}

src/css/modules/navigation.css

@@ -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;
-}

src/css/modules/pagination.css

@@ -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;
-}

src/css/modules/postmeta.css

@@ -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;
-}

src/css/modules/tags.css

@@ -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;
-}

src/css/style.css

@@ -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;

src/layouts/base.njk

@@ -34,9 +34,9 @@
             collections.all |
             eleventyNavigation |
             eleventyNavigationToHtml({
-              listClass: "nav-list",
+              listClass: "mx-3 flex gap-2 md:mx-6 md:gap-3",
-              anchorClass: "nav-link",
+              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: "active",
+              activeAnchorClass: "bg-sky-900 shadow-lg dark:bg-sky-800",
               activeKey: eleventyNavigation.key or page.url.split('/')[1]
             }) |
             safe

src/layouts/blogpost.njk

@@ -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>

src/layouts/page.njk

@@ -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>

src/layouts/postlist.njk

@@ -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>

src/posts.njk

@@ -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>