Origami comics

Bundle stylesheets

Define styles in multiple CSS files for clarity, then bundle them into a single file for faster page loads.
styles/about.css
/* Styles for about page */
article.about {
  p {
    color: darkorange;
  }
}
styles/posts.css
/* Styles for posts */
article.post {
  p {
    color: darkgreen;
  }
}

A simple strategy is to use nested styles so the rules in a given file only apply to elements with a given class or semantic tag.

styles/about.css
/* Styles for about page */
article.about {
  p {
    color: darkorange;
  }
}
about.html
<article class="about">
  <p>All about me…</p>
</article>
https://localhost:5000/about.html

All about me…

Add a line to your site definition that calls Origami’s deeptext function to concatenate the stylesheets together.

site.ori
{
  // Concatenate all files in the styles folder into a single CSS file
  styles.css = Tree.deepText(styles/)
}

You could also select specific files to include.

The styles end up in a single file, and the nested styles ensure the rules only affect the intended elements!

 
$ ori site.ori/styles.css
/* Styles for about page */
article.about {
  p {
    color: darkorange;
  }
}

/* Styles for posts */
article.post {
  p {
    color: darkgreen;
  }
}

$

Read more: Tree.deepText builtin function

  Comic index