main>h2,
.is-root-container>h2.wp-block-heading,
.has-arrow {
position: relative;
&:before {
position: absolute;
display: block;
width: 32px;
height: 32px;
top: 50%;
left: 0;
content: " ";
transform: translateX(-40px) translateY(-16px);
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/arrow.svg);
}
&.has-groen-color:before {
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/arrow-groen.svg);
}
&.has-paars-color:before {
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/arrow-paars.svg);
}
&.has-blauw-color:before {
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/arrow-blauw.svg);
}
&.has-pastel-blauw-color:before {
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/arrow-pastel-blauw.svg);
}
&.has-geel-color:before {
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/arrow-geel.svg);
}
&.has-roze-color:before {
background: url(//wbderuimte.nl/wp-content/themes/wbderuimte2024/images/arrow-roze.svg);
}
}
input,
select,
textarea,
button {
font-family: var(--wp--preset--font-family--lynstoneweb);
border-width: 2px;
}
.wp-block-group.has-background {
padding: 2rem;
}
.sliced {
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
} .wp-block-media-text {
& img {
aspect-ratio: 2 / 1;
object-fit: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
}
.wp-block-media-text__content {
direction: ltr;
grid-column: 2;
grid-row: 1;
padding: 2em 8% !important;
word-break: break-word;
}
} @media screen and (min-width: 600px) {
.wp-block-media-text { &.has-background {
background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) calc(100% - 4em),
rgba(255, 255, 255, 1) calc(100% - 4em),
rgba(255, 255, 255, 1) 100%),
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) calc(100% - 2em),
rgba(255, 255, 255, 1) calc(100% - 2em),
rgba(255, 255, 255, 1) 100%);
&.has-media-on-the-right {
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) calc(100% - 4em),
rgba(255, 255, 255, 1) calc(100% - 4em),
rgba(255, 255, 255, 1) 100%),
linear-gradient(180deg, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) calc(100% - 2em),
rgba(255, 255, 255, 1) calc(100% - 2em),
rgba(255, 255, 255, 1) 100%);
}
}
& .wp-block-media-text__media {
margin-top: 2em !important;
}
& .wp-block-media-text__content {
margin-bottom: 2em;
height: 100%;
padding-block: 1em;
display: flex;
flex-direction: column;
justify-content: center;
}
& img {
aspect-ratio: 2 / 1;
object-fit: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 75%);
}
}
}  .wp-block-query ul li:is(.type-projecten, .type-post) {
grid-row: span 3;
display: grid;
grid-template-rows: subgrid;
row-gap: 0;
margin-bottom: var(--wp--preset--spacing--80);
& a {
text-decoration: none;
}
& h3 {
margin-bottom: .4rem;
}
& figure {
overflow: hidden;
margin: 0;
}
& img {
transition: transform .5s;
aspect-ratio: 16/9;
object-fit: cover;
}
&:hover {
& img {
transform: scale(1.05);
}
}
&:is(.type-mensen, .type-vacatures) {
margin-bottom: var(--wp--preset--spacing--60);
& .wp-block-cover__inner-container:has(a) {
height: 100%;
& h3 {
height: 100%
}
& a {
display: flex;
width: 100%;
height: 100%;
align-items: flex-end;
}
}
}
} .wp-block-query .wp-block-post:is(.type-mensen, .type-vacatures)>div {
padding: 0;
& .wp-block-cover__inner-container {
padding: 3em 1em 1em 1em;
background: rgba(0, 0, 0, 0.15);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 3em, rgba(0, 0, 0, 0.25) 100%);
& a>div{
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.40);
}
}
} & .zoomblock{
display:flex;
text-decoration:none;
aspect-ratio:1;
min-height:unset;
padding: 0;
& img{
transition: transform .5s;
}
&:hover img{
transform: scale(1.05);
}
& .wp-block-cover__inner-container {
padding: 1em;
background: rgba(0, 0, 0, 0.15);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 3em, rgba(0, 0, 0, 0.25) 100%);
}
} .wp-block-query-pagination {
& .page-numbers {
width: 2em;
height: 2em;
padding: 0.25em 1em;
text-decoration: none;
border: 2px solid var(--wp--preset--color--zwart);
&.current {
background: var(--wp--preset--color--zwart);
color: var(--wp--preset--color--wit);
}
&.dots {
border: 0;
}
}
}
.wp-container-core-post-template-is-layout-1.wp-container-core-post-template-is-layout-1,
.wp-container-core-post-template-is-layout-2.wp-container-core-post-template-is-layout-2,
.wp-container-core-post-template-is-layout-3.wp-container-core-post-template-is-layout-3 {
grid-template-columns: 1fr;
gap: var(--wp--preset--spacing--30);
}
@media screen and (min-width: 900px) { .wp-container-core-post-template-is-layout-3.wp-container-core-post-template-is-layout-3 {
grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60);
} .wp-container-core-post-template-is-layout-2.wp-container-core-post-template-is-layout-2 {
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60);
} .wp-container-core-post-template-is-layout-1.wp-container-core-post-template-is-layout-1 {
grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--60);
}
}