Styled input/output codeblocks, going through all docs to make sure codeblocks are consistent

basics/handles.md

@@ -29,8 +29,7 @@ You can change an object's handle manually (TK how to change a handle manually)
 
 In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation.
 
-<p class="input">Input</p>
-<div>
+<div class="code-block code-block--input">
 {% highlight liquid %}
 {% raw %}
 {{ pages.about-us.title }}
@@ -39,8 +38,7 @@ In many cases you may know the handle of a object whose attributes you want to a
 {% endhighlight %}
 </div>
 
-<p class="output">Output</p>
-<div>
+<div class="code-block code-block--output">
 {% highlight text %}
 About Us
 About Us

basics/truthy-and-falsy.md

@@ -20,31 +20,35 @@ In the example below, the text "Tobi" is not a boolean, but it is truthy in a co
 
 [Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
 
-<p class="input">Input</p>
-{% highlight liquid %}{% raw %}
+<div class="code-block code-block--input">
+{% highlight html %}{% raw %}
 {% if settings.fp_heading %}
   <h1>{{ settings.fp_heading }}</h1>
 {% endif %}
 {% endraw %}{% endhighlight %}
+</div>
 
-<p class="output">Output</p>
+<div class="code-block code-block--output">
 {% highlight html %}{% raw %}
 <h1></h1>
 {% endraw %}{% endhighlight %}
+</div>
 
-[EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty `<div>`:
+[EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty div:
 
-<p class="input">Input</p>
+<div class="code-block code-block--input">
 {% highlight html %}{% raw %}
 {% if pages[settings.page] %}
   <div>{{ pages[settings.page].content }}</div>
 {% endif %}
 {% endraw %}{% endhighlight %}
+</div>
 
-<p class="output">Output</p>
+<div class="code-block code-block--output">
 {% highlight html %}{% raw %}
 <div></div>
 {% endraw %}{% endhighlight %}
+</div>
 
 ## Falsy
 

basics/types.md

@@ -63,17 +63,17 @@ In the following example, if the user does not exist (that is, `user` returns `n
 
 Tags or outputs that return `nil` will not print anything to the page.
 
-<p class="input">Input</p>
-
+<div class="code-block code-block--input">
 {% highlight liquid %}{% raw %}
 The current user is {{ user.name }}
 {% endraw %}{% endhighlight %}
+</div>
 
-<p class="output">Output</p>
-
+<div class="code-block code-block--output">
 {% highlight text %}{% raw %}
 The current user is
 {% endraw %}{% endhighlight %}
+</div>
 
 ## Array
 
@@ -83,40 +83,43 @@ Arrays hold lists of variables of any type.
 
 To access all of the items in an array, you can loop through each item in the array using a [for](/tags/#for) or [tablerow](/tags/#tablerow) tag.
 
-<p class="input">Input</p>
+<div class="code-block code-block--input">
 {% highlight liquid %}{% raw %}
 <!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
 {% for user in site.users %}
   {{ user }}
 {% endfor %}
 {% endraw %}{% endhighlight %}
+</div>
 
-<p class="output">Output</p>
+<div class="code-block code-block--output">
 {% highlight text %}{% raw %}
 Tobi Lina Tetsuro Adam
 {% endraw %}{% endhighlight %}
+</div>
 
-
-#### Accessing specific items in arrays
+### Accessing specific items in arrays
 
 You can use square bracket `[ ]` notation to access a specific item in an array. Array indexing starts at zero.
 
-<p class="input">Input</p>
+<div class="code-block code-block--input">
 {% highlight liquid %}{% raw %}
 <!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
 {{ site.users[0] }}
 {{ site.users[1] }}
 {{ site.users[3] }}
 {% endraw %}{% endhighlight %}
+</div>
 
-<p class="output">Output</p>
+<div class="code-block code-block--output">
 {% highlight text %}{% raw %}
 Tobi
 Lina
 Adam
 {% endraw %}{% endhighlight %}
+</div>
 
-#### Initializing arrays
+### Initializing arrays
 
 You cannot initialize arrays using pure Liquid.
 
@@ -137,7 +140,7 @@ EmptyDrop objects only have one attribute, `empty?`, which is always *true*.
 
 Collections and pages that *do* exist do not have an `empty?` attribute. Their `empty?` is “falsy”, which means that calling it inside an if statement will return *false*. When using an  unless statement on existing collections and pages, `empty?` will return `true`.
 
-#### Checking for emptiness
+### Checking for emptiness
 
 Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes.