repos/website
1
Fork 0
Code Issues 1 Pull requests 27 Activity

Fix sizing of content images

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

28
static/src/scss/_blocks.scss
View file

@ -11,6 +11,16 @@
}
}
div.block-mermaid {
text-align: center;
img {
@include dark-mode {
filter: invert(100%);
}
}
}
div.block-image,
div.block-mermaid,
div.block-iframe {
@ -21,6 +31,12 @@ div.block-iframe {
figure {
@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 {
.code-header {
font-family: $family-code;

10
static/src/scss/_content.scss
View file

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

4
website/common/templates/common/blocks/image-caption.html
View file

@ -1,8 +1,8 @@
{% load wagtailimages_tags wagtailcore_tags util_tags %}
<figure>
<div class="image is-16by9">
<a href="{% image_url value.image 'original' %}" class="glightbox" data-gallery="content" data-title="{{ value.caption|richtext|extract_text }}">
<div class="image">
<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" />
</a>
</div>

2
website/contrib/mermaid_block/templates/contrib/blocks/mermaid.html
View file

@ -2,7 +2,7 @@
<figure>
<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" />
</a>
</div>