Test out kramdown

1 files changed, 258 insertions, 234 deletions

diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md
index 4cbc8b7..318583a 100644
--- a/posts/animated-card-tiles.md
+++ b/posts/animated-card-tiles.md
@@ -38,28 +38,32 @@ That's all that is needed - for now. We will be returning to this code shortly t
 
 First we set the main housing container to use `flex` so we save ourselves the headache of aligning all the cards in a nice row:
 
-    .card-tiles-container {
-        display: flex;
-        font-size: 14px;
-        margin: 20px 0;
-    }
+~~~css
+.card-tiles-container {
+  display: flex;
+  font-size: 14px;
+  margin: 20px 0;
+}
+~~~
 
 Next we create the default styling for our tile cards and set the `transform` property to scale the card on `:hover`:
 
-    /* Default card tile styles */
-    .card-tile {
-        border: 1px solid;
-        border-radius: 10px;
-        cursor: pointer;
-        height: 150px;
-        margin: 0 10px;
-        overflow: hidden;
-        position: relative;
-        width: 33.33%;
-    }
-    .card-tile:hover {
-        transform: scale(1.1);
-    }
+~~~css
+/* Default card tile styles */
+.card-tile {
+  border: 1px solid;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 150px;
+  margin: 0 10px;
+  overflow: hidden;
+  position: relative;
+  width: 33.33%;
+}
+.card-tile:hover {
+  transform: scale(1.1);
+}
+~~~
 
 ### Where are my cards?!
 
@@ -69,118 +73,132 @@ Our next step is to hide the default inner `text-content` and only show it on ho
 
 When the user hovers over a main card tile, we change the `text-content` values of both the opacity and z-index to 1.
 
-    /* Card tile text content */
-    .card-tile .text-content {
-        background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
-        bottom: 10px;
-        border: 1px solid rgba(0,0,0,0.4);
-        border-radius: 5px;
-        box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
-                    0 2px 4px rgba(0,0,0,0.5);
-        height: 65px;
-        left: 10px;
-        opacity: 0;
-        padding: 10px;
-        position: absolute;
-        width: calc(100% - 20px);
-        z-index: -1;
-    }
-    .card-tile:hover .text-content {
-        opacity: 1;
-        z-index: 1;
-    }
+~~~css
+/* Card tile text content */
+.card-tile .text-content {
+  background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
+  bottom: 10px;
+  border: 1px solid rgba(0,0,0,0.4);
+  border-radius: 5px;
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
+              0 2px 4px rgba(0,0,0,0.5);
+  height: 65px;
+  left: 10px;
+  opacity: 0;
+  padding: 10px;
+  position: absolute;
+  width: calc(100% - 20px);
+  z-index: -1;
+}
+.card-tile:hover .text-content {
+  opacity: 1;
+  z-index: 1;
+}
+~~~
 
 Finally we add some minor styling for the inner header and paragraph tags:
 
-    .card-tile .text-content h4,
-    .card-tile .text-content p {
-        color: #fff;
-        margin: 0;
-        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
-    }
+~~~css
+.card-tile .text-content h4,
+.card-tile .text-content p {
+  color: #fff;
+  margin: 0;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
+}
+~~~
 
 ### Don't forget mobile
 
 We want out UI to stack the cards if users are viewing them on smaller devices:
 
-    @media(max-width: 600px) {
-        .card-tiles-container {
-            flex-direction: column;
-        }
-        .card-tile {
-            margin: 0 0 10px 0;
-            width: 100%;
-        }
-    }
+~~~css
+@media(max-width: 600px) {
+  .card-tiles-container {
+    flex-direction: column;
+  }
+  .card-tile {
+    margin: 0 0 10px 0;
+    width: 100%;
+  }
+}
+~~~
 
 ## Customizing each card
 
 Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it's own custom coloring:
 
-    <div class="card-tiles-container">
-        <!-- `Blue` class -->
-        <div class="card-tile blue">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <!-- `Orange` class -->
-        <div class="card-tile orange">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <!-- `Green` class -->
-        <div class="card-tile green">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
+~~~html
+<div class="card-tiles-container">
+  <!-- `Blue` class -->
+  <div class="card-tile blue">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <!-- `Orange` class -->
+    <div class="card-tile orange">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <!-- `Green` class -->
+    <div class="card-tile green">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
     </div>
+  </div>
+</div>
+~~~
 
 And these color classes correlate to some new CSS styling:
 
-    /* Blue Card */
-    .card-tile.blue {
-        background-color: #0093E9;
-        background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
-        border-color: #0093E9;
-        box-shadow: 0 4px 12px rgba(128,208,199,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.blue:hover {
-        box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-
-    /* Orange Card */
-    .card-tile.orange {
-        background-color: #FAD961;
-        background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
-        border-color: #F76B1C;
-        box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.orange:hover {
-        box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-
-    /* Green Card */
-    .card-tile.green {
-        background-color: #096e40;
-        background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
-        border-color: #096e40;
-        box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.green:hover {
-        box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
+~~~css
+/* Blue Card */
+.card-tile.blue {
+  background-color: #0093E9;
+  background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
+  border-color: #0093E9;
+  box-shadow: 0 4px 12px rgba(128,208,199,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.blue:hover {
+  box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+~~~
+
+~~~css
+/* Orange Card */
+.card-tile.orange {
+  background-color: #FAD961;
+  background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
+  border-color: #F76B1C;
+  box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.orange:hover {
+  box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+~~~
+
+~~~css
+/* Green Card */
+.card-tile.green {
+  background-color: #096e40;
+  background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
+  border-color: #096e40;
+  box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.green:hover {
+  box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+~~~
 
 ### Adding transitions
 
@@ -188,11 +206,13 @@ We can now see the actual cards visually and have the ability to interact with t
 
 Lucky we can target all elements we wish to animate with the `transition` property, like so:
 
-    /* Shared transitions */
-    .card-tile,
-    .card-tile .text-content {
-        transition: .3s ease all;
-    }
+~~~css
+/* Shared transitions */
+.card-tile,
+.card-tile .text-content {
+    transition: .3s ease all;
+}
+~~~
 
 Done and done.
 
@@ -202,122 +222,126 @@ To make things easier for reference, I have included all the `html` and `css` be
 
 ### HTML
 
-    <div class="card-tiles-container">
-        <div class="card-tile blue">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <div class="card-tile orange">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <div class="card-tile green">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
+~~~html
+<div class="card-tiles-container">
+  <div class="card-tile blue">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <div class="card-tile orange">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <div class="card-tile green">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
     </div>
+  </div>
+</div>
+~~~
 
 ### CSS
 
-    .card-tiles-container {
-        display: flex;
-        font-size: 14px;
-        margin: 20px 0;
-    }
-    /* Shared transitions */
-    .card-tile,
-    .card-tile .text-content {
-        transition: .3s ease all;
-    }
-    /* Default card tile styles */
-    .card-tile {
-        border: 1px solid;
-        border-radius: 10px;
-        cursor: pointer;
-        height: 150px;
-        margin: 0 10px;
-        overflow: hidden;
-        position: relative;
-        width: 33.33%;
-    }
-    /* Blue Card */
-    .card-tile.blue {
-        background-color: #0093E9;
-        background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
-        border-color: #0093E9;
-        box-shadow: 0 4px 12px rgba(128,208,199,0.7),
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.blue:hover {
-        box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    /* Orange Card */
-    .card-tile.orange {
-        background-color: #FAD961;
-        background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
-        border-color: #F76B1C;
-        box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.orange:hover {
-        box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    /* Green Card */
-    .card-tile.green {
-        background-color: #096e40;
-        background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
-        border-color: #096e40;
-        box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.green:hover {
-        box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    /* Card tile text content */
-    .card-tile .text-content {
-        background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
-        bottom: 10px;
-        border: 1px solid rgba(0,0,0,0.4);
-        border-radius: 5px;
-        box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
-                    0 2px 4px rgba(0,0,0,0.5);
-        height: 65px;
-        left: 10px;
-        opacity: 0;
-        padding: 10px;
-        position: absolute;
-        width: calc(100% - 20px);
-        z-index: -1;
-    }
-    .card-tile .text-content h4,
-    .card-tile .text-content p {
-        color: #fff;
-        margin: 0;
-        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
-    }
-    /* All animations on hover */
-    .card-tile:hover {
-        transform: scale(1.1);
-    }
-    .card-tile:hover .text-content {
-        opacity: 1;
-        z-index: 1;
-    }
-    @media(max-width: 600px) {
-        .card-tiles-container {
-            flex-direction: column;
-        }
-        .card-tile {
-            margin: 0 0 10px 0;
-            width: 100%;
-        }
-    }
+~~~css
+.card-tiles-container {
+  display: flex;
+  font-size: 14px;
+  margin: 20px 0;
+}
+/* Shared transitions */
+.card-tile,
+.card-tile .text-content {
+  transition: .3s ease all;
+}
+/* Default card tile styles */
+.card-tile {
+  border: 1px solid;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 150px;
+  margin: 0 10px;
+  overflow: hidden;
+  position: relative;
+  width: 33.33%;
+}
+/* Blue Card */
+.card-tile.blue {
+  background-color: #0093E9;
+  background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
+  border-color: #0093E9;
+  box-shadow: 0 4px 12px rgba(128,208,199,0.7),
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.blue:hover {
+  box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+/* Orange Card */
+.card-tile.orange {
+  background-color: #FAD961;
+  background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
+  border-color: #F76B1C;
+  box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.orange:hover {
+  box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+/* Green Card */
+.card-tile.green {
+  background-color: #096e40;
+  background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
+  border-color: #096e40;
+  box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.green:hover {
+  box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+/* Card tile text content */
+.card-tile .text-content {
+  background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
+  bottom: 10px;
+  border: 1px solid rgba(0,0,0,0.4);
+  border-radius: 5px;
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
+              0 2px 4px rgba(0,0,0,0.5);
+  height: 65px;
+  left: 10px;
+  opacity: 0;
+  padding: 10px;
+  position: absolute;
+  width: calc(100% - 20px);
+  z-index: -1;
+}
+.card-tile .text-content h4,
+.card-tile .text-content p {
+  color: #fff;
+  margin: 0;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
+}
+/* All animations on hover */
+.card-tile:hover {
+  transform: scale(1.1);
+}
+.card-tile:hover .text-content {
+  opacity: 1;
+  z-index: 1;
+}
+@media(max-width: 600px) {
+  .card-tiles-container {
+      flex-direction: column;
+  }
+  .card-tile {
+      margin: 0 0 10px 0;
+      width: 100%;
+  }
+}
+~~~