the home site for me: also iteration 3 or 4 of my site
feat: support images
+56
-2
+35
sass/css/mods.css
+35
sass/css/mods.css
···
206
206
margin-right: 5px;
207
207
}
208
208
209
+
.image-gallery {
210
+
display: flex;
211
+
flex-direction: column;
212
+
gap: 0.5rem;
213
+
padding-top: 0.5rem;
214
+
}
215
+
216
+
.image-gallery img {
217
+
max-width: 100%;
218
+
border-radius: 0.25rem;
219
+
padding: 0;
220
+
margin: 0;
221
+
}
222
+
223
+
.side-by-side {
224
+
display: flex;
225
+
flex-direction: row;
226
+
}
227
+
228
+
.side-by-side img {
229
+
max-width: calc(50% - 0.25rem);
230
+
}
231
+
232
+
.gallery-grid {
233
+
display: grid;
234
+
grid-template-columns: repeat(2, 1fr);
235
+
gap: 0.1rem;
236
+
}
237
+
238
+
.gallery-grid img {
239
+
width: 100%;
240
+
height: auto;
241
+
object-fit: cover;
242
+
}
243
+
209
244
:root {
210
245
--nightshade-violet: oklch(0.27 0.0242 287.67);
211
246
--purple-night: oklch(27.58% 0.0203 289.13);
+21
-2
templates/shortcodes/bluesky.html
+21
-2
templates/shortcodes/bluesky.html
···
9
9
set content = post_data.record.text %} {% set has_embed = post_data.embed is
10
10
defined and post_data.embed %}
11
11
<blockquote>
12
-
{{ content }} {% if has_embed and post_data.embed["$type"] ==
12
+
{{ content }} {% if has_embed %} {% if post_data.embed["$type"] ==
13
13
"app.bsky.embed.video#view" %}
14
14
<video controls poster="{{ post_data.embed.thumbnail }}">
15
15
<source
···
17
17
type="application/x-mpegURL"
18
18
/>
19
19
</video>
20
-
{% endif %}
20
+
{% elif post_data.embed["$type"] == "app.bsky.embed.images#view" %} {% if
21
+
post_data.embed.images | length > 3 %}
22
+
<div class="image-gallery gallery-grid">
23
+
{% for image in post_data.embed.images %}
24
+
<img src="{{ image.fullsize }}" alt="{{ image.alt }}" loading="lazy" />
25
+
{% endfor %}
26
+
</div>
27
+
{% elif post_data.embed.images | length == 2 %}
28
+
<div class="image-gallery side-by-side">
29
+
{% for image in post_data.embed.images %}
30
+
<img src="{{ image.fullsize }}" alt="{{ image.alt }}" loading="lazy" />
31
+
{% endfor %}
32
+
</div>
33
+
{% else %}
34
+
<div class="image-gallery">
35
+
{% for image in post_data.embed.images %}
36
+
<img src="{{ image.fullsize }}" alt="{{ image.alt }}" loading="lazy" />
37
+
{% endfor %}
38
+
</div>
39
+
{% endif %} {% endif %} {% endif %}
21
40
<p>
22
41
<cite>
23
42
<a href="{{ post }}" target="_blank" rel="noopener"