first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,327 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
@@ -0,0 +1,327 @@
|
||||
/**
|
||||
* All of the CSS for your block editor functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------*/
|
||||
@@ -0,0 +1,321 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,321 @@
|
||||
/**
|
||||
* All of the CSS for your public-facing functionality should be
|
||||
* included in this file.
|
||||
*/
|
||||
/**
|
||||
* Environment for all styles (variables, additions, etc).
|
||||
*/
|
||||
/*--------------------------------------------------------------*/
|
||||
/*--------------------------------------------------------------*/
|
||||
.cnvs-block-posts .cnvs-block-post-single-excerpt {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-posts-title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background figure {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-background img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
font-family: 'object-fit: cover;';
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-ratio:before {
|
||||
content: '';
|
||||
display: table;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-ratio-landscape:before {
|
||||
padding-bottom: 75%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-overlay-link {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-share-buttons-wrap .cnvs-share-buttons-items {
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .cnvs-block-post-single-view-post-button {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.cnvs-block-posts .pagination {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-content .cnvs-block-posts article.post {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-meta {
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-outer {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner:first-child:last-child {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-list .cnvs-block-post-single-inner + .cnvs-block-post-single-inner {
|
||||
margin-top: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-grid .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-1 article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-3 article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-grid.cnvs-block-posts-columns-4 article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-inner + .cnvs-block-post-inner {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready) .cnvs-block-post-grid-col {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: 760px) {
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-right: 20px;
|
||||
padding-left: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 50%;
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-post-grid-col:nth-child(-n+2),
|
||||
.cnvs-block-posts-layout-masonry .cnvs-block-posts-inner > article:nth-child(-n+2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner {
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 100%;
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner .cnvs-block-post-grid-col:not(:first-child),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-1 .cnvs-block-posts-inner > article:not(:first-child) {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1120px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1240px) {
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 33.3333333333%;
|
||||
flex: 0 0 33.3333333333%;
|
||||
max-width: 33.3333333333%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+3),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-3 .cnvs-block-posts-inner > article:nth-child(-n+3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col,
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 25%;
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner .cnvs-block-post-grid-col:nth-child(-n+4),
|
||||
.cnvs-block-posts-layout-masonry.cnvs-block-posts-columns-4 .cnvs-block-posts-inner > article:nth-child(-n+4) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
!function(t){var e={};function n(o){if(e[o])return e[o].exports;var i=e[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(o,i,function(e){return t[e]}.bind(null,i));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=108)}({1:function(t,e,n){var o;
|
||||
/*!
|
||||
Copyright (c) 2018 Jed Watson.
|
||||
Licensed under the MIT License (MIT), see
|
||||
http://jedwatson.github.io/classnames
|
||||
*/!function(){"use strict";var n={}.hasOwnProperty;function i(){for(var t=[],e=0;e<arguments.length;e++){var o=arguments[e];if(o){var r=typeof o;if("string"===r||"number"===r)t.push(o);else if(Array.isArray(o)){if(o.length){var s=i.apply(null,o);s&&t.push(s)}}else if("object"===r)if(o.toString===Object.prototype.toString)for(var a in o)n.call(o,a)&&o[a]&&t.push(a);else t.push(o.toString())}}return t.join(" ")}t.exports?(i.default=i,t.exports=i):void 0===(o=function(){return i}.apply(e,[]))||(t.exports=o)}()},108:function(t,e,n){t.exports=n(109)},109:function(t,e,n){"use strict";n.r(e);var o=n(1),i=n.n(o),r=n(48),s=n.n(r),a=wp.hooks.addAction;function c(t){if("canvas/posts"!==t.block)return!1;if("masonry"!==t.attributes.layout)return!1;var e=t.blockProps.clientId;return e||!1}a("canvas.components.serverSideRender.onChange","canvas/posts.masonry.init",(function(t){var e=c(t);if(e){var n=document.querySelector('[data-block="'.concat(e,'"] .cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)'));n&&function(t){t.className=i()(t.className,"cnvs-block-posts-layout-masonry-colcade-ready"),t.colcadeObj=new s.a(t,{columns:".cnvs-block-post-grid-col",items:".cnvs-block-post-grid-item"})}(n)}})),a("canvas.components.serverSideRender.onBeforeChange","canvas-posts.masonry.destroy",(function(t){var e=c(t);if(e){var n=document.querySelector('[data-block="'.concat(e,'"] .cnvs-block-posts-layout-masonry-colcade-ready'));n&&function(t){t.colcadeObj&&(t.colcadeObj.destroy(),t.colcadeObj=null)}(n)}}))},48:function(t,e,n){var o,i;
|
||||
/*!
|
||||
* Colcade v0.2.0
|
||||
* Lightweight masonry layout
|
||||
* by David DeSandro
|
||||
* MIT license
|
||||
*/window,void 0===(i="function"==typeof(o=function(){function t(t,e){if((t=c(t))&&t.colcadeGUID){var n=i[t.colcadeGUID];return n.option(e),n}this.element=t,this.options={},this.option(e),this.create()}var e=t.prototype;e.option=function(t){this.options=function(t,e){for(var n in e)t[n]=e[n];return t}(this.options,t)};var n,o=0,i={};function r(e){var n=e.getAttribute("data-colcade").split(","),o={};n.forEach((function(t){var e=t.split(":"),n=e[0].trim(),i=e[1].trim();o[n]=i})),new t(e,o)}function s(t){var e=[];if(Array.isArray(t))e=t;else if(t&&"number"==typeof t.length)for(var n=0;n<t.length;n++)e.push(t[n]);else e.push(t);return e}function a(t,e){return s((e=e||document).querySelectorAll(t))}function c(t){return"string"==typeof t&&(t=document.querySelector(t)),t}return e.create=function(){this.errorCheck();var t=this.guid=++o;this.element.colcadeGUID=t,i[t]=this,this.reload(),this._windowResizeHandler=this.onWindowResize.bind(this),this._loadHandler=this.onLoad.bind(this),window.addEventListener("resize",this._windowResizeHandler),this.element.addEventListener("load",this._loadHandler,!0)},e.errorCheck=function(){var t=[];if(this.element||t.push("Bad element: "+this.element),this.options.columns||t.push("columns option required: "+this.options.columns),this.options.items||t.push("items option required: "+this.options.items),t.length)throw new Error("[Colcade error] "+t.join(". "))},e.reload=function(){this.updateColumns(),this.updateItems(),this.layout()},e.updateColumns=function(){this.columns=a(this.options.columns,this.element)},e.updateItems=function(){this.items=a(this.options.items,this.element)},e.getActiveColumns=function(){return this.columns.filter((function(t){return"none"!=getComputedStyle(t).display}))},e.layout=function(){this.activeColumns=this.getActiveColumns(),this._layout()},e._layout=function(){this.columnHeights=this.activeColumns.map((function(){return 0})),this.layoutItems(this.items)},e.layoutItems=function(t){t.forEach(this.layoutItem,this)},e.layoutItem=function(t){var e=Math.min.apply(Math,this.columnHeights),n=this.columnHeights.indexOf(e);this.activeColumns[n].appendChild(t),this.columnHeights[n]+=t.offsetHeight||1},e.append=function(t){var e=this.getQueryItems(t);this.items=this.items.concat(e),this.layoutItems(e)},e.prepend=function(t){var e=this.getQueryItems(t);this.items=e.concat(this.items),this._layout()},e.getQueryItems=function(t){t=s(t);var e=document.createDocumentFragment();return t.forEach((function(t){e.appendChild(t)})),a(this.options.items,e)},e.measureColumnHeight=function(t){var e=this.element.getBoundingClientRect();this.activeColumns.forEach((function(n,o){if(!t||n.contains(t)){var i=n.lastElementChild.getBoundingClientRect();this.columnHeights[o]=i.bottom-e.top}}),this)},e.onWindowResize=function(){clearTimeout(this.resizeTimeout),this.resizeTimeout=setTimeout(function(){this.onDebouncedResize()}.bind(this),100)},e.onDebouncedResize=function(){var t=this.getActiveColumns(),e=t.length==this.activeColumns.length,n=!0;this.activeColumns.forEach((function(e,o){n=n&&e==t[o]})),e&&n||(this.activeColumns=t,this._layout())},e.onLoad=function(t){this.measureColumnHeight(t.target)},e.destroy=function(){this.items.forEach((function(t){this.element.appendChild(t)}),this),window.removeEventListener("resize",this._windowResizeHandler),this.element.removeEventListener("load",this._loadHandler,!0),delete this.element.colcadeGUID,delete i[this.guid]},n=function(){a("[data-colcade]").forEach(r)},"complete"!=document.readyState?document.addEventListener("DOMContentLoaded",n):n(),t.data=function(t){var e=(t=c(t))&&t.colcadeGUID;return e&&i[e]},t.makeJQueryPlugin=function(e){function n(t,n,o){var i;return t.each((function(t,r){var s=e.data(r,"colcade");if(s){var a=s[n].apply(s,o);i=void 0===i?a:i}})),void 0!==i?i:t}function o(n,o){n.each((function(n,i){var r=e.data(i,"colcade");r?(r.option(o),r.layout()):(r=new t(i,o),e.data(i,"colcade",r))}))}(e=e||window.jQuery)&&(e.fn.colcade=function(t){if("string"==typeof t){var e=Array.prototype.slice.call(arguments,1);return n(this,t,e)}return o(this,t),this})},t.makeJQueryPlugin(),t})?o.call(e,n,e,t):o)||(t.exports=i)}});
|
||||
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import classnames from 'classnames';
|
||||
import Colcade from 'colcade';
|
||||
|
||||
const {
|
||||
addAction,
|
||||
} = wp.hooks;
|
||||
|
||||
/**
|
||||
* Prepare Masonry layout with Colcade script.
|
||||
*/
|
||||
function maybePrepareMasonryLayout(element) {
|
||||
element.className = classnames(
|
||||
element.className,
|
||||
'cnvs-block-posts-layout-masonry-colcade-ready'
|
||||
);
|
||||
|
||||
element.colcadeObj = new Colcade(element, {
|
||||
columns: '.cnvs-block-post-grid-col',
|
||||
items: '.cnvs-block-post-grid-item'
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy Masonry layout with Colcade script.
|
||||
*/
|
||||
function maybeDestroyMasonryLayout(element) {
|
||||
if (element.colcadeObj) {
|
||||
element.colcadeObj.destroy();
|
||||
element.colcadeObj = null;
|
||||
}
|
||||
}
|
||||
|
||||
function getMasonryBlockId(props) {
|
||||
if ('canvas/posts' !== props.block) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ('masonry' !== props.attributes.layout) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const clientId = props.blockProps.clientId;
|
||||
|
||||
if (!clientId) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return clientId;
|
||||
}
|
||||
|
||||
addAction('canvas.components.serverSideRender.onChange', 'canvas/posts.masonry.init', function (props) {
|
||||
const clientId = getMasonryBlockId(props);
|
||||
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)`);
|
||||
|
||||
if (element) {
|
||||
maybePrepareMasonryLayout(element);
|
||||
}
|
||||
});
|
||||
|
||||
addAction('canvas.components.serverSideRender.onBeforeChange', 'canvas-posts.masonry.destroy', function (props) {
|
||||
const clientId = getMasonryBlockId(props);
|
||||
|
||||
if (!clientId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const element = document.querySelector(`[data-block="${clientId}"] .cnvs-block-posts-layout-masonry-colcade-ready`);
|
||||
|
||||
if (element) {
|
||||
maybeDestroyMasonryLayout(element);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,366 @@
|
||||
/*!
|
||||
* Colcade v0.2.0
|
||||
* Lightweight masonry layout
|
||||
* by David DeSandro
|
||||
* MIT license
|
||||
*/
|
||||
|
||||
/*jshint browser: true, undef: true, unused: true */
|
||||
|
||||
( function( window, factory ) {
|
||||
// universal module definition
|
||||
/*jshint strict: false */
|
||||
/*global define: false, module: false */
|
||||
if ( typeof define == 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( factory );
|
||||
} else if ( typeof module == 'object' && module.exports ) {
|
||||
// CommonJS
|
||||
module.exports = factory();
|
||||
} else {
|
||||
// browser global
|
||||
window.Colcade = factory();
|
||||
}
|
||||
|
||||
}( window, function factory() {
|
||||
|
||||
// -------------------------- Colcade -------------------------- //
|
||||
|
||||
function Colcade( element, options ) {
|
||||
element = getQueryElement( element );
|
||||
|
||||
// do not initialize twice on same element
|
||||
if ( element && element.colcadeGUID ) {
|
||||
var instance = instances[ element.colcadeGUID ];
|
||||
instance.option( options );
|
||||
return instance;
|
||||
}
|
||||
|
||||
this.element = element;
|
||||
// options
|
||||
this.options = {};
|
||||
this.option( options );
|
||||
// kick things off
|
||||
this.create();
|
||||
}
|
||||
|
||||
var proto = Colcade.prototype;
|
||||
|
||||
proto.option = function( options ) {
|
||||
this.options = extend( this.options, options );
|
||||
};
|
||||
|
||||
// globally unique identifiers
|
||||
var GUID = 0;
|
||||
// internal store of all Colcade intances
|
||||
var instances = {};
|
||||
|
||||
proto.create = function() {
|
||||
this.errorCheck();
|
||||
// add guid for Colcade.data
|
||||
var guid = this.guid = ++GUID;
|
||||
this.element.colcadeGUID = guid;
|
||||
instances[ guid ] = this; // associate via id
|
||||
// update initial properties & layout
|
||||
this.reload();
|
||||
// events
|
||||
this._windowResizeHandler = this.onWindowResize.bind( this );
|
||||
this._loadHandler = this.onLoad.bind( this );
|
||||
window.addEventListener( 'resize', this._windowResizeHandler );
|
||||
this.element.addEventListener( 'load', this._loadHandler, true );
|
||||
};
|
||||
|
||||
proto.errorCheck = function() {
|
||||
var errors = [];
|
||||
if ( !this.element ) {
|
||||
errors.push( 'Bad element: ' + this.element );
|
||||
}
|
||||
if ( !this.options.columns ) {
|
||||
errors.push( 'columns option required: ' + this.options.columns );
|
||||
}
|
||||
if ( !this.options.items ) {
|
||||
errors.push( 'items option required: ' + this.options.items );
|
||||
}
|
||||
|
||||
if ( errors.length ) {
|
||||
throw new Error( '[Colcade error] ' + errors.join('. ') );
|
||||
}
|
||||
};
|
||||
|
||||
// update properties and do layout
|
||||
proto.reload = function() {
|
||||
this.updateColumns();
|
||||
this.updateItems();
|
||||
this.layout();
|
||||
};
|
||||
|
||||
proto.updateColumns = function() {
|
||||
this.columns = querySelect( this.options.columns, this.element );
|
||||
};
|
||||
|
||||
proto.updateItems = function() {
|
||||
this.items = querySelect( this.options.items, this.element );
|
||||
};
|
||||
|
||||
proto.getActiveColumns = function() {
|
||||
return this.columns.filter( function( column ) {
|
||||
var style = getComputedStyle( column );
|
||||
return style.display != 'none';
|
||||
});
|
||||
};
|
||||
|
||||
// ----- layout ----- //
|
||||
|
||||
// public, updates activeColumns
|
||||
proto.layout = function() {
|
||||
this.activeColumns = this.getActiveColumns();
|
||||
this._layout();
|
||||
};
|
||||
|
||||
// private, does not update activeColumns
|
||||
proto._layout = function() {
|
||||
// reset column heights
|
||||
this.columnHeights = this.activeColumns.map( function() {
|
||||
return 0;
|
||||
});
|
||||
// layout all items
|
||||
this.layoutItems( this.items );
|
||||
};
|
||||
|
||||
proto.layoutItems = function( items ) {
|
||||
items.forEach( this.layoutItem, this );
|
||||
};
|
||||
|
||||
proto.layoutItem = function( item ) {
|
||||
// layout item by appending to column
|
||||
var minHeight = Math.min.apply( Math, this.columnHeights );
|
||||
var index = this.columnHeights.indexOf( minHeight );
|
||||
this.activeColumns[ index ].appendChild( item );
|
||||
// at least 1px, if item hasn't loaded
|
||||
// Not exactly accurate, but it's cool
|
||||
this.columnHeights[ index ] += item.offsetHeight || 1;
|
||||
};
|
||||
|
||||
// ----- adding items ----- //
|
||||
|
||||
proto.append = function( elems ) {
|
||||
var items = this.getQueryItems( elems );
|
||||
// add items to collection
|
||||
this.items = this.items.concat( items );
|
||||
// lay them out
|
||||
this.layoutItems( items );
|
||||
};
|
||||
|
||||
proto.prepend = function( elems ) {
|
||||
var items = this.getQueryItems( elems );
|
||||
// add items to collection
|
||||
this.items = items.concat( this.items );
|
||||
// lay out everything
|
||||
this._layout();
|
||||
};
|
||||
|
||||
proto.getQueryItems = function( elems ) {
|
||||
elems = makeArray( elems );
|
||||
var fragment = document.createDocumentFragment();
|
||||
elems.forEach( function( elem ) {
|
||||
fragment.appendChild( elem );
|
||||
});
|
||||
return querySelect( this.options.items, fragment );
|
||||
};
|
||||
|
||||
// ----- measure column height ----- //
|
||||
|
||||
proto.measureColumnHeight = function( elem ) {
|
||||
var boundingRect = this.element.getBoundingClientRect();
|
||||
this.activeColumns.forEach( function( column, i ) {
|
||||
// if elem, measure only that column
|
||||
// if no elem, measure all columns
|
||||
if ( !elem || column.contains( elem ) ) {
|
||||
var lastChildRect = column.lastElementChild.getBoundingClientRect();
|
||||
// not an exact calculation as it includes top border, and excludes item bottom margin
|
||||
this.columnHeights[ i ] = lastChildRect.bottom - boundingRect.top;
|
||||
}
|
||||
}, this );
|
||||
};
|
||||
|
||||
// ----- events ----- //
|
||||
|
||||
proto.onWindowResize = function() {
|
||||
clearTimeout( this.resizeTimeout );
|
||||
this.resizeTimeout = setTimeout( function() {
|
||||
this.onDebouncedResize();
|
||||
}.bind( this ), 100 );
|
||||
};
|
||||
|
||||
proto.onDebouncedResize = function() {
|
||||
var activeColumns = this.getActiveColumns();
|
||||
// check if columns changed
|
||||
var isSameLength = activeColumns.length == this.activeColumns.length;
|
||||
var isSameColumns = true;
|
||||
this.activeColumns.forEach( function( column, i ) {
|
||||
isSameColumns = isSameColumns && column == activeColumns[i];
|
||||
});
|
||||
if ( isSameLength && isSameColumns ) {
|
||||
return;
|
||||
}
|
||||
// activeColumns changed
|
||||
this.activeColumns = activeColumns;
|
||||
this._layout();
|
||||
};
|
||||
|
||||
proto.onLoad = function( event ) {
|
||||
this.measureColumnHeight( event.target );
|
||||
};
|
||||
|
||||
// ----- destroy ----- //
|
||||
|
||||
proto.destroy = function() {
|
||||
// move items back to container
|
||||
this.items.forEach( function( item ) {
|
||||
this.element.appendChild( item );
|
||||
}, this );
|
||||
// remove events
|
||||
window.removeEventListener( 'resize', this._windowResizeHandler );
|
||||
this.element.removeEventListener( 'load', this._loadHandler, true );
|
||||
// remove data
|
||||
delete this.element.colcadeGUID;
|
||||
delete instances[ this.guid ];
|
||||
};
|
||||
|
||||
// -------------------------- HTML init -------------------------- //
|
||||
|
||||
docReady( function() {
|
||||
var dataElems = querySelect('[data-colcade]');
|
||||
dataElems.forEach( htmlInit );
|
||||
});
|
||||
|
||||
function htmlInit( elem ) {
|
||||
// convert attribute "foo: bar, qux: baz" into object
|
||||
var attr = elem.getAttribute('data-colcade');
|
||||
var attrParts = attr.split(',');
|
||||
var options = {};
|
||||
attrParts.forEach( function( part ) {
|
||||
var pair = part.split(':');
|
||||
var key = pair[0].trim();
|
||||
var value = pair[1].trim();
|
||||
options[ key ] = value;
|
||||
});
|
||||
|
||||
new Colcade( elem, options );
|
||||
}
|
||||
|
||||
Colcade.data = function( elem ) {
|
||||
elem = getQueryElement( elem );
|
||||
var id = elem && elem.colcadeGUID;
|
||||
return id && instances[ id ];
|
||||
};
|
||||
|
||||
// -------------------------- jQuery -------------------------- //
|
||||
|
||||
Colcade.makeJQueryPlugin = function( $ ) {
|
||||
$ = $ || window.jQuery;
|
||||
if ( !$ ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$.fn.colcade = function( arg0 /*, arg1 */) {
|
||||
// method call $().colcade( 'method', { options } )
|
||||
if ( typeof arg0 == 'string' ) {
|
||||
// shift arguments by 1
|
||||
var args = Array.prototype.slice.call( arguments, 1 );
|
||||
return methodCall( this, arg0, args );
|
||||
}
|
||||
// just $().colcade({ options })
|
||||
plainCall( this, arg0 );
|
||||
return this;
|
||||
};
|
||||
|
||||
function methodCall( $elems, methodName, args ) {
|
||||
var returnValue;
|
||||
$elems.each( function( i, elem ) {
|
||||
// get instance
|
||||
var colcade = $.data( elem, 'colcade' );
|
||||
if ( !colcade ) {
|
||||
return;
|
||||
}
|
||||
// apply method, get return value
|
||||
var value = colcade[ methodName ].apply( colcade, args );
|
||||
// set return value if value is returned, use only first value
|
||||
returnValue = returnValue === undefined ? value : returnValue;
|
||||
});
|
||||
return returnValue !== undefined ? returnValue : $elems;
|
||||
}
|
||||
|
||||
function plainCall( $elems, options ) {
|
||||
$elems.each( function( i, elem ) {
|
||||
var colcade = $.data( elem, 'colcade' );
|
||||
if ( colcade ) {
|
||||
// set options & init
|
||||
colcade.option( options );
|
||||
colcade.layout();
|
||||
} else {
|
||||
// initialize new instance
|
||||
colcade = new Colcade( elem, options );
|
||||
$.data( elem, 'colcade', colcade );
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// try making plugin
|
||||
Colcade.makeJQueryPlugin();
|
||||
|
||||
// -------------------------- utils -------------------------- //
|
||||
|
||||
function extend( a, b ) {
|
||||
for ( var prop in b ) {
|
||||
a[ prop ] = b[ prop ];
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
// turn element or nodeList into an array
|
||||
function makeArray( obj ) {
|
||||
var ary = [];
|
||||
if ( Array.isArray( obj ) ) {
|
||||
// use object if already an array
|
||||
ary = obj;
|
||||
} else if ( obj && typeof obj.length == 'number' ) {
|
||||
// convert nodeList to array
|
||||
for ( var i=0; i < obj.length; i++ ) {
|
||||
ary.push( obj[i] );
|
||||
}
|
||||
} else {
|
||||
// array of single index
|
||||
ary.push( obj );
|
||||
}
|
||||
return ary;
|
||||
}
|
||||
|
||||
// get array of elements
|
||||
function querySelect( selector, elem ) {
|
||||
elem = elem || document;
|
||||
var elems = elem.querySelectorAll( selector );
|
||||
return makeArray( elems );
|
||||
}
|
||||
|
||||
function getQueryElement( elem ) {
|
||||
if ( typeof elem == 'string' ) {
|
||||
elem = document.querySelector( elem );
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
function docReady( onReady ) {
|
||||
if ( document.readyState == 'complete' ) {
|
||||
onReady();
|
||||
return;
|
||||
}
|
||||
document.addEventListener( 'DOMContentLoaded', onReady );
|
||||
}
|
||||
|
||||
// -------------------------- end -------------------------- //
|
||||
|
||||
return Colcade;
|
||||
|
||||
}));
|
||||
@@ -0,0 +1,134 @@
|
||||
<?php
|
||||
/**
|
||||
* Grid and Masonry layout template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
* @var $posts - all available posts
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
$columns = isset( $options['columns'] ) ? $options['columns'] : false;
|
||||
|
||||
$class_name = $attributes['className'];
|
||||
|
||||
if ( $columns ) {
|
||||
$class_name .= ' cnvs-block-posts-columns-' . $columns;
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $class_name ); ?>">
|
||||
<div class="cnvs-block-posts-inner">
|
||||
<?php
|
||||
while ( $posts->have_posts() ) {
|
||||
$posts->the_post();
|
||||
?>
|
||||
<article <?php post_class( 'masonry' === $attributes['layout'] ? 'cnvs-block-post-grid-item' : '' ); ?>>
|
||||
<div class="cnvs-block-post-single-outer">
|
||||
<?php if ( has_post_thumbnail() ) { ?>
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<div class="entry-thumbnail">
|
||||
<div class="cnvs-overlay cnvs-overlay-ratio cnvs-ratio-landscape">
|
||||
<div class="cnvs-overlay-background">
|
||||
<a href="<?php the_permalink(); ?>" class="cnvs-overlay-link">
|
||||
<?php the_post_thumbnail( $attributes['imageSize'] ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<header>
|
||||
<?php
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, 'category' );
|
||||
|
||||
// Post Title.
|
||||
$tag = apply_filters( 'canvas_block_posts_title_tag', 'h3', $attributes, $options );
|
||||
the_title( '<' . $tag . ' class="cnvs-block-posts-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></' . $tag . '>' );
|
||||
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, cnvs_allowed_post_meta( true, 'category' ) );
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showExcerpt'] ) && $attributes['showExcerpt'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-excerpt">
|
||||
<?php
|
||||
the_excerpt();
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showViewPostButton'] ) && $attributes['showViewPostButton'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-view-post-button">
|
||||
<?php cnvs_print_gutenberg_blocks_button( $attributes['buttonLabel'], get_permalink(), '', 'button', $attributes ); ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( function_exists( 'powerkit_share_buttons_exists' ) && powerkit_share_buttons_exists( 'block-posts' ) ) {
|
||||
powerkit_share_buttons_location( 'block-posts' );
|
||||
}
|
||||
?>
|
||||
</header><!-- .entry-header -->
|
||||
</div><!-- .post-inner -->
|
||||
|
||||
</div><!-- .post-outer -->
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
|
||||
// Prepare Masonry columns for Colcade.
|
||||
if ( 'masonry' === $attributes['layout'] ) {
|
||||
for ( $i = 1; $i <= $columns; $i++ ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-grid-col cnvs-block-post-grid-col--<?php echo esc_attr( $i ); ?>"></div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showPagination'] ) && $attributes['showPagination'] ) {
|
||||
$total_pages = $posts->max_num_pages;
|
||||
|
||||
if ( $total_pages > 1 ) {
|
||||
$current_page = max( 1, get_query_var( 'paged' ) );
|
||||
|
||||
$base_url = cnvs_get_block_posts_page_url( $attributes );
|
||||
|
||||
if ( $base_url ) {
|
||||
echo '<nav class="navigation pagination" role="navigation">';
|
||||
echo '<h2 class="screen-reader-text">' . esc_html__( 'Posts navigation', 'canvas' ) . '</h2>';
|
||||
echo '<div class="nav-links">';
|
||||
echo cnvs_paginate_links(
|
||||
array(
|
||||
'base' => $base_url,
|
||||
'format' => '%#%',
|
||||
'current' => $current_page,
|
||||
'total' => $total_pages,
|
||||
'merge_query_vars' => false,
|
||||
)
|
||||
); // XSS.
|
||||
echo '</div>';
|
||||
echo '</nav>';
|
||||
} else {
|
||||
cnvs_alert_warning( esc_html__( 'Please select a page for your blog posts in Settings → Reading to display pagination.', 'canvas' ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
@@ -0,0 +1,124 @@
|
||||
<?php
|
||||
/**
|
||||
* List layout template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
* @var $posts - all available posts
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
// when layout is not selected, used list.php
|
||||
// but we don't need to print any html in this situation.
|
||||
if ( ! isset( $attributes['layout'] ) || ! $attributes['layout'] ) {
|
||||
return;
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="<?php echo esc_attr( $attributes['className'] ); ?>">
|
||||
<div class="cnvs-block-posts-inner">
|
||||
<?php
|
||||
|
||||
while ( $posts->have_posts() ) {
|
||||
$posts->the_post();
|
||||
?>
|
||||
<article <?php post_class( 'masonry' === $attributes['layout'] ? 'cnvs-block-post-grid-item' : '' ); ?>>
|
||||
<div class="cnvs-block-post-single-outer">
|
||||
<?php if ( has_post_thumbnail() ) { ?>
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<div class="entry-thumbnail">
|
||||
<div class="cnvs-overlay cnvs-overlay-ratio cnvs-ratio-landscape">
|
||||
<div class="cnvs-overlay-background">
|
||||
<a href="<?php the_permalink(); ?>" class="cnvs-overlay-link">
|
||||
<?php the_post_thumbnail( $attributes['imageSize'] ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
|
||||
<div class="cnvs-block-post-single-inner">
|
||||
<header>
|
||||
<?php
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, 'category' );
|
||||
|
||||
// Post Title.
|
||||
$tag = apply_filters( 'canvas_block_posts_title_tag', 'h3', $attributes, $options );
|
||||
the_title( '<' . $tag . ' class="cnvs-block-posts-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></' . $tag . '>' );
|
||||
|
||||
// Post Meta.
|
||||
cnvs_block_post_meta( $attributes, cnvs_allowed_post_meta( true, 'category' ) );
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showExcerpt'] ) && $attributes['showExcerpt'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-excerpt">
|
||||
<?php
|
||||
the_excerpt();
|
||||
?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showViewPostButton'] ) && $attributes['showViewPostButton'] ) {
|
||||
?>
|
||||
<div class="cnvs-block-post-single-view-post-button">
|
||||
<?php cnvs_print_gutenberg_blocks_button( $attributes['buttonLabel'], get_permalink(), '', 'button', $attributes ); ?>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<?php
|
||||
if ( function_exists( 'powerkit_share_buttons_exists' ) && powerkit_share_buttons_exists( 'block-posts' ) ) {
|
||||
powerkit_share_buttons_location( 'block-posts' );
|
||||
}
|
||||
?>
|
||||
</header><!-- .entry-header -->
|
||||
</div><!-- .post-inner -->
|
||||
|
||||
</div><!-- .post-outer -->
|
||||
</article>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
</div>
|
||||
|
||||
<?php
|
||||
if ( isset( $attributes['showPagination'] ) && $attributes['showPagination'] ) {
|
||||
$total_pages = $posts->max_num_pages;
|
||||
|
||||
if ( $total_pages > 1 ) {
|
||||
$current_page = max( 1, get_query_var( 'paged' ) );
|
||||
|
||||
$base_url = cnvs_get_block_posts_page_url( $attributes );
|
||||
|
||||
if ( $base_url ) {
|
||||
echo '<nav class="navigation pagination" role="navigation">';
|
||||
echo '<h2 class="screen-reader-text">' . esc_html__( 'Posts navigation', 'canvas' ) . '</h2>';
|
||||
echo '<div class="nav-links">';
|
||||
echo cnvs_paginate_links(
|
||||
array(
|
||||
'base' => $base_url,
|
||||
'format' => '%#%',
|
||||
'current' => $current_page,
|
||||
'total' => $total_pages,
|
||||
'merge_query_vars' => false,
|
||||
)
|
||||
); // XSS.
|
||||
echo '</div>';
|
||||
echo '</nav>';
|
||||
} else {
|
||||
cnvs_alert_warning( esc_html__( 'Please select a page for your blog posts in Settings → Reading to display pagination.', 'canvas' ) );
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
@@ -0,0 +1,13 @@
|
||||
<?php
|
||||
/**
|
||||
* Masonry layout template
|
||||
*
|
||||
* @var $attributes - block attributes
|
||||
* @var $options - layout options
|
||||
* @var $posts - all available posts
|
||||
*
|
||||
* @package Canvas
|
||||
*/
|
||||
|
||||
// As Masonry layout is almost the same like Grid, we can use HTML from Grid.
|
||||
require dirname( __FILE__ ) . '/grid.php';
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* Posts
|
||||
*/
|
||||
( function( $ ) {
|
||||
|
||||
function canvasInitPostsMasonry() {
|
||||
$( '.cnvs-block-posts-layout-masonry:not(.cnvs-block-posts-layout-masonry-colcade-ready)' )
|
||||
.addClass( 'cnvs-block-posts-layout-masonry-colcade-ready' )
|
||||
.each( function() {
|
||||
new Colcade( this, {
|
||||
columns: '.cnvs-block-post-grid-col',
|
||||
items: '.cnvs-block-post-grid-item'
|
||||
});
|
||||
} );
|
||||
}
|
||||
|
||||
$( document ).ready( function() {
|
||||
canvasInitPostsMasonry();
|
||||
$( document.body ).on( 'post-load', function() {
|
||||
canvasInitPostsMasonry();
|
||||
} );
|
||||
} );
|
||||
|
||||
} )( jQuery );
|
||||
Reference in New Issue
Block a user