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;