Skip to content

Instantly share code, notes, and snippets.

@ItsCosmas
Created Nov 27, 2019
Embed
What would you like to do?
@import '../../assets/scss/abstracts/variables';
@import '../../assets/scss/abstracts/mixins';
.blog {
padding: 4rem;
&__section {
padding: 2rem;
}
&__featured {
padding: 2rem;
display: grid;
grid-template-columns: repeat(2, calc(50% - 20px));
grid-column-gap: 40px;
&-1 {
flex: 1;
grid-row: 1 / span 3;
grid-column: 1;
}
&-2 {
flex: 1;
grid-column: 2;
}
&-3 {
flex: 1;
grid-column: 2;
}
&-4 {
flex: 1;
grid-column: 2;
}
}
// Card Components for blogs
&__card {
&-row {
display: flex;
flex-direction: row;
&__fig {
width: 185px;
font-size: 0;
line-height: 0;
margin-right: 20px;
margin-bottom: 40px;
}
}
&-fig {
text-align: center;
font-size: 0;
line-height: 0;
flex: none;
margin: 0 0 20px;
}
&-link {
@include ResetLink();
}
&-img {
@include ResponsiveImage();
opacity: 0.8;
}
&-title {
font-size: 24px;
line-height: 30px;
&:hover {
color: $color-primary;
}
}
&-tag {
text-transform: uppercase;
color: #01adb9;
font-weight: 700;
font-size: 12px;
line-height: 14px;
}
&-desc {
margin: 10px 0 0 0;
font-size: 14px;
line-height: 20px;
}
}
&__chronological {
padding: 2rem;
display: flex;
&-main {
padding: 0 1rem;
flex: 70%;
}
&-aside {
flex: 1;
padding: 0 1rem;
background: #EBF3F4;
}
}
&__editorial {
padding: 2rem;
display: flex;
justify-content: space-between;
&>div {
flex: 1 1 20%;
margin-left: 5px;
margin-right: 5px;
max-width: calc(20% - 10px);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment