176 lines
3.5 KiB
SCSS
176 lines
3.5 KiB
SCSS
///
|
|
/// Prototype by Pixelarity
|
|
/// pixelarity.com | hello@pixelarity.com
|
|
/// License: pixelarity.com/license
|
|
///
|
|
|
|
/* Banner */
|
|
|
|
#banner {
|
|
$overlay: transparentize(_palette(accent2, bg), 0.8);
|
|
|
|
@include color-typography(accent2);
|
|
@include color-button(accent2);
|
|
@include padding(6em, 0, (4.5em, 0, 0, 0));
|
|
@include vendor('display', 'flex');
|
|
@include vendor('align-items', 'center');
|
|
@include vendor('justify-content', 'center');
|
|
@include vendor('background-image', (
|
|
'linear-gradient(to top, #{$overlay}, #{$overlay})',
|
|
'url("../../images/banner.jpg")',
|
|
));
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-size: cover;
|
|
height: 75vh;
|
|
min-height: 30em;
|
|
position: relative;
|
|
|
|
&:after {
|
|
@include vendor('pointer-events', 'none');
|
|
@include vendor('transition', (
|
|
'opacity 2s ease',
|
|
'visibility 2s'
|
|
));
|
|
background-color: _palette(accent2, bg);
|
|
content: '';
|
|
height: 100%;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
visibility: hidden;
|
|
width: 100%;
|
|
z-index: _misc(z-index-base) + 1;
|
|
}
|
|
|
|
.inner {
|
|
@include vendor('display', 'flex');
|
|
@include vendor('align-items', 'center');
|
|
max-width: _size(inner);
|
|
|
|
h2 {
|
|
font-size: 2.75em;
|
|
margin-bottom: 0;
|
|
margin-top: -0.25em;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.2em;
|
|
margin: (_size(element-margin) * 0.35) 0 0 0;
|
|
}
|
|
|
|
.content {
|
|
@include vendor('transition', (
|
|
'transform 1s ease-out',
|
|
'opacity 1s ease-out'
|
|
));
|
|
@include vendor('transform', 'translateY(0)');
|
|
opacity: 1;
|
|
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.actions {
|
|
@include vendor('transition', (
|
|
'transform 1s ease-out',
|
|
'opacity 1s ease-out'
|
|
));
|
|
@include vendor('transform', 'translateY(0)');
|
|
opacity: 1;
|
|
|
|
border-left: solid 1px _palette(accent2, border);
|
|
margin: 0 0 0 _size(section-spacing);
|
|
min-width: 20em;
|
|
padding: 1em 0 1em (_size(section-spacing) * 0.75);
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=large') {
|
|
background-attachment: scroll;
|
|
|
|
.inner {
|
|
max-width: 100%;
|
|
padding: 0 (_size(section-spacing) * 0.75);
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=medium') {
|
|
.inner {
|
|
@include vendor('flex-direction', 'column');
|
|
@include vendor('align-items', 'stretch');
|
|
text-align: center;
|
|
|
|
.actions {
|
|
border-left: 0;
|
|
margin: (_size(section-spacing) * 0.75) 0 0 0;
|
|
min-width: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=small') {
|
|
@include padding(5.5em, 0, (2em, 0, 0, 0));
|
|
height: auto;
|
|
min-height: 0;
|
|
|
|
.inner {
|
|
padding: 0 1.5em;
|
|
|
|
h2 {
|
|
font-size: 1.75em;
|
|
}
|
|
|
|
p {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.actions {
|
|
margin: _size(element-margin) 0 0 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=xsmall') {
|
|
min-height: 75vh;
|
|
|
|
.inner {
|
|
-ms-flex: 1;
|
|
}
|
|
}
|
|
|
|
body.is-preload & {
|
|
&:after {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.inner {
|
|
.content {
|
|
opacity: 0;
|
|
@include vendor('transform', 'translateY(-1em)');
|
|
}
|
|
|
|
.actions {
|
|
opacity: 0;
|
|
@include vendor('transform', 'translateY(1em)');
|
|
}
|
|
}
|
|
|
|
@include breakpoint('<=medium') {
|
|
.inner {
|
|
.content {
|
|
@include vendor('transform', 'translateY(0)');
|
|
}
|
|
|
|
.actions {
|
|
@include vendor('transform', 'translateY(0)');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |