127 lines
2.4 KiB
SCSS
127 lines
2.4 KiB
SCSS
@import "variables";
|
|
@import "base";
|
|
@import "helpers";
|
|
|
|
section {
|
|
top: 0;
|
|
position: sticky;
|
|
position: -webkit-sticky;
|
|
position: -moz-sticky;
|
|
position: -ms-sticky;
|
|
position: -o-sticky;
|
|
display: flex; flex-direction: column; justify-content: start;
|
|
height: 90vh;
|
|
overflow: hidden;
|
|
|
|
@media (min-width: $breakpoint) {
|
|
height: 80vh;
|
|
}
|
|
}
|
|
|
|
section,
|
|
article > header,
|
|
article > footer {
|
|
// color: $nls-color-white;
|
|
|
|
&.--selected {
|
|
|
|
}
|
|
|
|
&.--selected,
|
|
&.--full-height {
|
|
height: 100vh;
|
|
}
|
|
|
|
&.--black {
|
|
background: $nls-color-black;
|
|
color: $nls-color-white;
|
|
|
|
.teaser {
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0;
|
|
height: 100%; width: 100%;
|
|
background: linear-gradient(to top, $nls-color-black 0%, rgba($nls-color-black, 0) 50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.--green {
|
|
background: $nls-color-green;
|
|
|
|
.teaser {
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0;
|
|
height: 100%; width: 100%;
|
|
background: linear-gradient(to top, $nls-color-green 0%, rgba($nls-color-green, 0) 50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.--blue {
|
|
background: $nls-color-blue;
|
|
|
|
.teaser {
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0;
|
|
height: 100%; width: 100%;
|
|
background: linear-gradient(to top, $nls-color-blue 0%, rgba( $nls-color-blue, 0) 50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.--violet {
|
|
background: $nls-color-violet;
|
|
|
|
.teaser {
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0;
|
|
height: 100%; width: 100%;
|
|
background: linear-gradient(to top, $nls-color-violet 0%, rgba($nls-color-violet, 0) 50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.--purple {
|
|
background: $nls-color-purple;
|
|
|
|
.teaser {
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0;
|
|
height: 100%; width: 100%;
|
|
background: linear-gradient(to top, $nls-color-purple 0%, rgba($nls-color-purple, 0) 50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.--pink {
|
|
background: $nls-color-pink;
|
|
|
|
.teaser {
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute; top: 0; left: 0;
|
|
height: 100%; width: 100%;
|
|
background: linear-gradient(to top, $nls-color-pink 0%, rgba( $nls-color-pink, 0) 50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.teaser {
|
|
overflow: hidden;
|
|
padding: 5rem 3rem;
|
|
}
|
|
}
|
|
|
|
@import "cards";
|
|
@import "columns"; |