Fix sizing of content images

This commit is contained in:
Jake Howard 2022-10-02 22:38:10 +01:00
parent 04aa301c75
commit 9096bd4b0b
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 29 additions and 15 deletions

View file

@ -11,6 +11,16 @@
} }
} }
div.block-mermaid {
text-align: center;
img {
@include dark-mode {
filter: invert(100%);
}
}
}
div.block-image, div.block-image,
div.block-mermaid, div.block-mermaid,
div.block-iframe { div.block-iframe {
@ -21,6 +31,12 @@ div.block-iframe {
figure { figure {
@include center-block; @include center-block;
img {
width: auto;
height: auto;
max-height: 45vh;
}
} }
} }
@ -61,18 +77,6 @@ div.block-tangent {
} }
} }
div.block-mermaid {
text-align: center;
img {
width: unset;
@include dark-mode {
filter: invert(100%);
}
}
}
div.block-code { div.block-code {
.code-header { .code-header {
font-family: $family-code; font-family: $family-code;

View file

@ -52,3 +52,13 @@ section.content {
color: $dark-mode-text !important; color: $dark-mode-text !important;
} }
} }
.gslide-image img {
object-fit: contain !important;
&[src*="mermaid.ink"] {
@include dark-mode {
filter: invert(100%);
}
}
}

View file

@ -1,8 +1,8 @@
{% load wagtailimages_tags wagtailcore_tags util_tags %} {% load wagtailimages_tags wagtailcore_tags util_tags %}
<figure> <figure>
<div class="image is-16by9"> <div class="image">
<a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-title="{{ value.caption|richtext|extract_text }}"> <a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-height="70vh" data-alt="{{ value.caption|richtext|extract_text }}">
<img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" /> <img src="{% image_url value.image 'width-1500' %}" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
</a> </a>
</div> </div>

View file

@ -2,7 +2,7 @@
<figure> <figure>
<div class="image"> <div class="image">
<a href="https://mermaid.ink/img/{{ value.pako }}" data-gallery="content" class="glightbox" data-glightbox="type: image" data-width="50vw" data-title="{{ value.caption|richtext|extract_text }}"> <a href="https://mermaid.ink/svg/{{ value.pako }}" data-gallery="content" class="glightbox" data-type="image" data-height="60vh" data-alt="{{ value.caption|richtext|extract_text }}">
<img src="https://mermaid.ink/svg/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" /> <img src="https://mermaid.ink/svg/{{ value.pako }}" referrerpolicy="no-referrer" alt="{{ value.caption|richtext|extract_text }}" loading="lazy" decoding="async" />
</a> </a>
</div> </div>