Document figures (#508)

Author: jarrodmillman

assets/theme-css/styles.css

@@ -35,12 +35,13 @@ object.align-center {
   margin-right: auto;
 }
 
-img.align-default,
-figure.align-default,
-.figure.align-default {
+img,
+figure,
+.figure {
   display: block;
   margin-left: auto;
   margin-right: auto;
+  text-align: center;
 }
 
 .align-left {

doc/content/features.md

@@ -116,6 +116,16 @@ By default, `javaScript` points to the server at
 `https://views.scientific-python.org`. Contact the Scientific
 Python team to have your analytics hosted there.
 
+## Figures
+
+{{< figure src="https://source.unsplash.com/200x200/daily?cute+puppy"
+alt="Cute puppies"
+target="https://unsplash.com/"
+caption="Cute puppies"
+loading="lazy"
+height=200
+width=200 >}}
+
 ## Icons
 
 You can add custom icons (for use in, e.g., the footer) by downloading Material-UI SVGs from [Google Fonts](https://fonts.google.com/icons) to the `/assets/icons` directory.

layouts/shortcodes/grid1.html

@@ -2,7 +2,7 @@
 
 doc: Grids.
 
-{{< grid1 columns="1 2 2 3">}}
+{{< grid1 columns="1 2 2 4">}}
 
 [[card]]
 title = 'Only title'
@@ -33,7 +33,13 @@
 '''
 
 [[card]]
-header = 'A clickable card'
+header = 'Header'
+title = 'Card Title'
+body = 'Card content'
+footer = 'Footer'
+
+[[card]]
+header = 'A clickable image card'
 link = 'https://example.com'
 body = '''{{< image >}}
 src = 'https://source.unsplash.com/200x200/daily?cute+puppy'
@@ -42,10 +48,20 @@
 {{< /image >}}'''
 
 [[card]]
-header = 'Header'
-title = 'Card Title'
-body = 'Card content'
-footer = 'Footer'
+header = 'A clickable figure card'
+link = 'https://example.com'
+body = '''{{< figure
+src="https://source.unsplash.com/200x200/daily?cute+puppy"
+alt="Cute puppies"
+>}}'''
+
+[[card]]
+link = 'https://example.com'
+body = '''{{< figure
+src="https://source.unsplash.com/200x200/daily?cute+puppy"
+alt="Cute puppies"
+caption="Cute puppies"
+>}}'''
 
 {{< /grid1 >}}
 
@@ -60,7 +76,7 @@
   {{ $lg := index $columns 3 }}
   <div class="sd-row sd-row-cols-1 sd-row-cols-xs-{{ $xs }} sd-row-cols-sm-{{ $sm }} sd-row-cols-md-{{ $md }} sd-row-cols-lg-{{ $lg }} sd-g-2 sd-g-xs-{{ $xs }} sd-g-sm-{{ $sm }} sd-g-md-{{ $md }} sd-g-lg-{{ $lg }}">
 {{- else }}
-  <div class="sd-row">
+  <div class="sd-row sd-row-cols-auto sd-row-cols-xs-auto sd-row-cols-sm-auto sd-row-cols-md-auto sd-row-cols-lg-auto">
 {{- end }}
   {{ $cards := (index (.Inner | transform.Unmarshal) "card") }}
   {{- range $key, $d := $cards -}}