Add CSS for photo blog images

_assets/stylesheets/parts/photos.css.scss

@@ -0,0 +1,22 @@
+$photo-wide-max-width: 1024px;
+
+figure.photo-wide {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+@media only screen and (max-width: 1048px) {
+  figure.photo-wide {
+    max-width: 100%;
+    img {
+      margin: -0.5em 0;
+      padding: 0.5em 0;
+    }
+  }
+}
+
+@media only screen and (min-width: 1049px) {
+  figure.photo-wide {
+    max-width: $photo-wide-max-width;
+  }
+}

_assets/stylesheets/styles.css.scss

@@ -9,6 +9,7 @@
 @import "includes/video.css.scss";
 @import "lib/solarized-dark.css.scss";
 
+@import "parts/photos.css.scss";
 @import "parts/post.css.scss";
 @import "parts/archive.css.scss";
 @import "parts/footer.css.scss";

_config.yml

@@ -74,5 +74,35 @@ picture:
         width: '640'
       source_default:
         width: '400'
+    photo-square:
+      ppi:
+      - 1
+      - 2
+      attr:
+        class: "photo-square"
+        itemprop: image
+      source_large:
+        media: "(min-width: 769px)"
+        width: '800'
+      source_medium:
+        media: "(min-width: 480px)"
+        width: '640'
+      source_default:
+        width: '400'
+    photo-wide:
+      ppi:
+      - 1
+      - 2
+      attr:
+        class: "photo-square"
+        itemprop: image
+      source_large:
+        media: "(min-width: 769px)"
+        width: '1024'
+      source_medium:
+        media: "(min-width: 480px)"
+        width: '780'
+      source_default:
+        width: '490'
 kramdown:
   input: GFM