Merge pull request #89 from pebblecode/pt/enhanced-post-media

Enhanced blog post media

Author: Mark Durrant

Diff for: _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>

Diff for: _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>

Diff for: _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" %}

Diff for: _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.

Diff for: _sass/components/_clients.scss

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

Diff for: _sass/components/_cta-container.scss renamed to _sass/components/_cta.scss

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

Diff for: _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;
+}

Diff for: _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 {

Diff for: _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 {

Diff for: 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";