Page specific CSS styles file based on front matter

[thedivtagguy]

My website requires a particular font stack and colour palette for each project and I've found a way to work with colors by defining them in the frontmatter like so:

colors: 
- 0B0F59 # Background Color
- ffffff # Logo Color and Sidenote Labels
- A6ACC9 # 
fonts:
- cocogoose
- rougant

These are then propagated to the document by calling them in the single.html like so:

{{$bgColor := index (.Page.Params.colors) 0 }}
<div class="overflow-hidden" style="background-color:#{{ $bgColor }};">

This has worked pretty well but I would like to be able to do something similar with fonts. My primary font family in this example is cocogoose and secondary is rougant. Right now, whenever I want to define new CSS, I'm adding it to the site.css file in assets folder and this is not manageable for a large set of projects.

I was thinking it would be better to make it modular and have a custom css file for each project, define the design system in the front matter and define the default font styles/families/sizes to be used like so:

  h1 {
    @apply text-gray-900 leading-normal font-cocogoose font-bold text-4xl break-words;
  }

Is this possible? If so, how do I go about setting this up so that on build, Hugo looks for whether the front matter has a style parameter and then make sure that Tailwind knows to use styles from that file for this page.

Edit: This is a similar question, but I don't know how to translate this into Hugo-speak.

[dirkolbrich]

Hi, I am not quit sure on the terminology you use. This theme starter is intended to develop a theme for one (1) Hugo project, which can be used by multiple project, but usually would not change between projects.

As far is I understand, you want to be able to change the used font on each Hugo.Page, e.g. a blog post, just be defining the font to use in the .md files frontmatter.

This would be a mix of defining a custom setup for Tailwindcss with custom font styles, read the variable in the content.md frontmatter during build and map this variable to use a specific font class at certain page elements.

This sounds doable, but I do not know how. There is a similar question in the Hugo forum, maybe this is a better suited place to find an answer.

[thedivtagguy]

I'm sorry, I should have been a little clearer! When I say project, I meant something like a single blog post.

To put it another way, here are the files currently in the assets folder:

assets/css:
     - postcss.config.js
     - site.css
     - style.css
     - tailwind.config.js

Right now, whenever I do need custom styles (such as fonts, etc), I'm adding them to my site.css. When you do this a few times, the file gets very big not very manageable. What I would like instead was to have a css file for each blog post. This would make maintenance easier. The assets folder might look like this then:

assets/css:
     - postcss.config.js
     - site.css
     - style.css
     - tailwind.config.js
     - blogs/
           - blog1.css
           - blog2.css

Where blog1.css and blog2.css correspond to their respective posts. The paths to these files could be specified in the front-matter and during the build, the styles from these files would be applied to that particular page.

My question is whether I can add a folder like blogs in the asset folder and if so, how can I include the files within it it during the build. Do I just add new css files? How do I add them to the head.html partial?

It would be another challenge to see if we can specify the file name to be looked for too (which is specified in the front matter). A possible way to do that is in this answer.

[dirkolbrich]

A lot is possible. But these kinds of customisation are out of scope for this starter package.

I personally would advise against such micro level costumisation for each single page of a site with a lot of css files. But that is just my personal prereference.

Please refer to the Hugo discussion forum for further help, as this would be the better suited place.

[thedivtagguy]

Will do, thank you!

Just on a parting note, where is site.css being included? I can't find a reference of it in the head.html partial. If you can point me to how I can just include new a css file, I think I'll be able to find my way.

[dirkolbrich]

site.css is included into styles.css to build a single css file.

https://github.com/dirkolbrich/hugo-theme-tailwindcss-starter/blob/5f8c06b436ab88fc16aef90dc0e67b0c41ca4d46/assets/css/styles.css#L5-L6

[thedivtagguy]

Great, thank you so much for your help again!