From my blog post: Creating dynamic layouts with Jekyll
# ----------------------- #
# Styling & Colour scheme #
# ----------------------- #
style:
color:
primary: "#db030f"
secondary: "#000"
text: "#fff"
<style>
.hero {
background-color: {{ page.style.color.primary }};
color:{{ page.hero.color }};
background-image: url({{ site.assets.imgPath }}{{ page.hero.bg }}?w=500&{{ site.assets.params }});
}
.hero-title {
color: {{ page.hero.color }};
}
.hero-link {
color: {{ page.hero.color }};
}
.section--quote {
background-color: {{ page.style.color.primary }};
color: {{ page.style.color.text }};
}
</style>