Enhanced blog post media

_includes/image.html

@@ -0,0 +1,4 @@
+<figure class="media-container">
+  <img class="media image" src="{{ include.url }}" alt="{{ include.caption }}">
+  <figcaption class="media-caption">{{ include.caption }}</figcaption>
+</figure>

_includes/youtube.html

@@ -0,0 +1,6 @@
+<figure class="media-container">
+  <div class="media video">
+    <iframe width="532" height="400" src="https://www.youtube.com/embed/{{ include.id }}" frameborder="0" allowfullscreen></iframe>
+  </div>
+  <figcaption class="media-caption">{{ include.caption }}</figcaption>
+</figure>

_posts/2016-04-06-february-lightning-talks.md

@@ -12,12 +12,12 @@ In February's lightning talks, Clo tells us about bias and why diversity is impo
 
 Clo delves into the ways that our personal backgrounds influence our view of the world, and explains why it's important to consider all viewpoints.
 
-<div class="video"><iframe width="532" height="400" src="//www.youtube.com/embed/QmAl2cg3C5U" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
+{% include youtube.html id="QmAl2cg3C5U" %}
 
 ---
 
 ## Styling in Javascript by Mike James
 
 Mike talks us through a modular, component-based approach to CSS and development, and why new technologies like post-css and react lend themselves so well.
 
-<div class="video"><iframe width="532" height="400" src="//www.youtube.com/embed/DYC9kNPrOwE" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>
+{% include youtube.html id="DYC9kNPrOwE" %}

_posts/2016-05-17-screen-saver.md

@@ -19,6 +19,6 @@ Here’s our setup:
 
 Propsboard hooks into our Slack channels, enabling anyone to give ‘Props’ to slack messages worthy of praise or sharing.
 
-![Screen Saver](/img/posts/2016-05-17-screen-saver/screen.gif)
+{% include image.html url="/img/posts/2016-05-17-screen-saver/screen.gif" caption="Our Propsboard dashboard in action" %}
 
 All in all, it’s a great, cheap way to turn screens into useful digital signs, that the whole team can interact with and use to share what’s going on across the office.

_sass/components/_clients.scss

@@ -1,5 +1,5 @@
 //===============================================================================
-// CLIENTS GRID
+// CLIENTS
 //===============================================================================
 .client-container {
   padding-bottom: 20px;

_sass/components/_cta-container.scss → _sass/components/_cta.scss

@@ -1,3 +1,6 @@
+//===============================================================================
+// CALL-TO-ACTION
+//===============================================================================
 .cta-container {
   padding: 65px 20px 30px;
   background-color: lighten($ink, 50);

_sass/components/_media.scss

@@ -0,0 +1,31 @@
+//===============================================================================
+// MEDIA
+//===============================================================================
+.media-container {
+  padding: 10px 0 0;
+}
+
+.media {
+  position: relative;
+  margin-left: -30px;
+
+  &.video {
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+  }
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.media-caption {
+  padding: 5px 0;
+  font-size: $epsilon;
+  color: lighten($ink, 20);
+  text-align: center;
+}

_sass/pages/_page-base.scss

@@ -73,23 +73,9 @@
     margin-top: 10px;
     margin-right: 5px;
   }
+}
 
-  .video {
-    position: relative;
-    padding-bottom: 56.25%; /* 16:9 */
-    padding-top: 25px;
-    margin-bottom: 30px;
-    height: 0;
-  }
 
-  .video iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
 
 // Meta
 .meta-title {

_sass/pages/_post.scss

@@ -196,15 +196,11 @@
   &:before {
     top: 15px;
     transform: rotate(-2deg) scale(1.2);
-    -ms-transform: rotate(-2deg) scale(1.2);
-    -webkit-transform: rotate(-2deg) scale(1.2);
   }
 
   &:after {
     top: -30px;
     transform: rotate(-1.4deg) scale(1.2);
-    -ms-transform: rotate(-1.4deg) scale(1.2);
-    -webkit-transform: rotate(-1.4deg) scale(1.2);
   }
 
   .hero-inner {

css/main.scss

@@ -21,7 +21,8 @@
 @import "components/_clients";
 @import "components/_share";
 @import "components/_related";
-@import "components/_cta-container";
+@import "components/_cta";
+@import "components/_media";
 
 // PAGE TEMPLATES
 @import "pages/_page-base";