@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-split-content-post {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4/3;
@include bp($lg, true) {
min-height: 80vh;
}
img {
border-radius: 50px;
transition: .3s ease-in-out;
@include bp($md, true) {
border-radius: 30px;
}
}
&__post {
position: absolute;
right: 1rem;
bottom: 1rem;
background: var(--white);
border-radius: 50px;
padding: 1.5rem;
max-width: calc(100% - 3rem);
min-height: 10rem;
display: flex;
@include bp($md, true) {
border-radius: 30px;
}
@include bp($lg) {
right: 2rem;
bottom: 2rem;
max-width: 40%;
}
&-title{
color: var(--primary);
@include fluid-type(18, 24);
font-weight: 600;
/* clamp to 4 lines */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
margin-bottom: 1.5rem;
}
&-description{
margin-top: 1rem;
margin-bottom: 2rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
&-link{
width: 40px;
height: 40px;
border: solid var(--primary) 1px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
transition: .3s ease-in-out;
float: right;
cursor: pointer;
.ico{
width: 20px;
height: 20px;
&--arrow-right{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
}
}
}
}
.author {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
img {
width: 40px;
height: 40px;
}
}
&:hover {
img {
transform: scale(1.1);
}
.block-split-content-post {
&__post {
&-link {
background-color: var(--secondary);
border-color: var(--secondary);
.ico--arrow-right{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
}
}
}
}
}
}
.block-split-content--swap .block-split-content-post__post {
&__post {
left: 1rem;
right: unset;
@include bp($lg) {
left: 2rem;
right: unset;
}
}
}
.swap-sides .block-split-content-post__post {
left: 1rem;
right: unset;
@include bp($lg) {
left: 2rem;
right: unset;
}
}
class SplitContentPost {
block;
constructor(block) {
this.block = block;
this.init();
}
init() {
/* Swiper Example
this.swiperElem = this.block.querySelector('.swiper');
this.swiper = new Swiper(this.swiperElem, {
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'custom',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
});
*/
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-split-content-post').forEach((block) => {
new SplitContentPost(block);
})
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/split-content-post",
"title": "Split Content Post",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-split-content-post.php"
},
"parent": [ "strategiq/split-content" ],
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Split Content Post",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/split-content-post/block-split-content-post.css"
}