_sass/_components/blog-post.scss
// Blog post
// ==========================
.post-feature_image {
background-position: center;
background-size: cover;
height: 20rem;
margin: 0;
position: relative;
@include at-media('tablet') {
height: 23rem;
}
figcaption {
background: rgba(color('gray-cool-5'), 0.85);
bottom: 0;
color: $color-black;
line-height: $paragraph-line-height;
font-size: $tiny-font-size;
font-style: italic;
max-width: 40%;
padding: ($spacer-margins / 2) $spacer-margins;
position: absolute;
right: 0;
}
}
.single-post {
article {
@include u-margin-bottom($section-margins);
@include at-media('tablet-lg') {
@include u-margin-x(auto);
max-width: 61rem;
}
.image-feature-small {
margin-top: 0;
}
img {
@include u-margin-top($theme-site-margins-width);
}
img.pquote-img,
.pquote img {
margin-bottom: $paragraph-margins;
margin-right: 0;
margin-top: 0;
@include at-media('tablet') {
margin-bottom: 0;
margin-right: $paragraph-margins;
}
}
figure {
@include u-margin-top($theme-site-margins-width);
text-align: center; // center image if less than full width
img {
@include u-margin-top(0);
}
}
}
}
.post-header {
margin-bottom: 4rem;
}
.posts {
ul {
@include unstyled-list;
}
}
// ===icons====
.icon-list-blog {
display: flex;
margin-bottom: 1rem;
@include at-media('tablet') {
margin-bottom: 1rem;
}
&:last-of-type {
margin-bottom: 0;
}
}
.icon-list-image-blog {
margin: 0;
margin-right: $theme-site-margins-width;
svg {
width: 50px;
height: 50px;
}
}
.icon-list-text-blog {
margin-top: 2em;
.p-bold {
margin-bottom: $spacer-margins;
}
&:last-of-type p {
margin-top: 0;
}
}
.icon-list-wrapper-blog {
padding-left: 0;
}