Skip to content
Permalink
Browse files

Allows custom colors in each post! (not defined in _config.yml)

- Generates separate css styles for each post
- lets you keep the same config-keyed color as well (backward compatible)
  • Loading branch information
t413 committed Sep 23, 2014
1 parent cf4eb12 commit 80c7219219b688c6893a41869d10e82118006be5
Showing with 22 additions and 10 deletions.
  1. +13 −3 _includes/css/main.css
  2. +1 −1 _posts/2000-01-05-usage.md
  3. +8 −6 index.html
@@ -12,9 +12,18 @@ html { box-sizing: border-box; }
.text-{{c[0]}} { color: {{ c[1] }}; }
.text-{{c[0]}} a { color: {{ c[1] }}; }
.bg-{{c[0]}} { background-color: {{ c[1] }} !important; }
.shadow-{{c[0]}} { text-shadow: 1px -2px 2px {{ c[1] }}; }
{% 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 %}


/* ----- code, syntax highlighting, etc ----- */
@@ -149,7 +158,7 @@ nav ul li a:hover {
opacity:1
}
nav ul li:hover, nav ul li.active {
border-top: {{navborder_active}}px solid;
border-top-width: {{navborder_active}}px;
padding-top: 0;
}

@@ -211,8 +220,9 @@ nav ul li:hover, nav ul li.active {
font-size: 130px;
position: static;
margin-top: -8px;
color: #fff;
}
.sectiondivider .fa-circle { color: #fff; }

.sectiondivider h5 {
font-size:15px;
font-weight:700;
@@ -1,6 +1,6 @@
---
title: "usage"
bg: green
bg: '#63BD2F'
color: white
fa-icon: plug
---
@@ -19,28 +19,30 @@

<nav><ul>
{% for node in site.posts reversed %}
<li class="border-{{ node.bg }}"><a href="#{{node.title | remove:' ' | downcase}}">{{node.title}}</a></li>
{% capture id %}{{ node.id | remove:'/' | downcase }}{% endcapture %}
<li class="p-{{id}}"><a href="#{{id}}">{{node.title}}</a></li>
{% endfor %}
</ul></nav>


{% for page in site.posts reversed %}
<div id="{{page.title | remove:' ' | downcase}}" class="section bg-{{page.bg}}">
{% capture id %}{{ page.id | remove:'/' | downcase }}{% endcapture %}
<div id="{{id}}" class="section p-{{id}}">
{% if page.icon %}
<div class="subtlecircle sectiondivider imaged">
<img src="{{page.icon}}" alt="section icon" />
<h5 class="icon-title text-{{page.bg}}">{{ page.title }}</h5>
<h5 class="icon-title">{{ page.title }}</h5>
</div>
{% elsif page.fa-icon %}
<div class="subtlecircle sectiondivider faicon">
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-{{ page.fa-icon }} fa-stack-1x text-{{page.bg}}"></i>
<i class="fa fa-{{ page.fa-icon }} fa-stack-1x"></i>
</span>
<h5 class="icon-title text-{{page.bg}}">{{ page.title }}</h5>
<h5 class="icon-title">{{ page.title }}</h5>
</div>
{% endif %}
<div class="container text-{{ page.color }} {{ page.style }}">
<div class="container {{ page.style }}">
{{ page.content }}
</div>
</div>

0 comments on commit 80c7219

Please sign in to comment.
You can’t perform that action at this time.