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
The hero_classes
option allows a variety of hero classes to be set dynamically these include:
text-light
| text-dark
- Controls if the text should be light or dark depending on the contenttitle-h1h2
- Enforced a close matched h1/h2 title pairingparallax
- Enables a CSS-powered parallax effectoverlay-dark-gradient
- Displays a transparent gradient which further darkens the underlying imageoverlay-light-gradient
- Displays a transparent gradient which further lightens the underlying imageoverlay-dark
- Displays a solid transparent overlay which further darkens the underlying imageoverlay-light
- Displays a solid transparent overlay which further darkens the underlying imagehero-fullscreen
| hero-large
| hero-medium
| hero-small
| hero-tiny
- Size of the hero blockThe hero_image
should point to an image file in the current page folder.