File: D:/HostingSpaces/SBogers10/reiskick.komma.nl/resources/sass/6-Organisms/_organisms.blog.scss
.o-blog__heading {
font-size: 1.6rem;
color: palette(neutral, 800);
}
.o-blog__article {
@include owl(space(4));
position: relative;
}
.o-blog__link {
display: block;
cursor: pointer;
text-decoration: none;
transition: background-color 150ms linear;
&::before {
content: '';
display: block;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
border: 2px solid palette(neutral, 900);
transition: border 150ms linear;
}
&:hover {
background-color: palette(neutral, 100);
&::before {
border-color: palette(neutral, 300);
}
}
&:focus {
outline-color: palette(feedback, focus);
}
@include mq(m) {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
}
.o-blog__body {
flex-grow: 1;
padding: column(1);
@include mq(m) {
order: 1;
padding: space(6) column(1);
}
}
.o-blog__image {
position: relative;
width: 100%;
padding-bottom: 55%;
@include mq(m) {
flex: none;
order: 2;
width: column(2,8);
padding-bottom: column(2,8);
}
}
.o-blog__bg-image {
position: absolute;
background-size: cover;
background-position: center;
top: column(1);
right: column(1);
width: calc(100% - #{column(2)});
height: calc(100% - #{column(1)});
@include mq(m) {
top: space(1);
right: space(1);
width: calc(100% - #{space(2)});
height: calc(100% - #{space(2)});
}
}
// Body content:
.o-blog__intro {
margin-top: space(3);
}
.o-blog__timestamp {
display: block;
margin-top: space(2);
color: palette(neutral, 400);
}
.o-blog__action {
display: flex;
justify-content: flex-start;
align-items: center;
margin-top: space(1);
color: palette(neutral, 1000);
}
.o-blog__readmore {
margin-right: space(1);
}
.o-blog__footer {
margin-top: space(4);
text-align: center;
}