feat: style layers, imports and nesting

This commit is contained in:
Cory Dransfeldt 2024-04-15 12:37:32 -07:00
parent 8e5d497389
commit d4c87b8abe
No known key found for this signature in database
58 changed files with 968 additions and 981 deletions

View file

@ -18,7 +18,7 @@ tags: ['books', 'music', 'development', 'Eleventy']
{% tablericon "books" "Favorite books" %}
Favorite books
</h2>
{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6, embeddedStyles: true %}
{% render "partials/now/media-grid.liquid", data:roundups['2023'].books, shape: "vertical", count: 6 %}
<h2 class="now__section--header flex--centered">
{% tablericon "vinyl" "Favorite albums" %}
Favorite books

View file

@ -57,18 +57,7 @@ I use [Tailwind](https://tailwindcss.com) for CSS styles[^1] which is minified a
ELEVENTY_PRODUCTION=true eleventy && NODE_ENV=production npx tailwindcss -i ./tailwind.css -c ./tailwind.config.js -o _site/assets/styles/tailwind.css --minify
```
The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time:
{% raw %}
```liquid
{% capture css %}
{% include "../assets/styles/prism.css" %}
{% endcapture %}
<style>{{ css }}</style>
```
{% endraw %}
This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`:
The site include's Prism for code syntax highlighting and this is embedded and minified in the `<head>` of each page at build time. This is made possible by leveraging CleanCSS in (you guessed it) `.eleventy.js`:
{% raw %}
```javascript