Hugofied main.scss

[Anaeijon]

Piping the main.scss import through ExecuteAsTemplate allows usage of hugo params in the main.scss.

One benefit of that is, that we don't need to overload the Style attribute of the "banner"-section in banner.html and instead simply load the configured .Params.banner.image in the main.scss.

Another benefit is, that we can add more params in the toml which change the styling directly without needing hacky css-snippets in the users custom css to accomplish things like importing additional google fonts.
One example use of that is displayed by the new googleFonts param, which allows the user to load additional fonts from fonts.google.com.

[funkydan2]

Thanks @Anaeijon. Nice work!

[funkydan2]

I've been thinking about this. One of the results of processing the banner image in the SCSS file is that the banner section is now set in two places:

1. The words and buttons on the banner are configured in /content/_index.md
2. The background image is configured in config.toml

So although this PR makes the HTML nicer (no inline styles) it also makes the theme slightly less usable. What do you think @Anaeijon?

[Anaeijon]

It not only makes the HTML nicer, another benefit is, that a user of the theme can now use a static css file, like static/example.css to overwrite #banner{background-image:...} to get rid of the overlay, for example if he already has a dark image or wants dark text on a bright backround.

[funkydan2]

Hey @Anaeijon, I don't know if you'll get this...but it's worth a try.

Can you have a look at the discussion in #28? One of the side-effects of specifying the banner image in the SCSS file is that if the user doesn't generate their own assets (for example, if they aren't running hugo extended) then they're stuck with the filename specified in the example site.

It's not a huge issue - it's fairly logical to store a banner image at /static/img/banner.jpg - but it could cause some users to scratch their heads.

Any thoughts? Cause I agree with your argument that doing everything in the SCSS file makes it simple to completely override.