You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.7 KiB
SCSS
94 lines
1.7 KiB
SCSS
///
|
|
/// Atmosphere by Pixelarity
|
|
/// pixelarity.com | hello@pixelarity.com
|
|
/// License: pixelarity.com/license
|
|
///
|
|
|
|
/* Wrapper */
|
|
|
|
/// Sets the colors of the wrapper's top/bottom edges.
|
|
/// @param {string} $color Color.
|
|
@mixin wrapper-edges-color($color: black) {
|
|
&:before, &:after {
|
|
background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><polygon points="0,0 0,100 100,100" style="fill:#{$color};" /></svg>');
|
|
}
|
|
}
|
|
|
|
.wrapper {
|
|
@include padding(6em, 0);
|
|
@include wrapper-edges-color(_palette(bg));
|
|
position: relative;
|
|
|
|
> .inner {
|
|
margin: 0 auto;
|
|
max-width: 75em;
|
|
width: calc(100% - 4em);
|
|
}
|
|
|
|
&:before, &:after {
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
height: 6em;
|
|
left: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
&:before {
|
|
@include vendor('transform', 'translateY(-100%)');
|
|
content: '';
|
|
top: 0;
|
|
}
|
|
|
|
&.alt {
|
|
padding-bottom: 1em;
|
|
|
|
&:after {
|
|
@include vendor('transform', 'translateY(100%) rotate(180deg)');
|
|
bottom: 0;
|
|
content: '';
|
|
}
|
|
}
|
|
|
|
&.style1 {
|
|
@include color(accent1);
|
|
@include wrapper-edges-color(_palette(accent1, bg));
|
|
}
|
|
|
|
&.style2 {
|
|
@include color(accent2);
|
|
@include wrapper-edges-color(_palette(accent2, bg));
|
|
}
|
|
|
|
@include breakpoint('<=large') {
|
|
@include padding(5em, 0);
|
|
|
|
&:before, &:after {
|
|
height: 4em;
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=medium') {
|
|
@include padding(4em, 0);
|
|
|
|
&:before, &:after {
|
|
height: 3em;
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=small') {
|
|
@include padding(3em, 0);
|
|
|
|
> .inner {
|
|
width: calc(100% - 3em);
|
|
}
|
|
|
|
&:before, &:after {
|
|
height: 2em;
|
|
}
|
|
|
|
&.alt {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
} |