@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-error {
height: 100vh;
position: relative;
background: var(--primary);
&__image-container{
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
display: flex;
z-index: 0;
&::before{
content: '';
background: -webkit-gradient(linear, left top, left bottom, from(0), color-stop(var(--primary)), to(transparent));
background: linear-gradient(0, var(--primary), transparent);
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
}
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
&__container{
width: 100%;
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
z-index: 1;
position: relative;
}
&__content-container{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: var(--white);
--text-color: var(--white);
.content{
p{
@include fluid-type(18, 22)
}
}
}
&__error-code{
h1{
@include fluid-type(64, 104);
font-weight: 600;
}
}
}
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/error",
"title": "Error",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-error.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": true
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/error/block-error.css"
}
This component is not currently used on any pages.