src/components/ReadNext/ReadNext.css
.read-next {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
margin-top: 10rem;
}
.read-next-story {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-width: 50%;
text-decoration: none;
position: relative;
text-align: center;
color: #fff;
background: #222 no-repeat center center;
background-size: cover;
overflow: hidden;
}
.read-next-story::before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
transition: all 0.5s ease;
}
.read-next-story:hover::before {
background: rgba(0, 0, 0, 0.8);
transition: all 0.2s ease;
}
.read-next-story .post::before {
content: "Read This Next";
padding: 4px 10px 5px;
text-transform: uppercase;
font-size: 1.1rem;
font-family: "Open Sans", sans-serif;
color: rgba(255, 255, 255, 0.8);
border: rgba(255, 255, 255, 0.5) 1px solid;
border-radius: 4px;
transition: all 0.5s ease;
}
.read-next-story:hover .post::before {
color: #222;
background: #fff;
transition: all 0.2s ease;
}
.read-next-story .post {
padding-top: 6rem;
padding-bottom: 6rem;
}
.read-next-story.prev .post::before {
content: "You Might Enjoy";
}
.read-next-story h2 {
margin-top: 1rem;
color: #fff;
}
.read-next-story p {
margin: 0;
color: rgba(255, 255, 255 0.8);
}
/* Special styles for posts with no cover images */
.read-next-story.no-cover {
background: #f5f8fa;
}
.read-next-story.no-cover::before {
display: none;
}
.read-next-story.no-cover .post::before {
color: rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.2);
}
.read-next-story.no-cover h2 {
color: rgba(0, 0, 0, 0.8);
}
.read-next-story.no-cover p {
color: rgba(0, 0, 0, 0.5);
}
/* if there are two posts without covers, put a border between them */
.read-next-story.no-cover + .read-next-story.no-cover {
border-left: rgba(0, 0, 100, 0.04) 1px solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Correctly position site-footer when next to the .read-next container */
.read-next + .site-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0;
}
/* ==========================================================================
Media Queries - Smaller than 900px
========================================================================== */
@media only screen and (max-width: 900px) {
.read-next {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 4rem;
}
.read-next p {
display: none;
}
.read-next-story.no-cover + .read-next-story.no-cover {
border-top: rgba(0, 0, 100, 0.06) 1px solid;
border-left: none;
}
}
/* ==========================================================================
Media Queries - Smaller than 500px
========================================================================== */
@media only screen and (max-width: 500px) {
.read-next {
margin-top: 2rem;
margin-bottom: -37px;
}
.read-next .post {
width: 100%;
}
}