Constrain images to 16:9
This commit is contained in:
parent
18a2f6892e
commit
e6c8546129
3 changed files with 22 additions and 7 deletions
|
@ -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-"] {
|
||||||
margin-bottom: $content-block-margin-bottom;
|
&:not(:last-child) {
|
||||||
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
$embed_width: 85%;
|
$embed-width: 85%;
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
{% load wagtailimages_tags wagtailcore_tags %}
|
{% load wagtailimages_tags wagtailcore_tags %}
|
||||||
|
|
||||||
<figure>
|
<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>
|
<figcaption>
|
||||||
{{ value.caption|richtext }}
|
{{ value.caption|richtext }}
|
||||||
</figcaption>
|
</figcaption>
|
||||||
|
|
Loading…
Reference in a new issue