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

@@ -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>

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
  */