0ct0pu5/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tidy up the query pattern

Browse source
This commit is contained in:
Ben Dwyer 2021-09-29 13:19:39 +01:00
parent 52b6bd9d7b
commit 10918d3451
2 changed files with 37 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
quadrat/assets/theme.css
View file

@ -57,22 +57,38 @@
}
div.horizontal-query-pattern {
align-items: stretch;
flex-wrap: nowrap;
gap: 0;
}
@media (min-width: 600px) {
div.horizontal-query-pattern {
flex-wrap: nowrap;
}
}
div.horizontal-query-pattern .wp-block-cover,
div.horizontal-query-pattern figure.wp-block-post-featured-image {
margin-top: 0;
}
div.horizontal-query-pattern img {
@media (min-width: 600px) {
div.horizontal-query-pattern figure.wp-block-post-featured-image {
width: 57%;
}
}
div.horizontal-query-pattern figure.wp-block-post-featured-image img {
aspect-ratio: 1.12;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 600px) {
div.horizontal-query-pattern figure.wp-block-post-featured-image img {
min-height: 360px;
}
}
.wp-block-cover.is-style-quadrat-cover-diamond::after {
background-image: url(rotated.svg);
background-position: center;

23
quadrat/sass/block-patterns/_query.scss
View file

@ -16,17 +16,30 @@
}
div.horizontal-query-pattern {
align-items: stretch;
flex-wrap: nowrap;
gap: 0;
@include break-small() {
flex-wrap: nowrap;
}
.wp-block-cover,
figure.wp-block-post-featured-image {
margin-top: 0;
}
img {
aspect-ratio: 1.12;
object-fit: cover;
figure.wp-block-post-featured-image {
@include break-small() {
width: 57%; // I'm not sure why this number works but it does seem to!
}
img {
aspect-ratio: 1.12;
object-fit: cover;
@include break-small() {
min-height: 360px;
}
}
}
}