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

Constrain images to 16:9

Browse source
This commit is contained in:
Jake Howard 2022-06-28 21:59:38 +01:00
parent 18a2f6892e
commit e6c8546129
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 22 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,17 +1,30 @@
@mixin center-block {
width: $embed-width;
margin: 0 auto;
max-width: $embed-width;
min-width: $embed-width;
}
div.block-image { div.block-image {
figcaption { figcaption {
font-size: 85%; font-size: 85%;
margin-top: 5px;
}
figure {
@include center-block;
} }
} }
.content > div:not(:last-child) { .content > div[class^="block-"] {
&:not(:last-child) {
margin-bottom: $content-block-margin-bottom; margin-bottom: $content-block-margin-bottom;
}
} }
div.block-embed { div.block-embed {
lite-youtube { lite-youtube {
max-width: $embed_width; @include center-block;
min-width: $embed_width;
margin: 0 auto;
} }
} }

2
static/src/scss/_variables.scss
View file

@ -1 +1 @@
$embed_width: 85%; $embed-width: 85%;

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

@ -1,7 +1,9 @@
{% load wagtailimages_tags wagtailcore_tags %} {% load wagtailimages_tags wagtailcore_tags %}
<figure> <figure>
<div class="image is-16by9">
<img src="{% image_url value.image 'width-1500' %}" alt="" /> <img src="{% image_url value.image 'width-1500' %}" alt="" />
</div>
<figcaption> <figcaption>
{{ value.caption|richtext }} {{ value.caption|richtext }}
</figcaption> </figcaption>