personal-site/assets/scss/layouts/_half.scss
2020-04-16 22:11:17 +02:00

55 lines
898 B
SCSS

.half {
main {
display: flex;
flex-direction: column;
@include min(md) {
flex-direction: row;
height: 100vh;
width: 100vw;
align-items: stretch;
}
.pageTitle {
color: $primary-color;
font-weight: 300;
}
> div {
padding: 20px;
@include min(md) {
flex: 1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
padding: $padding;
}
}
}
.socialLinks__link {
@include button--outline();
}
&__content {
order: 2;
&.half--left {
@include min(md) {
order: 1;
flex-basis: 0.75;
max-width: 40vw;
}
}
}
&__image {
min-height: 50vh;
order: 1;
background-size: cover;
background-position: center;
@include responsivebackground("half-sm.jpg", "half-md.jpg", "half-lg.jpg");
}
}