Use bundle plugin to bundle CSS

This commit is contained in:
Helen Chong 2024-07-18 21:08:32 +08:00
parent 719d56ccf5
commit aa536e42bc
22 changed files with 50 additions and 88 deletions

View File

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

View File

@ -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" %}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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