Use bundle plugin to bundle CSS

eleventy.config.js

@@ -22,6 +22,7 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.addPlugin(metagen);
     eleventyConfig.addPlugin(emojiReadTime);
+    eleventyConfig.addBundle("css");
 
     // Add content categories to a collection
     eleventyConfig.addCollection("categories", function(collectionApi) {

src/_includes/global/baselayout.njk

@@ -17,6 +17,7 @@
         <link rel="stylesheet" href="{{'/assets/css/' + sheet + '.css' | url | safe}}">
         {%- endfor -%}
     {% endif %}
+        <style>{% getBundle "css" %}</style>
 
         {# Fonts #}
         {% include "global/fontdefault.njk" %}

src/_includes/global/content.njk

@@ -86,7 +86,7 @@
     {% block shrineInfo %}{% endblock %}
 </content-wrapper>
 
-<style>
+{%- css %}
     .breadcrumbs {
         list-style-type: "";
         padding: 0;
@@ -118,11 +118,6 @@
         grid-template-areas: 'prev next';
     }
 
-    .blog__post--prev {
-        grid-area: prev;
-    }
-
-    .blog__post--next {
-        grid-area: next;
-    }
-</style>
+    .blog__post--prev { grid-area: prev; }
+    .blog__post--next { grid-area: next; }
+{% endcss %}

src/_includes/global/footer.njk

@@ -17,7 +17,7 @@
     {%- include "global/top-btn.njk" %}
 </footer>
 
-<style>
+{%- css %}
     :root { --footer-gap: 0.5em; }
 
     .footer {
@@ -40,4 +40,4 @@
 
     .footer__links { justify-self: center; }
     .footer__shrines { align-self: center; }
-</style>
+{% endcss %}

src/_includes/global/hero.njk

@@ -7,7 +7,7 @@
     </div>
 </header>
 
-<style>
+{%- css %}
     .hero {
         width: 100%;
         background-color: var(--clr-hero-bg);
@@ -32,9 +32,8 @@
         object-fit: contain;
         overflow: hidden;
         max-height: 16rem;
-        {% block heroDropShadowStyle %}{% endblock %}
     }
-</style>
+{% endcss %}
 
 <script>
     const hero = document.querySelector(".hero");

src/_includes/global/navbar.njk

@@ -36,7 +36,7 @@ https://kalechips.net/projects/snippets/burger #}
     </ul>
 </nav>
 
-<style>
+{%- css %}
     :root {
         --icon-burger: url(/assets/icons/burger.svg);
         --icon-close: url(/assets/icons/close.svg);
@@ -131,7 +131,7 @@ https://kalechips.net/projects/snippets/burger #}
             padding: 0;
         }
     }
-</style>
+{% endcss %}
 
 <script>
     const navbarBurger = document.querySelector(".navbar__burger");

src/_includes/global/pagination-oldnew.njk

@@ -57,7 +57,7 @@ Newer{% endset %}
     </ul>
 </nav>
 
-<style>
+{%- css %}
     .pagination__wrapper {
         display: grid;
         place-content: center;
@@ -100,7 +100,5 @@ Newer{% endset %}
         text-decoration: none;
     }
 
-    .pagination li a:focus {
-        outline: none;
-    }
-</style>
+    .pagination li a:focus { outline: none; }
+{% endcss %}

src/_includes/global/shrineinfo.njk

@@ -13,7 +13,7 @@
     </div>
 </aside>
 
-<style>
+{%- css %}
     .right-sidebar {
         background-color: var(--clr-content-bg);
         font-size: clamp(0.9rem, 0.9rem + 3vw, 1rem);
@@ -35,4 +35,4 @@
     }
 
     .shrine__info ul { margin-top: 0.5em; }
-</style>
+{% endcss %}

src/_includes/global/toc.njk

@@ -9,7 +9,7 @@
     </details-utils>
 </aside>
 
-<style>
+{%- css %}
     .toc__wrapper {
         max-height: 89vh;
         overflow-x: auto;
@@ -52,4 +52,4 @@
         padding: 0;
         font-size: 1rem;
     }
-</style>
+{% endcss %}

src/_includes/global/top-btn.njk

@@ -5,7 +5,7 @@
     Back to Top
 </a>
 
-<style>
+{%- css %}
     .top-btn,
     .top-btn:hover {
         color: var(--clr-top-btn-txt);
@@ -39,4 +39,4 @@
         stroke: currentColor;
         fill: currentColor;
     }
-</style>
+{% endcss %}

src/_includes/main/archive.njk

@@ -14,7 +14,7 @@
     {% endfor %}
 </ul>
 
-<style>
+{%- css %}
     .item-list {
         display: grid;
         gap: 1em;
@@ -26,4 +26,4 @@
         line-height: 1.3;
         margin-bottom: 0.2em;
     }
-</style>
+{% endcss %}

src/_includes/main/changelogs.njk

@@ -26,7 +26,7 @@ articleElement: true
 
 {{ content | safe }}
 
-<style>
+{%- css %}
     .changelog__nav,
     .changelog__nav--links {
         display: flex;
@@ -59,4 +59,4 @@ articleElement: true
             gap: 1em;
         }
     }
-</style>
+{% endcss %}

src/_includes/main/content-nav.njk

@@ -13,7 +13,7 @@
     </nav>
 </aside>
 
-<style>
+{%- css %}
     .content__nav {
         padding: 1.2em clamp(1em, 5%, 1.5em);
         background-color: var(--clr-content-bg);
@@ -22,4 +22,4 @@
     .content__nav--title {
         font-size: 1.7rem;
     }
-</style>
+{% endcss %}

src/_includes/main/hero.njk

@@ -4,9 +4,7 @@
     <img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.avif" alt="Banner of Leilukin's Hub">
 {% endblock %}
 
-{% block heroDropShadowStyle %}
-    filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
-{% endblock %}
+{%- css %}.hero img { filter: drop-shadow(0.1rem 0.1rem 0.2rem black); }{% endcss %}
 
 {% block eventScript %}
     const todayEvent = getTodayEvent();

src/_includes/main/statuscafe.njk

@@ -10,11 +10,7 @@
     <p><a href="https://status.cafe/users/leilukin">View my statuses on status.cafe</a></p>
 </div>
 
-<style>
-    #statuscafe-content {
-        margin: 0 0 0.5em 0;
-    }
-</style>
+{%- css %}#statuscafe-content { margin-bottom: 0.5em; }{% endcss %}
 
 <script>
     const statusCafeContent = document.getElementById("statuscafe-content");

src/_includes/main/support-me.njk

@@ -4,7 +4,7 @@
     <a href="https://ko-fi.com/A1042UH4"><img height="36" style="border:0px;" src="/assets/buttons/misc/ko-fi.webp" border="0" alt="Buy Me a Coffee at ko-fi.com" loading="lazy"></a>
 </div>
 
-<style>
+{%- css %}
     .support-me {
         display: flex;
         flex-wrap: wrap;
@@ -12,4 +12,4 @@
         align-items: center;
         margin-top: 0.7em;
     }
-</style>
+{% endcss %}

src/blog/posts.njk

@@ -25,7 +25,7 @@ eleventyNavigation:
     {% endfor %}
 </ul>
 
-<style>
+{%- css %}
     .blog__postlist {
         display: grid;
         gap: 1em;
@@ -37,4 +37,4 @@ eleventyNavigation:
         line-height: 1.3;
         margin-bottom: 0.2em;
     }
-</style>
+{% endcss %}

src/changelogs/changelogs.njk

@@ -22,9 +22,4 @@ eleventyNavigation:
 
 {% include "global/pagination-oldnew.njk" %}
 
-<style>
-    * + h2,
-    * + h3 {
-        margin-top: 1.5em;
-    }
-</style>
+{%- css %}* + h2, * + h3 { margin-top: 1.5em; }{% endcss %}

src/pages/blog.njk

@@ -43,11 +43,8 @@ eleventyComputed:
     {% include "global/pagination-oldnew.njk" %}
 </section>
 
-<style>
-    .blog__posts,
-    .blog__post {
-        display: grid;
-    }
+{%- css %}
+    .blog__posts, .blog__post { display: grid; }
 
     .blog__posts {
         list-style-type: none;
@@ -62,9 +59,7 @@ eleventyComputed:
         border-bottom: var(--bdr-blogpost);
     }
 
-    .blog__post:first-of-type {
-        border-top: var(--bdr-blogpost);
-    }
+    .blog__post:first-of-type { border-top: var(--bdr-blogpost); }
 
     .blog__post--title {
         font-size: clamp(1.55rem, 1rem + 3vw, 1.8rem);
@@ -76,4 +71,4 @@ eleventyComputed:
         color: var(--clr-sub-heading);
         font-weight: 700;
     }
-</style>
+{% endcss %}

src/pages/guestbook.njk

@@ -40,9 +40,9 @@ eleventyComputed:
     </div>
 </noscript>
 
-<style>
+{%- css %}
     .gb__messages--title {
         text-align: center;
         margin-bottom: 0.5em;
     }
-</style>
+{% endcss %}

src/pages/shrines.njk

@@ -25,7 +25,7 @@ eleventyComputed:
     </li>
 </ul>
 
-<style>
+{%- css %}
     .shrine-index {
         display: grid;
         gap: 2em;
@@ -38,4 +38,4 @@ eleventyComputed:
         display: grid;
         gap: 0.7em;
     }
-</style>
+{% endcss %}

src/pages/sitemap.njk

@@ -19,7 +19,7 @@ eleventyComputed:
 <h2>Main Site</h2>
 {{ collections.all | eleventyNavigation | eleventyNavigationToHtml(navigationOptions) | safe }}
 
-<style>
+{%- css %}
     main ul {
         display: grid;
         gap: 0.5rem;
@@ -32,32 +32,16 @@ eleventyComputed:
         list-style-type: "";
     }
 
-    .sitemap a:focus {
-        outline: 0.15rem solid var(--clr-link);
-    }
+    .sitemap a:focus { outline: 0.15rem solid var(--clr-link); }
 
     .sitemap li {
         padding-left: 0.5em;
         align-items: start;
     }
 
-    .sitemap li::marker {
-        content: "▶";
-    }
-
-    .sitemap ul {
-        padding-left: 1em;
-    }
-
-    .sitemap ul li::marker {
-        content: "★";
-    }
-
-    .sitemap ul ul li::marker {
-        content: "♥";
-    }
-
-    .sitemap ul ul ul li::marker {
-        content: "❣";
-    }
-</style>
+    .sitemap li::marker { content: "▶"; }
+    .sitemap ul { padding-left: 1em; }
+    .sitemap ul li::marker { content: "★"; }
+    .sitemap ul ul li::marker { content: "♥"; }
+    .sitemap ul ul ul li::marker { content: "❣"; }
+{% endcss %}