Body & Hero Classes
The Quark theme has the ability to allow pages to override some of the default options by letting the user set
body_classes for any page. The theme will merge the combination of the defaults with any
body_classes set. This allows you to easily add hero classes to give your blog post some bling.
body_classes: "header-dark header-transparent"
On a particular page will ensure that page has those options enabled (assuming they are false by default).
The hero template allows some options to be set in the page frontmatter. This is used by the modular
hero as well as the blog and item templates to provide a more dynamic header.
hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large hero_image: road.jpg hero_align: center
hero_classes option allows a variety of hero classes to be set dynamically these include:
text-dark- Controls if the text should be light or dark depending on the content
title-h1h2- Enforced a close matched h1/h2 title pairing
parallax- Enables a CSS-powered parallax effect
overlay-dark-gradient- Displays a transparent gradient which further darkens the underlying image
overlay-light-gradient- Displays a transparent gradient which further lightens the underlying image
overlay-dark- Displays a solid transparent overlay which further darkens the underlying image
overlay-light- Displays a solid transparent overlay which further darkens the underlying image
hero-tiny- Size of the hero block
hero_image should point to an image file in the current page folder.