Adds support for front matter image captions

_includes/page-intro.html

@@ -7,6 +7,8 @@
     {% assign intro_image = intro_image | escape %}
     <div class="intro-image">
       <img src="{{ intro_image }}" alt="{{ page.title }}">
+     {% if page.image.caption %}<span class="image-caption">{{ page.image.caption | markdownify | strip_newlines | remove: "<p>" | remove: "</p>" }}</span>{% endif %}
+    </div>
     </div>
   {% endif %}
 

_sass/basically-basic/_intro.scss

@@ -28,6 +28,30 @@
   img {
     width: 100%;
   }
+  .image-caption {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 2px 5px;
+    color: #fff;
+    font-family: $base-font-family;
+    font-size: $min-font-size;
+    background: #000;
+    text-align: right;
+    z-index: 5;
+    opacity: 0.5;
+    border-radius: $border-radius 0 0 0;
+
+    @include breakpoint($large) {
+      padding: 5px 10px;
+    }
+
+    a {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
 }
 
 .intro-text {

_sass/basically-basic/_print.scss

@@ -235,6 +235,18 @@
     color: #000;
   }
 
+  .intro-image {
+    .image-caption {
+      color: #000 !important;
+      background: #fff !important;
+      opacity: 1;
+
+      a {
+        color: #000 !important;
+      }
+    }
+  }
+
 /*
    Hide the following elements on print
    ========================================================================== */