94 lines
1.7 KiB
SCSS
94 lines
1.7 KiB
SCSS
@import 'variables', 'mixin';
|
|
|
|
/**
|
|
* Table of Contents:
|
|
|
|
* 1.0 - blog-post
|
|
* 2.0 - blog-post__list
|
|
* 3.0 - blog-post__img
|
|
* 4.0 - blog-post__content
|
|
* 4.1 - blog-post__date
|
|
* 4.2 - blog-post__h
|
|
* 4.3 - blog-post__text
|
|
* 4.4 - blog-post__btn
|
|
*/
|
|
|
|
|
|
/* 1.0 - blog-post */
|
|
.blog-post {
|
|
margin: 10px 0 20px;
|
|
position: relative;
|
|
flex-grow: 1;
|
|
|
|
@include media-max(sm) {
|
|
margin: 30px 0;
|
|
}
|
|
|
|
|
|
/* 2.0 - blog-post__list */
|
|
&__list {
|
|
@include media-min(1200px) {
|
|
padding: 0 150px;
|
|
}
|
|
}
|
|
|
|
|
|
/* 3.0 - blog-post__img */
|
|
&__img {
|
|
width: 100%;
|
|
|
|
&__link {}
|
|
}
|
|
|
|
|
|
/* 4.0 - blog-post__content */
|
|
&__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
|
|
/* 4.1 - blog-post__date */
|
|
&__date {
|
|
@include absolute(15px, auto, auto, 15px);
|
|
margin: 0;
|
|
line-height: 1;
|
|
background: $primary-color;
|
|
color: #fff;
|
|
padding: 7px 10px;
|
|
font-size: 13px;
|
|
border-radius: 0;
|
|
z-index: 9;
|
|
}
|
|
|
|
|
|
/* 4.2 - blog-post__h */
|
|
&__h {
|
|
font-family: $header-font-family;
|
|
font-size: 18px;
|
|
margin: 25px 0 15px;
|
|
|
|
&__link {
|
|
color: inherit;
|
|
@extend %link-color;
|
|
}
|
|
}
|
|
|
|
|
|
/* 4.3 - blog-post__text */
|
|
&__text {
|
|
flex-grow: 1;
|
|
margin: $paragraph-margin;
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
|
|
/* 4.4 - blog-post__btn */
|
|
&__btn {
|
|
.button {}
|
|
}
|
|
} |