Dana Byerly
Interaction Designer Who Codes

Changelog: 2020-09-21

In the last update I created a content specific CSS file (content.css) for the Articles, Notes and Changelog section, but I discovered that it was being used sitewide. I’m currently using clean-css to minify and inline my CSS. I’m also using Nunjucks if statements to include content specific CSS based on location.

For example, I have the following within the head in my base template…

{% set css %}
  {% include "css/global.css" %}
  {% if page.url === '/' %}
    {% include "css/home.css" %}
    {% include "css/projects-landing.css" %}
  {% endif %}
{% endset %}
<style>{{ css | cssmin | safe }}</style>

Anything within the set css tag gets minified, inlined and rendered within the style tag. So the if page.url === ‘/’ is telling Eleventy that if the url is equal to “/” (the homepage), then include these two files to be minified and inlined. Pretty cool!

Since I have several content areas I thought I could use “or”, or rather a bunch of "or"s, in my Nunjucks “if” statement and chain them all together. I was wrong. What I tried was…

{% if '/notes/' or '/articles/' or '/changelog/' or '/projects/' in page.url %}
  {% include "css/home.css" %}
  {% include "css/projects-landing.css" %}
{% endif %}

But this included both everywhere. I also tried only using two (if ‘/notes/’ or ‘/articles/’) and got the same result. I ended up making an “if” statement for each section, repeating the same two includes for each section. Not very DRY! I’m hoping to find a better way to do this, but for now you can see it at Github in all its repetitive glory.

Other

  • Moved a few class from global.css to various section-specific CSS files.
  • Removed paginationAnchor of “#post-list” from listing pages and pagination.
  • Switched fronts from “fallback” to “swap”.
  • Added a noscript fallback to load fonts CSS if JS is disabled or unavailable.

Back to top