search

funkydan2 / alpha-church

Hugo theme for churches based on a html5up theme
https://alpha-church.netlify.app
Other
67 stars 58 forks source link

Hugofied main.scss #15

Closed Anaeijon closed 5 years ago

Anaeijon commented 5 years ago

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 commented 5 years ago

Thanks @Anaeijon. Nice work!

funkydan2 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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.