feat: style layers, imports and nesting

src/_includes/partials/addon-links.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/addon-links.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="addon-links__wrapper">
   {%- if analytics.size > 0 -%}
   <div>{% render "partials/popular-posts.liquid", posts:posts, analytics:analytics %}</div>

src/_includes/partials/badge-grid.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/badge-grid.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="badge__grid">
   <a href="https://11ty.dev">
     {% image './src/assets/img/badges/eleventy.png', 'Made with 11ty', '', 'lazy' %}

src/_includes/partials/banners/github.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../../assets/styles/components/banners.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="banner github">
   <p>{% tablericon "brand-github" "GitHub repository" %} Take a look at <a href="{{ url }}">the GitHub repository for this project</a>. (And give it a star if you feel like it.)</p>
 </div>

src/_includes/partials/banners/npm.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../../assets/styles/components/banners.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="banner npm">
   <p>{% tablericon "brand-npm" "NPM package" %} <a href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
 </div>

src/_includes/partials/banners/old-post.liquid

@@ -1,9 +1,5 @@
 {% assign isOldPost = date | oldPost %}
 {% if isOldPost %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/banners.css" %}
-  {% endcapture %}
-  <style>{{ css }}</style>
   <div class="banner old-post">
     <p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
   </div>

src/_includes/partials/link-peek.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/link-peek.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/link-peek.js"></script>
 <template id="link-peek-template">
   <figure>

src/_includes/partials/mastodon-post.liquid

@@ -1,9 +1,5 @@
 {%- assign shareLink = postUrl | findPost: linkPosts -%}
 {%- if shareLink %}
-{% capture css %}
-  {% render "../../assets/styles/components/mastodon-post.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/mastodon-post.js"></script>
 <template id="mastodon-post-template">
   <div class="mastodon-post-wrapper">

src/_includes/partials/nav/theme-toggle.liquid

@@ -1,8 +1,4 @@
 <script type="module" src="/assets/scripts/components/theme-toggle.js"></script>
-{% capture css %}
-  {% render "../../../assets/styles/components/theme-toggle.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <span class="client-side">
   <theme-toggle>
     <button

src/_includes/partials/now/media-grid.liquid

@@ -1,11 +1,4 @@
 {% if data.size > 0 %}
-  {% if embeddedStyles == true %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/media-grid.css" %}
-    {% render "../../../assets/styles/components/progress-bar.css" %}
-  {% endcapture %}
-  <style>{{ css }}</style>
-  {% endif %}
   {% assign media = data | normalizeMedia %}
   <div class="media__grid {% if shape == 'square' %}square{% else %}vertical{% endif %}">
     {% for item in media limit: count %}

src/_includes/partials/now/status.liquid

@@ -1,3 +1,3 @@
-<p class="my-2">
+<p>
   {{ status.emoji }} {{ status.content }}
 </p>

src/_includes/partials/now/track-chart.liquid

@@ -1,10 +1,4 @@
 {% if data.size > 0 %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/track-chart.css" %}
-    {% render "../../../assets/styles/components/progress-bar.css" %}
-  {% endcapture %}
-  <style>{{ css}}</style>
-{% endif %}
 <div class="track__chart">
   {% for item in data limit: 10 %}
   {%- assign percentage = item.plays | calculatePlayPercentage: mostPlayed -%}
@@ -21,4 +15,5 @@
     {% render "partials/now/progress-bar.liquid", percentage:percentage %}
   </div>
   {% endfor %}
-</div>
+</div>
+{% endif %}

src/_includes/partials/now/tracks-recent.liquid

@@ -1,9 +1,4 @@
 {% if data.size > 0 %}
-  {% capture css %}
-    {% render "../../../assets/styles/components/track-chart.css" %}
-  {% endcapture %}
-  <style>{{ css}}</style>
-{% endif %}
 <div class="track__chart">
   {% for item in data limit: 10 %}
   {% capture alt %}{{ item.track }} by {{ item.track }}{% endcapture %}
@@ -22,4 +17,5 @@
       </div>
     </div>
   {% endfor %}
-</div>
+</div>
+{% endif %}

src/_includes/partials/paginator.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/paginator.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/select-pagination.js"></script>
 <nav aria-label="Blog pagination" class="pagination flex--centered">
   {% if pagination.href.previous %}

src/_includes/partials/popular-posts.liquid

@@ -1,6 +1,6 @@
 {% assign posts = posts | getPopularPosts: analytics %}
 {% if posts.size > 0 %}
-<h2 class="flex--centered">
+<h2 class="link__list--header flex--centered">
   {% tablericon "flame" "Popular" %}
   Popular posts
 </h2>

src/_includes/partials/post-graph.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/post-graph.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <div class="post-graph">
   {% assign years = postYears | reverse %}
   {%- for year in years %}

src/_includes/partials/recent-links.liquid

@@ -1,5 +1,5 @@
 {% if links.size > 0 %}
-<h2 id="links" class="recent__links-header flex--centered">
+<h2 id="links" class="link__list--header flex--centered">
   {% tablericon "link" "Links" %}
   Recent links
 </h2>

src/_includes/partials/share-button.liquid

@@ -1,7 +1,3 @@
-{% capture css %}
-  {% render "../../assets/styles/components/share-button.css" %}
-{% endcapture %}
-<style>{{ css }}</style>
 <script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
 <webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
   <button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>