From 490c12de55ec5c894ac1ba321ab70fcac4cf6846 Mon Sep 17 00:00:00 2001
From: Dan Barber <github@danbarber.me>
Date: Tue, 15 Aug 2017 15:35:36 -0400
Subject: [PATCH] Add CSS for photo blog images

---
 _assets/stylesheets/parts/photos.css.scss | 22 +++++++++++++++++
 _assets/stylesheets/styles.css.scss       |  1 +
 _config.yml                               | 30 +++++++++++++++++++++++
 3 files changed, 53 insertions(+)
 create mode 100644 _assets/stylesheets/parts/photos.css.scss

diff --git a/_assets/stylesheets/parts/photos.css.scss b/_assets/stylesheets/parts/photos.css.scss
new file mode 100644
index 0000000..eebc612
--- /dev/null
+++ b/_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;
+  }
+}
diff --git a/_assets/stylesheets/styles.css.scss b/_assets/stylesheets/styles.css.scss
index 53eb74f..809332b 100644
--- a/_assets/stylesheets/styles.css.scss
+++ b/_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";
diff --git a/_config.yml b/_config.yml
index 9a3538a..bd436d8 100644
--- a/_config.yml
+++ b/_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