add shortcode for image processing and required style for embedded images

layouts/shortcodes/imgproc.html

@@ -0,0 +1,25 @@
+{{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
+{{ $command := strings.ToLower (printf "%s" (.Get 1)) }}
+{{ $options := .Get 2 }}
+{{ if eq $command "fit"}}
+    {{ .Scratch.Set "image" ($original.Fit $options) }}
+{{ else if eq $command "resize"}}
+    {{ .Scratch.Set "image" ($original.Resize $options) }}
+{{ else if eq $command "fill"}}
+    {{ .Scratch.Set "image" ($original.Fill $options) }}
+{{ else }}
+    {{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize. Is: %s" ($command)}}
+{{ end }}
+{{ $image := .Scratch.Get "image" }}
+<figure class="post-figure">
+    <a href="{{ $original.RelPermalink }}">
+        <img class="post-figure__img" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
+    </a>
+    <figcaption class="post-figure__caption">
+    <small>
+    {{ with not .Inner }}
+        {{ $original.Title }}
+    {{ end }}
+    </small>
+    </figcaption>
+</figure>

src/css/_style.css

@@ -205,7 +205,6 @@ html{
 .post-content blockquote {
   font-size: 1.1em;
   margin:40px auto;
-  font-family:Open Sans;
   font-style:italic;
   color: #555555;
   padding:0.2em 30px 0.2em 55px;
@@ -250,6 +249,24 @@ html{
   margin: 10px auto;
 }
 
+.post-figure {
+  padding: 0.25rem;
+  margin: 2rem 0;
+  background-color: #dcdfe3
+}
+
+.post-figure__img {
+  max-width: 100%;
+  height: auto;
+}
+
+.post-figure__caption {
+  font-size: 1.1em;
+  padding: 2px 0;
+  font-style:italic;
+  color: #555555;
+}
+
 /************************
   Global Blog Footer
 *************************/

static/default.css

@@ -34,9 +34,6 @@ html {
   -webkit-box-sizing: inherit;
   box-sizing: inherit
 }
-.test {
-  color: red
-}
 .table {
   display: table
 }
@@ -197,7 +194,6 @@ html {
 .post-content blockquote {
   font-size: 1.1em;
   margin: 40px auto;
-  font-family: Open Sans;
   font-style: italic;
   color: #555;
   padding: .2em 30px .2em 55px;
@@ -236,6 +232,21 @@ html {
 .post-content li {
   margin: 10px auto
 }
+.post-figure {
+  padding: .25rem;
+  margin: 2rem 0;
+  background-color: #dcdfe3
+}
+.post-figure__img {
+  max-width: 100%;
+  height: auto
+}
+.post-figure__caption {
+  font-size: 1.1em;
+  padding: 2px 0;
+  font-style: italic;
+  color: #555
+}
 .site-footer {
   width: 100%;
   background: #2f333e;