the home site for me: also iteration 3 or 4 of my site
feat: revamp image styles
+33
-11
+15
-4
sass/css/mods.css
+15
-4
sass/css/mods.css
···
109
109
text-align: center;
110
110
}
111
111
112
-
.center img {
112
+
.center .img-container {
113
113
display: block;
114
114
margin: 1rem auto;
115
115
}
···
328
328
max-width: 100%;
329
329
height: auto;
330
330
margin: 0;
331
+
padding: 0;
331
332
}
332
333
333
334
.badge-row a {
···
338
339
.img-group {
339
340
display: flex;
340
341
flex-direction: row;
341
-
gap: 0.5rem;
342
+
gap: 1rem;
342
343
max-width: 100%;
344
+
justify-content: center;
343
345
}
344
346
345
-
.img-group img {
347
+
.img-group .img-container {
346
348
flex: 1;
347
349
min-width: 0;
348
-
max-width: 100%;
350
+
background-color: var(--accent);
351
+
border-bottom: 4px solid var(--bg-light);
352
+
border-radius: 7px 7px 10px 10px;
353
+
padding: 0.35rem;
354
+
margin: 1rem 0;
355
+
}
356
+
357
+
.img-group img {
358
+
width: 100%;
349
359
height: auto;
350
360
object-fit: contain;
361
+
border-radius: 0.35rem;
351
362
}
352
363
353
364
:root {
+12
-5
sass/css/suCSS.css
+12
-5
sass/css/suCSS.css
···
497
497
video,
498
498
iframe[src^="https://www.youtube-nocookie.com"],
499
499
iframe[src^="https://www.youtube.com"] {
500
-
max-width: 90%;
500
+
max-width: 100%;
501
+
height: auto;
502
+
border-radius: 0.35rem;
503
+
}
504
+
505
+
.img-container {
506
+
background-color: var(--accent);
507
+
border-bottom: 4px solid var(--bg-light);
508
+
border-radius: 7px 7px 10px 10px;
509
+
padding: 0.35rem;
501
510
margin: 1rem;
502
-
height: auto;
503
-
border: dashed 2px var(--accent);
504
-
border-radius: 15px;
505
-
opacity: 0.95;
511
+
display: inline-block;
512
+
max-width: 90%;
506
513
}
507
514
508
515
figure {
+3
-1
templates/shortcodes/img.html
+3
-1
templates/shortcodes/img.html
···
1
1
<figure {% if class %}class="{{class}}" {% else %}class="center" {% endif %}>
2
-
<img src="{{id}}" {% if alt %}alt="{{alt}}" {% endif %} />
2
+
<div class="img-container">
3
+
<img src="{{id}}" {% if alt %}alt="{{alt}}" {% endif %} />
4
+
</div>
3
5
{% if caption %}
4
6
<figcaption>{{caption | markdown | safe}}</figcaption>
5
7
{% endif %}
+3
-1
templates/shortcodes/imgs.html
+3
-1
templates/shortcodes/imgs.html
···
3
3
{% set images = id | split(pat=",") %}
4
4
{% set alts = alt | default(value="") | split(pat=",") %}
5
5
{% for image in images %}
6
-
<img src="{{image | trim}}" {% if alts[loop.index0] %}alt="{{alts[loop.index0] | trim}}" {% endif %} />
6
+
<div class="img-container">
7
+
<img src="{{image | trim}}" {% if alts[loop.index0] %}alt="{{alts[loop.index0] | trim}}" {% endif %} />
8
+
</div>
7
9
{% endfor %}
8
10
</div>
9
11
{% if caption %}