You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
303 lines
5.9 KiB
303 lines
5.9 KiB
/// |
|
/// Solid State by HTML5 UP |
|
/// html5up.net | @ajlkn |
|
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/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,100 100,0 100,100" style="fill:#{$color};" /></svg>'); |
|
} |
|
|
|
&:before { |
|
box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color; |
|
} |
|
|
|
&:after { |
|
box-shadow: inset 0 -1px 0 0 $color, 0 1px 0 0 $color; |
|
} |
|
} |
|
|
|
#wrapper { |
|
> header { |
|
@include padding(7.5em, 0, (3.5em, 0, _size(wrapper-edges, large) * -0.5, 0)); |
|
|
|
.inner { |
|
margin: 0 auto; |
|
width: _size(inner); |
|
} |
|
|
|
h2 { |
|
border-bottom: solid 2px _palette(border); |
|
font-size: 2em; |
|
margin-bottom: _size(element-margin) * 0.4; |
|
padding-bottom: _size(element-margin) * 0.2; |
|
} |
|
|
|
p { |
|
font-family: _font(family-heading); |
|
font-size: 1em; |
|
font-weight: _font(weight-heading); |
|
letter-spacing: _font(kern-heading); |
|
line-height: 2; |
|
text-transform: uppercase; |
|
} |
|
} |
|
|
|
@include breakpoint('<=large') { |
|
> header { |
|
@include padding(5em, 0, (4em, 0, _size(wrapper-edges, large) * 0.5, 0)); |
|
|
|
background-color: _palette(bg); |
|
|
|
background-image: linear-gradient(to top, transparentize(_palette(bg), 0.2), transparentize(_palette(bg), 0.2)), |
|
url('../../images/bg.jpg'); |
|
|
|
background-size: auto, |
|
cover; |
|
|
|
background-position: center, |
|
0% 30%; |
|
|
|
margin-bottom: (_size(wrapper-edges, large) * -1); |
|
} |
|
} |
|
|
|
@include breakpoint('<=medium') { |
|
> header { |
|
@include padding(7em, 3em, (4em, 0, _size(wrapper-edges, medium) * 0.5, 0)); |
|
|
|
background-size: auto, |
|
cover; |
|
|
|
background-position: center, |
|
0% 0%; |
|
|
|
margin-bottom: (_size(wrapper-edges, medium) * -1); |
|
|
|
.inner { |
|
width: 100%; |
|
} |
|
} |
|
} |
|
|
|
@include breakpoint('<=small') { |
|
> header { |
|
@include padding(3.75em, 2em, (2.75em, 0, _size(wrapper-edges, small) * 0.5, 0)); |
|
|
|
background-size: auto, |
|
125%; |
|
|
|
margin-bottom: (_size(wrapper-edges, small) * -1); |
|
|
|
h2 { |
|
font-size: 1.25em; |
|
} |
|
|
|
p { |
|
font-size: 0.8em; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.wrapper { |
|
background-color: _palette(bg); |
|
margin: _size(wrapper-edges, large) 0; |
|
position: relative; |
|
@include wrapper-edges-color(_palette(bg)); |
|
|
|
&:before, &:after { |
|
background-repeat: no-repeat; |
|
background-size: 100% 100%; |
|
content: ''; |
|
display: block; |
|
height: _size(wrapper-edges, large); |
|
position: absolute; |
|
width: 100%; |
|
} |
|
|
|
&:before { |
|
left: 0; |
|
top: (_size(wrapper-edges, large) * -1); |
|
} |
|
|
|
&:after { |
|
@include vendor('transform', 'scaleY(-1)'); |
|
bottom: (_size(wrapper-edges, large) * -1); |
|
left: 0; |
|
} |
|
|
|
&.alt { |
|
&:before { |
|
@include vendor('transform', 'scaleX(-1)'); |
|
} |
|
|
|
&:after { |
|
@include vendor('transform', 'scaleY(-1) scaleX(-1)'); |
|
} |
|
} |
|
|
|
.inner { |
|
@include padding(3em, 0); |
|
margin: 0 auto; |
|
width: _size(inner); |
|
} |
|
|
|
@for $i from 2 through _misc(max-wrapper-styles) { |
|
$j: 3 * ($i - 1); |
|
$color: desaturate(lighten(_palette(bg), $j), $j * 0.5); |
|
|
|
&.style#{$i} { |
|
background-color: $color; |
|
@include wrapper-edges-color($color); |
|
} |
|
} |
|
|
|
&.spotlight { |
|
@include wrapper-edges-color(_palette(accent)); |
|
background-color: _palette(accent); |
|
|
|
.inner { |
|
@include vendor('display', 'flex'); |
|
@include vendor('align-items', 'center'); |
|
@include vendor('flex-direction', 'row'); |
|
} |
|
|
|
.image { |
|
border-radius: 100%; |
|
margin: 0 _size(section-spacing, large) _size(element-margin) 0; |
|
width: 22em; |
|
overflow: hidden; |
|
-ms-flex: 1; |
|
|
|
img { |
|
border-radius: 100%; |
|
width: 100%; |
|
} |
|
} |
|
|
|
.content { |
|
width: 100%; |
|
-ms-flex: 2; |
|
} |
|
|
|
&:nth-child(2n - 1) { |
|
.inner { |
|
@include vendor('flex-direction', 'row-reverse'); |
|
text-align: right; |
|
} |
|
|
|
.image { |
|
margin: 0 0 _size(element-margin) _size(section-spacing, large); |
|
} |
|
} |
|
|
|
@for $i from 2 through _misc(max-wrapper-styles) { |
|
$j: 3 * ($i - 1); |
|
$color: saturate(darken(_palette(accent), $j), $j * 0.5); |
|
|
|
&.style#{$i} { |
|
background-color: $color; |
|
@include wrapper-edges-color($color); |
|
} |
|
} |
|
} |
|
|
|
@include breakpoint('<=medium') { |
|
margin: _size(wrapper-edges, medium) 0; |
|
|
|
&:before, &:after { |
|
height: _size(wrapper-edges, medium); |
|
} |
|
|
|
&:before { |
|
top: (_size(wrapper-edges, medium) * -1); |
|
} |
|
|
|
&:after { |
|
bottom: (_size(wrapper-edges, medium) * -1); |
|
left: 0; |
|
} |
|
|
|
.inner { |
|
@include padding(3em, 3em); |
|
width: 100%; |
|
} |
|
|
|
&.spotlight { |
|
.image { |
|
margin: 0 _size(section-spacing, medium) _size(element-margin) 0; |
|
width: 32em; |
|
} |
|
|
|
&:nth-child(2n - 1) { |
|
.image { |
|
margin: 0 0 _size(element-margin) _size(section-spacing, medium); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@include breakpoint('<=small') { |
|
margin: _size(wrapper-edges, small) 0; |
|
|
|
&:before, &:after { |
|
height: _size(wrapper-edges, small); |
|
} |
|
|
|
&:before { |
|
top: (_size(wrapper-edges, small) * -1); |
|
} |
|
|
|
&:after { |
|
bottom: (_size(wrapper-edges, small) * -1); |
|
left: 0; |
|
} |
|
|
|
.inner { |
|
@include padding(2em, 2em); |
|
} |
|
|
|
&.spotlight { |
|
.inner { |
|
@include vendor('align-items', 'flex-start'); |
|
} |
|
|
|
.image { |
|
width: 19em; |
|
margin: 0 _size(section-spacing, small) _size(element-margin) 0; |
|
} |
|
|
|
&:nth-child(2n - 1) { |
|
.image { |
|
margin: 0 0 _size(element-margin) _size(section-spacing, small); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@include breakpoint('<=xsmall') { |
|
&.spotlight { |
|
.inner { |
|
display: block; |
|
} |
|
|
|
.image { |
|
margin: 0 0 (_size(element-margin) * 0.5) 0 !important; |
|
max-width: 85%; |
|
width: 12em; |
|
} |
|
} |
|
} |
|
|
|
@include breakpoint('<=xxsmall') { |
|
.inner { |
|
@include padding(2em, 1.5em); |
|
} |
|
} |
|
} |