Add responsiveness to site index

Author: weavejester

site/index.html

@@ -63,13 +63,7 @@ <h1 class="title">
         <div class="columns split-view">
           <div class="column left">
             <h5>Before expansion</h5>
-            <pre class="highlight"><code class="language-clojure">
-
-
-{:duct.module/logging {}}
-
-
-            </code></pre>
+            <pre class="highlight"><code class="language-clojure">{:duct.module/logging {}}</code></pre>
           </div>
           <div class="column right">
             <h5>After expansion</h5>

site/style.css

@@ -113,15 +113,19 @@ pre.highlight code {
   margin-top: 0;
 }
 
-.split-view .left {
-  max-width: 18rem;
-}
-
-.split-view .left pre.highlight code {
-  border-radius: 10px 0 0 10px;
-  border-right: none;
-}
-
-.split-view .right pre.highlight code {
-  border-radius: 0 10px 10px 0;
+@media screen and (width > 769px) {
+  .split-view .left {
+    max-width: 18rem;
+  }
+
+  .split-view .left pre.highlight code {
+    border-radius: 10px 0 0 10px;
+    border-right: none;
+    min-height: 12.5em;
+    padding-top: 5.5em;
+  }
+
+  .split-view .right pre.highlight code {
+    border-radius: 0 10px 10px 0;
+  }
 }