feat(theme): image gallery

2 files changed, 26 insertions, 0 deletions

diff --git a/themes/yinyang/assets/css/index.css b/themes/yinyang/assets/css/index.css
index fb9bdca9..60372ad3 100644
--- a/themes/yinyang/assets/css/index.css
+++ b/themes/yinyang/assets/css/index.css
@@ -604,6 +604,29 @@ a.blog-link img {
     margin: 0.1rem
 }
 
+/* inline-image shortcode */
+
+.inline-image {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  gap: 1rem;
+  white-space: nowrap;
+}
+
+.inline-image > figure {
+  display: inline-block;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+.inline-image > figure img {
+  height: 20rem;
+  object-fit: cover;
+  display: block;
+}
+
+
 /* transition animation */
 
 html.is-changing .transition-fade article {
diff --git a/themes/yinyang/layouts/shortcodes/gallery.html b/themes/yinyang/layouts/shortcodes/gallery.html
new file mode 100644
index 00000000..a6e4d1b5
--- /dev/null
+++ b/themes/yinyang/layouts/shortcodes/gallery.html
@@ -0,0 +1,3 @@
+<div class="inline-image">
+    {{ .Inner | safeHTML }}
+</div>