From 4ff77c7f80b937d6a7fb713d6e59ab1f01ee5424 Mon Sep 17 00:00:00 2001
From: Fabian Tamp <fabian.tamp@gmail.com>
Date: Sun, 10 Jan 2021 00:05:46 +0100
Subject: Add a 'twoup' shortcode, for showing two photos simultaneously

---
 layouts/shortcodes/twoup.html |  3 +++
 static/css/style.css          | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 layouts/shortcodes/twoup.html

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;
-- 
cgit v1.2.3