vrifox/website
vrifox/website
1
0
Fork 0
Code Issues 3 Pull requests Activity

Improve image markup

Browse source
This commit is contained in:
Vri 🌈 2023-01-16 15:28:03 +01:00
parent 7c1f5f900f
commit 52f3cfc3c2
Signed by: vrifox
GPG key ID: D40098E5B60B2197
2 changed files with 12 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/scss/markup/render-image.scss
View file

@ -1,10 +1,16 @@
.md-img {
margin: 3em;
&.with-text { margin-bottom: .5em; }
display: flex;
flex-direction: column;
margin: 3rem auto;
img {
border-radius: 1rem;
margin: 0 auto;
box-shadow: rgba(0, 0, 0, .25) 0 0 .5rem;
}
&.with-text img { margin-bottom: .5rem; }
&-text {
font-size: .8em;
font-weight: 300;
margin: 0 0 3em 0;
text-align: center;
}
}

6
layouts/_default/_markup/render-image.html
View file

@ -1,4 +1,4 @@
<p class="md-img {{ with .Text }}with-text{{ end }}">
<figure class="md-img {{ with .Text }}with-text{{ end }}">
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} loading="lazy" />
</p>
{{ with .Text }}<p class="md-img-text">{{ . }}</p>{{ end }}
{{ with .Text }}<figcaption class="md-img-text">{{ . }}</figcaption>{{ end }}
</figure>