How to set the background color based on the front material YAML (Jekyll)

Question

I want to be able to set the background color of the message based on the color defined in the YAML control.

This topic does this: Single Paged ( github here )

But I do not understand how this is done. This code in the CSS file is what this does:

{% for c in site.colors %}
.border-{{c[0]}} { border-color: {{ c[1] }} !important; }
.text-{{c[0]}}   { color: {{ c[1] }}; }
.text-{{c[0]}} a { color: {{ c[1] }}; }
.bg-{{c[0]}}     { background-color: {{ c[1] }} !important; }
{% endfor %}

/* ----- per-post colors! ----- */
{% for node in site.posts %}
  {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
  {% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
  {% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
  nav .p-{{id}} { border-color: {{ bg }}; }
  #{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
  #{{id}} a { color: {{ fg }}; }
  #{{id}} .sectiondivider { color: {{ bg }}; }
{% endfor %}

Is this fluid inside CSS? Can anyone go through the code? Thank!

Answer 1

From the _config.yml file for this Jekyll theme:

### template colors, used site-wide via css ###
colors:
  black:     '#111111'
  white:     '#f8f8f8'
  blue:      '#49a7e9'
  green:     '#9bcf2f'
  purple:    '#c869bf'
  orange:    '#fab125'
  turquoise: '#0fbfcf'

We see that colorsthis is an array of key values.

Yes, this is fluid in CSS.

(, Liquid templating engine Jekyll, YAML, , [Enter key] . Liquid)

CSS :

{% for c in site.colors %}
.border-{{c[0]}} { border-color: {{ c[1] }} !important; }
.text-{{c[0]}}   { color: {{ c[1] }}; }
.text-{{c[0]}} a { color: {{ c[1] }}; }
.bg-{{c[0]}}     { background-color: {{ c[1] }} !important; }
{% endfor %}

for, colors.

CSS black - #111111:

.border-black { border-color:  #111111 !important; }
.text-black   { color: #111111; }
.text-black a { color:#111111; }
.bg-black     { background-color: {{ c[1] }} !important; }

c colors, c[0] "", , , .., c[1] "", RGB . c[3], , , .

.

:

/* ----- per-post colors! ----- */
{% for node in site.posts %}
  {% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
  {% capture bg %}{% if site.colors[node.bg] %}{{ site.colors[node.bg] }}{% else %}{{ node.bg }}{% endif %}{% endcapture %}
  {% capture fg %}{% if site.colors[node.color] %}{{ site.colors[node.color] }}{% else %}{{ node.color }}{% endif %}{% endcapture %}
  nav .p-{{id}} { border-color: {{ bg }}; }
  #{{id}} { background-color: {{ bg }} !important; color: {{ fg }}; }
  #{{id}} a { color: {{ fg }}; }
  #{{id}} .sectiondivider { color: {{ bg }}; }
{% endfor %}

for, _posts.

, , . :

, :

---
title: "home"
bg: white
color: black
style: center
---

bg, fg . id a posts.id ( , Jekyll), , .

, capture if, , bg, fg, (, CSS).

_config.yml, , RGB bg, fg . CSS.