Commit bed4ccb5 authored by Benthe Kuijpers's avatar Benthe Kuijpers
Browse files

items-row changes (font size, img crop, bg options)

parent 02efc5fe
...@@ -567,6 +567,27 @@ ...@@ -567,6 +567,27 @@
"return_format": "array" "return_format": "array"
} }
] ]
},
{
"key": "field_604f97c2a3f8d",
"label": "Background",
"name": "background",
"type": "clone",
"instructions": "",
"required": 0,
"conditional_logic": 0,
"wrapper": {
"width": "",
"class": "",
"id": ""
},
"clone": [
"field_6040ff3b377be"
],
"display": "seamless",
"layout": "block",
"prefix_label": 0,
"prefix_name": 0
} }
], ],
"min": "", "min": "",
...@@ -595,5 +616,5 @@ ...@@ -595,5 +616,5 @@
"hide_on_screen": "", "hide_on_screen": "",
"active": true, "active": true,
"description": "", "description": "",
"modified": 1615403207 "modified": 1615828951
} }
\ No newline at end of file
...@@ -37,7 +37,7 @@ body { ...@@ -37,7 +37,7 @@ body {
h1 { h1 {
margin: 0; margin: 0;
@include colouredBar($red, $bg-yellow); @include colouredBar($blue, $bg-yellow);
text-shadow: -3px 3px #FFF, 3px 3px #FFF; text-shadow: -3px 3px #FFF, 3px 3px #FFF;
.descender:after { .descender:after {
......
...@@ -15,19 +15,17 @@ ...@@ -15,19 +15,17 @@
.img { .img {
width: 100%; width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
img { &--contain img {
width: 100%; object-position: center center;
} }
&--cover { img {
height: 0; position: absolute;
padding-bottom: 100%; width: 100%;
position: relative;
img {
position: absolute;
}
} }
} }
...@@ -53,17 +51,11 @@ ...@@ -53,17 +51,11 @@
.img { .img {
@media only screen and (min-width: $medium) { @media only screen and (min-width: $medium) {
width: 250px; width: 250px;
height: 250px;
&--cover {
height: 250px;
}
} }
@media only screen and (min-width: $large) { @media only screen and (min-width: $large) {
width: 320px; width: 320px;
height: 320px;
&--cover {
height: 320px;
}
} }
} }
} }
...@@ -76,16 +68,21 @@ ...@@ -76,16 +68,21 @@
.img { .img {
margin-bottom: 20px; margin-bottom: 20px;
width: 160px; width: 160px;
height: 160px;
overflow: hidden;
&--cover { img {
height: 160px; width: 100%;
overflow: hidden; height: 100%;
}
img { &--cover img {
width: 100%; object-fit: cover;
height: 100%; }
object-fit: cover;
} &--contain img {
object-fit: contain;
object-position: top center;
} }
} }
...@@ -105,4 +102,11 @@ ...@@ -105,4 +102,11 @@
} }
} }
} }
// If there are more than 3 items; smaller header font size
&--max, {
.item h3 {
font-size: 28px;
}
}
} }
\ No newline at end of file
<?php <?php
$layout = get_sub_field('layout'); $layout = get_sub_field('layout');
$background = get_sub_field('background');
$total_items = count(get_sub_field('items'));
$amount = ($total_items > 3) ? 'max' : 'min';
?> ?>
<div class="content-row items-row items-row--<?php echo $layout; ?>"> <div class="content-row items-row items-row--<?php echo $layout; ?> content-row--<?php echo $background; ?> items-row--<?php echo $amount; ?>">
<div class="container"> <div class="container">
<h3><?php the_sub_field('title'); ?></h3> <h3><?php the_sub_field('title'); ?></h3>
<?php <?php
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment