-
-
Save diggeddy/032bd79e29a1beb752b6d9d1c898e593 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* WPSP Grids */ | |
/* Single column align side image */ | |
/* Add wpsp-align class to to WPSP List shortcode wrapper */ | |
@media (min-width: 420px) { | |
.wpsp-align .wp-show-posts-inner { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
} | |
.wpsp-align .wp-show-posts-inner>div { | |
-webkit-box-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
} | |
@media (max-width: 768px) and (min-width: 420px) { | |
.wpsp-align .wp-show-posts-inner .wp-show-posts-image { | |
margin-right: 1.5em; | |
} | |
} | |
/* magazine Grid Golden Ratio 5 block standard */ | |
/* Add wpsp-grid class to WPSP List shortcode wrapper */ | |
@media (min-width: 600px) { | |
.wpsp-grid .wp-show-posts { | |
display: grid; | |
} | |
} | |
@media (min-width: 900px) { | |
.wpsp-grid .wp-show-posts { | |
grid-template-columns: repeat(8, 1fr); | |
grid-template-rows: 1fr auto; | |
} | |
.wpsp-grid .wp-show-posts article:first-child { | |
grid-column: 1 / 5; | |
grid-row: 1 / 4; | |
} | |
.wpsp-grid .wp-show-posts article:nth-child(2) { | |
grid-column: 5 / end; | |
grid-row: 1 / 2; | |
} | |
.wpsp-grid .wp-show-posts article:nth-child(3) { | |
grid-column: 5 / 7; | |
grid-row: 2 / 4; | |
} | |
.wpsp-grid .wp-show-posts article:nth-child(4) { | |
grid-column: 7 / end; | |
grid-row: 2 / 4; | |
} | |
} | |
@media (max-width: 899px) and (min-width: 600px) { | |
.wpsp-grid .wp-show-posts article { | |
grid-column: span 4; | |
} | |
.wpsp-grid .wp-show-posts article:nth-child(3), .wpsp-grid .wp-show-posts article:nth-child(4) { | |
grid-row: 3; | |
grid-column: span 2; | |
} | |
} | |
.wpsp-grid article:not(:first-child) .wp-show-posts-image a img { | |
height: 250px; | |
width: 100%; | |
-o-object-fit: cover; | |
object-fit: cover; | |
} | |
.wpsp-grid article:first-child .wp-show-posts-image a img { | |
height: 500px; | |
width: 100%; | |
-o-object-fit: cover; | |
object-fit: cover; | |
} | |
.wpsp-grid article:not(:first-child) .wp-show-posts-entry-summary, .wpsp-grid article:not(:first-child) .wp-show-posts-entry-meta-below-post, .wpsp-grid article:not(:first-child) .wpsp-read-more { | |
display: none; | |
} | |
/* WPSP Card Styling */ | |
/* Add wpsp-card class to WPSP List shortcode wrapper */ | |
.wpsp-card .wp-show-posts-meta a, .wpsp-card .wp-show-posts-meta a:visited { | |
font-size: 1em; | |
font-weight: 500; | |
text-transform: uppercase; | |
} | |
:not(.widget).wpsp-card .wp-show-posts article, .wpsp-card .wp-show-posts-image { | |
margin-bottom: 0 !important; | |
} | |
.wpsp-card .wp-show-posts-inner { | |
position: relative; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
.wpsp-card .wpsp-content-wrap { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
padding: 5% 8%; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
background-color: rgba(0, 0, 0, 0.35); | |
background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(80, 50, 50, 0.5)), to(rgba(0, 0, 0, 0))); | |
background: linear-gradient(0deg, rgba(80, 50, 50, 0.5) 30%, rgba(0, 0, 0, 0) 100%); | |
pointer-events: none; | |
} | |
.wpsp-card article { | |
position: relative; | |
overflow: hidden; | |
} | |
.wpsp-card article, .wpsp-card article .wp-show-posts-image img { | |
-webkit-backface-visibility: hidden; | |
-webkit-transition: 0.3s all ease; | |
transition: 0.3s all ease; | |
} | |
.wpsp-card article:hover .wp-show-posts-image img { | |
-webkit-transform: scale(1.1); | |
transform: scale(1.1); | |
-webkit-transition: 0.3s all ease; | |
transition: 0.3s all ease; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment