domsPlace/public/components/section/blog/article/FeaturedArticleSection.scss

44 lines
736 B
SCSS

/*
* Featured Blog Section
* Section for featuring a large blog item.
*
* Version:
* 1.0.0 - 2018/10/30
*/
@import '~@styles/global';
$c-featured-article--background: rgba(0,0,0,0.5);
$c-featured-article--color: white;
$c-featured-article--padding: 15px;
.c-featured-article {
position: relative;
&__image {
display: block;
width: 100%;
min-height: 75vh;
object-fit: cover;
}
&__title,
&__description {
position: absolute;
margin: 0;
padding: 0.25em;
color: $c-featured-article--color;
background: $c-featured-article--background;
}
&__title {
top: 2.5em;
left: 0.25em;
}
&__description {
bottom: 0.5em;
right: 0.5em;
max-width: 250px;
}
}