inherentlee/leecat.art
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image modals for posts

Browse Source
This commit is contained in:
Lee Cattarin
2026-05-13 20:42:31 -07:00
parent a56ca4c03e
commit e615e6a91f
4 changed files with 113 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
_includes/layouts/post.njk
View File

@ -4,7 +4,9 @@ layout: base.njk
{% css %}{% include "css/post.css" %}{% endcss %}
{% css %}{% include "css/highlighting.css" %}{% endcss %}
{% css %}{% include "css/lists.css" %}{% endcss %}
{% css %}{% include "css/modal.css" %}{% endcss %}
{% js %}{% include "node_modules/@zachleat/heading-anchors/heading-anchors.js" %}{% endjs %}
{% js %}{% include "js/modal.js" %}{% endjs %}
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article>
@ -30,7 +32,11 @@ layout: base.njk
</div>
{% if image %}
<img src="/img/{{ image.src }}" alt="{{ image.alt }}">
<dialog closedby="any" aria-label="image modal" tabindex="-1">
<button class="close-dialog" autofocus aria-label="close the image modal">&times;</button>
<img class="modal-img" src="/img/{{ image.src }}" alt="{{ image.alt }}">
</dialog>
<img tabindex="0" class="hero" src="/img/{{ image.src }}" alt="{{ image.alt }}">
{% endif %}
{{ content | safe }}