Add a 'twoup' shortcode, for showing two photos simultaneously

2 files changed, 36 insertions, 0 deletions

diff --git a/layouts/shortcodes/twoup.html b/layouts/shortcodes/twoup.html
new file mode 100644
index 0000000..8b37c4c
--- /dev/null
+++ b/layouts/shortcodes/twoup.html
@@ -0,0 +1,3 @@
+<div class="twoup {{.Get "class"}}" >
+{{- .Inner -}}
+</div>
diff --git a/static/css/style.css b/static/css/style.css
index dffe0d0..975219b 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -197,6 +197,39 @@ figure {
   display: table;
 }
 
+.squash-bottom {
+  margin-bottom: 0;
+}
+
+.squash-top {
+  margin-top: 0;
+}
+
+.twoup.squash-bottom figure {
+  margin-bottom: 0;
+}
+
+.twoup.squash-top figure {
+  margin-top: 0;
+}
+
+.twoup {
+  display: flex;
+}
+.twoup figure {
+  max-width: 48%;
+  max-height: 42.5vh;
+  display: inline-block;
+}
+
+.twoup figure:first-child {
+  margin-left: 0;
+}
+
+.twoup figure:last-child {
+  margin-right: 0;
+}
+
 figure:not(.no-border) video, figure:not(.no-border) img, figure:not(.no-border) object, figure:not(.no-border).style-tables table {
   border: 1px solid #ccc;
   box-shadow: 0 5px 5px -5px #777777;