From ab52d74cb2c6d29fa91146ce5be0c4b5578e889b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gr=C3=A9gory=20Mantelet?=
 <gregory.mantelet@astro.unistra.fr>
Date: Mon, 30 Sep 2024 10:07:46 +0200
Subject: [PATCH] Add a shortcode for paragraph with a side image (left or
 right).

This shortcode is a bit different from the `floating` shortcode. The content
is not floating around the image, but is rather visually put on a separate
column.
---
 layouts/shortcodes/side-image.html | 12 ++++++++++++
 static/css/ivoa.css                | 25 +++++++++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 layouts/shortcodes/side-image.html

diff --git a/layouts/shortcodes/side-image.html b/layouts/shortcodes/side-image.html
new file mode 100644
index 0000000..5f5cab2
--- /dev/null
+++ b/layouts/shortcodes/side-image.html
@@ -0,0 +1,12 @@
+<section class="with-image {{ .Get "position" }}">
+    <aside>
+    {{- if (.Get "thumbnail") }}
+        <a href="{{ .Get "image" }}"><img src="{{- .Get "thumbnail" }}" /></a>
+    {{- else }}
+        <img src="{{- .Get "image" }}" />
+    {{- end }}
+    </aside>
+    <main>
+        {{- .Inner | markdownify }}
+    </main>
+</section>
\ No newline at end of file
diff --git a/static/css/ivoa.css b/static/css/ivoa.css
index caaebf8..dd7f662 100644
--- a/static/css/ivoa.css
+++ b/static/css/ivoa.css
@@ -245,6 +245,31 @@ section > main + aside  { margin-left: 1em }
 }
 
 
+/* =============================================================================
+   SECTION WITH A SIDE IMAGE
+ */
+
+.with-image {
+    display              : grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas  : "image content";
+    column-gap: 1em;
+}
+
+.with-image.right {
+    grid-template-columns: 1fr auto;
+    grid-template-areas  : "content image";
+}
+
+.with-image > aside {
+    grid-area : image;
+    margin-top: 1em;
+}
+
+.with-image > aside > img { max-width: 30vw }
+.with-image > main        { grid-area: content }
+
+
 /* =============================================================================
    CARROUSEL
  */