From 9f7387c54b4789cb1b31468c975a1742019ec2f9 Mon Sep 17 00:00:00 2001 From: Sebin Nyshkim Date: Tue, 15 Oct 2024 21:43:55 +0200 Subject: [PATCH 001/154] refactor: :recycle: make less use of @apply to reduce resulting css bundle size --- src/css/modules/buttons.css | 3 --- src/css/modules/details.css | 11 ----------- src/css/modules/navigation.css | 11 ----------- src/css/modules/pagination.css | 20 -------------------- src/css/modules/postmeta.css | 15 --------------- src/css/modules/tags.css | 7 ------- src/css/style.css | 12 +++--------- src/layouts/base.njk | 6 +++--- src/layouts/blogpost.njk | 8 ++++---- src/layouts/page.njk | 2 +- src/layouts/postlist.njk | 22 +++++++++++----------- src/posts.njk | 6 +++--- 12 files changed, 25 insertions(+), 98 deletions(-) delete mode 100644 src/css/modules/buttons.css delete mode 100644 src/css/modules/details.css delete mode 100644 src/css/modules/navigation.css delete mode 100644 src/css/modules/pagination.css delete mode 100644 src/css/modules/postmeta.css delete mode 100644 src/css/modules/tags.css diff --git a/src/css/modules/buttons.css b/src/css/modules/buttons.css deleted file mode 100644 index ad6d615..0000000 --- a/src/css/modules/buttons.css +++ /dev/null @@ -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; -} diff --git a/src/css/modules/details.css b/src/css/modules/details.css deleted file mode 100644 index 075a7ff..0000000 --- a/src/css/modules/details.css +++ /dev/null @@ -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; -} diff --git a/src/css/modules/navigation.css b/src/css/modules/navigation.css deleted file mode 100644 index db9d084..0000000 --- a/src/css/modules/navigation.css +++ /dev/null @@ -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; -} diff --git a/src/css/modules/pagination.css b/src/css/modules/pagination.css deleted file mode 100644 index 55b6c74..0000000 --- a/src/css/modules/pagination.css +++ /dev/null @@ -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; -} diff --git a/src/css/modules/postmeta.css b/src/css/modules/postmeta.css deleted file mode 100644 index 524cafc..0000000 --- a/src/css/modules/postmeta.css +++ /dev/null @@ -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; -} diff --git a/src/css/modules/tags.css b/src/css/modules/tags.css deleted file mode 100644 index 643250b..0000000 --- a/src/css/modules/tags.css +++ /dev/null @@ -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; -} diff --git a/src/css/style.css b/src/css/style.css index 3db77db..2fabffe 100644 --- a/src/css/style.css +++ b/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; diff --git a/src/layouts/base.njk b/src/layouts/base.njk index 58ef43a..9828c08 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -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 diff --git a/src/layouts/blogpost.njk b/src/layouts/blogpost.njk index 4f96749..3bbd543 100644 --- a/src/layouts/blogpost.njk +++ b/src/layouts/blogpost.njk @@ -2,10 +2,10 @@ layout: base.njk --- -
+

{{ title }}