CSS adjustments to headers

_layouts/default.html

@@ -75,6 +75,7 @@
 
     <div class="content__area">
       <div class="content__list">
+        <h1>{{ page.title }}</h1>
         {{ content }}
       </div>
     </div>

_sass/modules/_base.scss

@@ -82,22 +82,22 @@ a {
 }
 
 h1 {
-  font-size: 2.5em;
-}
-
-h2 {
   font-size: 2em;
 }
 
-h3 {
+h2 {
   font-size: 1.5em;
 }
 
-h4 {
-  font-size: 1.5em;
+h3 {
+  font-size: 1em;
   text-decoration: underline;
 }
 
+h4 {
+  font-size: 1em;
+}
+
 blockquote {
   color: lighten($color-slate, 30%);
   border-left: 2px solid lighten($color-slate, 50%);

_sass/modules/_content-area.scss

@@ -7,8 +7,14 @@
 }
 
 .content__list {
+
+  h1 {
+    font-weight: bold;
+  }
+
   h2 {
     font-weight: bold;
+    text-decoration: underline;
 
     &:not(:first-child) {
       margin-top: $spacing-unit * 2;

docs/tags/control-flow/case-when.md

@@ -0,0 +1,32 @@
+---
+category: control-flow
+---
+
+
+## case/when
+
+<p>Creates a switch statement to compare a variable with different values. <code>case</code> initializes the switch statement, and <code>when</code> compares its values.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+{% assign handle = 'cake' %}
+{% case handle %}
+  {% when 'cake' %}
+     This is a cake
+  {% when 'cookie' %}
+     This is a cookie
+  {% else %}
+     This is not a cake nor a cookie
+{% endcase %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+This is a cake
+{% endraw %}{% endhighlight %}
+</div>

docs/tags/control-flow/elsif-else.md

@@ -0,0 +1,26 @@
+## elsif / else
+
+<p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+  <!-- If customer.name = 'anonymous' -->
+  {% if customer.name == 'kevin' %}
+    Hey Kevin!
+  {% elsif customer.name == 'anonymous' %}
+    Hey Anonymous!
+  {% else %}
+    Hi Stranger!
+  {% endif %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+Hey Anonymous!
+{% endraw %}{% endhighlight %}
+</div>

docs/tags/control-flow/if.md

@@ -0,0 +1,21 @@
+## if
+
+<p>Executes a block of code only if a certain condition is met.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+{% if product.title == 'Awesome Shoes' %}
+  These shoes are awesome!
+{% endif %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+These shoes are awesome!
+{% endraw %}{% endhighlight %}
+</div>

docs/tags/control-flow/index.html

@@ -2,8 +2,7 @@
 layout: default
 ---
 
-CONTROL FLOW HERE
- sss
+TAGS!
 
 {% for doc in site.collections["tags"].docs %}
   <div id="{{ doc.title }}" class="content__item">

docs/tags/control-flow/unless.md

@@ -0,0 +1,31 @@
+## unless
+
+<p>Similar to <code>if</code>, but executes a block of code only if a certain condition is <strong>not</strong> met.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+  {% unless product.title == 'Awesome Shoes' %}
+    These shoes are not awesome.
+  {% endunless %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+These shoes are not awesome.
+{% endraw %}{% endhighlight %}
+</div>
+
+This would be the equivalent of doing the following:
+
+<div>
+{% highlight html %}{% raw %}
+  {% if product.title != 'Awesome Shoes' %}
+    These shoes are not awesome.
+  {% endif %}
+{% endraw %}{% endhighlight %}
+</div>

docs/tags/index.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+sss
+
+{{ site.collections["tags"] }}
+
+{% for doc in site.collections["tags"].docs %}
+
+{% endfor %}

tags/control-flow/case-when.md

@@ -0,0 +1,32 @@
+---
+category: control-flow
+---
+
+
+## case/when
+
+<p>Creates a switch statement to compare a variable with different values. <code>case</code> initializes the switch statement, and <code>when</code> compares its values.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+{% assign handle = 'cake' %}
+{% case handle %}
+  {% when 'cake' %}
+     This is a cake
+  {% when 'cookie' %}
+     This is a cookie
+  {% else %}
+     This is not a cake nor a cookie
+{% endcase %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+This is a cake
+{% endraw %}{% endhighlight %}
+</div>

tags/control-flow/elsif-else.md

@@ -0,0 +1,26 @@
+## elsif / else
+
+<p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+  <!-- If customer.name = 'anonymous' -->
+  {% if customer.name == 'kevin' %}
+    Hey Kevin!
+  {% elsif customer.name == 'anonymous' %}
+    Hey Anonymous!
+  {% else %}
+    Hi Stranger!
+  {% endif %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+Hey Anonymous!
+{% endraw %}{% endhighlight %}
+</div>

tags/control-flow/if.md

@@ -0,0 +1,21 @@
+## if
+
+<p>Executes a block of code only if a certain condition is met.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+{% if product.title == 'Awesome Shoes' %}
+  These shoes are awesome!
+{% endif %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+These shoes are awesome!
+{% endraw %}{% endhighlight %}
+</div>

tags/control-flow/index.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+
+TAGS!
+
+{% for doc in site.collections["tags"].docs %}
+  <div id="{{ doc.title }}" class="content__item">
+    <h2 class="content__header">{{ doc.title }}</h2>
+    <div class="content">
+      {{ doc.content }}
+    </div>
+  </div>
+{% endfor %}

tags/control-flow/unless.md

@@ -0,0 +1,31 @@
+## unless
+
+<p>Similar to <code>if</code>, but executes a block of code only if a certain condition is <strong>not</strong> met.</p>
+
+<p class="input">Input</p>
+
+<div>
+{% highlight html %}{% raw %}
+  {% unless product.title == 'Awesome Shoes' %}
+    These shoes are not awesome.
+  {% endunless %}
+{% endraw %}{% endhighlight %}
+</div>
+
+<p class="output">Output</p>
+
+<div>
+{% highlight html %}{% raw %}
+These shoes are not awesome.
+{% endraw %}{% endhighlight %}
+</div>
+
+This would be the equivalent of doing the following:
+
+<div>
+{% highlight html %}{% raw %}
+  {% if product.title != 'Awesome Shoes' %}
+    These shoes are not awesome.
+  {% endif %}
+{% endraw %}{% endhighlight %}
+</div>