Add before/after expansion labels to example

Author: weavejester

site/index.html

@@ -62,6 +62,7 @@ <h1 class="title">
         </p>
         <div class="columns split-view">
           <div class="column left">
+            <h5>Before expansion</h5>
             <pre class="highlight"><code class="language-clojure">
 
 
@@ -71,6 +72,7 @@ <h1 class="title">
             </code></pre>
           </div>
           <div class="column right">
+            <h5>After expansion</h5>
             <pre class="highlight"><code class="language-clojure">{:duct.logger/simple
  {:appenders
   [{:type :stdout

site/style.css

@@ -56,7 +56,7 @@ p a:hover {
 
 section.section {
   padding-top: 2rem;
-  padding-bottom: 0.5rem;
+  padding-bottom: 2rem;
 }
 
 p {
@@ -95,6 +95,18 @@ pre.highlight code {
   padding: 0;
 }
 
+.split-view h5 {
+  font-weight: bold;
+  font-size: 0.9rem;
+  text-align: center;
+  color: #ddd;
+  margin-top: 1rem;
+}
+
+.split-view pre.highlight {
+  margin-top: 0;
+}
+
 .split-view .left {
   max-width: 18rem;
 }