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

23
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 {
figcaption {
font-size: 85%;
margin-top: 5px;
}
figure {
@include center-block;
}
}
.content > div:not(:last-child) {
margin-bottom: $content-block-margin-bottom;
.content > div[class^="block-"] {
&:not(:last-child) {
margin-bottom: $content-block-margin-bottom;
}
}
div.block-embed {
lite-youtube {
max-width: $embed_width;
min-width: $embed_width;
margin: 0 auto;
@include center-block;
}
}

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

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

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

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