the home site for me: also iteration 3 or 4 of my site
feat: add imgs component
+27
+15
sass/css/mods.css
+15
sass/css/mods.css
···
335
335
align-items: center;
336
336
}
337
337
338
+
.img-group {
339
+
display: flex;
340
+
flex-direction: row;
341
+
gap: 0.5rem;
342
+
max-width: 100%;
343
+
}
344
+
345
+
.img-group img {
346
+
flex: 1;
347
+
min-width: 0;
348
+
max-width: 100%;
349
+
height: auto;
350
+
object-fit: contain;
351
+
}
352
+
338
353
:root {
339
354
--nightshade-violet: oklch(0.27 0.0242 287.67);
340
355
--purple-night: oklch(27.58% 0.0203 289.13);
+12
templates/shortcodes/imgs.html
+12
templates/shortcodes/imgs.html
···
1
+
<figure {% if class %}class="{{class}}" {% else %}class="center" {% endif %}>
2
+
<div class="img-group">
3
+
{% set images = id | split(pat=",") %}
4
+
{% set alts = alt | default(value="") | split(pat=",") %}
5
+
{% for image in images %}
6
+
<img src="{{image | trim}}" {% if alts[loop.index0] %}alt="{{alts[loop.index0] | trim}}" {% endif %} />
7
+
{% endfor %}
8
+
</div>
9
+
{% if caption %}
10
+
<figcaption>{{caption | markdown | safe}}</figcaption>
11
+
{% endif %}
12
+
</figure>