This repository has been archived on 2023-02-03. You can view files and clone it, but cannot push or open issues or pull requests.
autonomic.zone/src/assets/styles/components/_banner.scss

128 lines
2.2 KiB
SCSS

/* Banner */
#banner {
@include vendor('display', 'flex');
@include vendor('flex-direction', 'column');
@include vendor('justify-content', 'center');
cursor: default;
height: 100vh;
min-height: 35em;
overflow: hidden;
position: relative;
text-align: center;
h2 {
@include vendor('transform', 'scale(1)');
@include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease'));
display: inline-block;
font-size: 1.75em;
opacity: 1;
padding: 0.35em 1em;
position: relative;
z-index: 1;
&:before, &:after {
@include vendor('transition', 'width 1s ease');
@include vendor('transition-delay', '0.25s');
background: _palette(fg-bold);
content: '';
display: block;
height: 2px;
position: absolute;
width: 100%;
}
&:before {
top: 0;
left: 0;
}
&:after {
bottom: 0;
right: 0;
}
}
h1 {
@include vendor('transition', 'opacity 0.5s ease');
@include vendor('transition-delay', '1s');
margin-bottom: 25px;
opacity: 1;
a {
color: inherit;
}
}
@include breakpoint(small) {
@include padding(7em, 3em);
height: auto;
min-height: 0;
.particles-js-canvas-el {
@include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out');
@include vendor('transition-delay', '1s');
opacity: 1;
@include breakpoint(medium) {
display: none;
}
}
h2 {
font-size: 1.25em;
}
br {
display: none;
}
}
}
body.is-loading {
#banner {
h1 {
opacity: 0;
}
h2 {
@include vendor('transform', 'scale(0.95)');
opacity: 0;
&:before, &:after {
width: 0;
}
}
.particles-js-canvas-el {
opacity: 0;
}
}
}
.particle {
position: relative;
user-select: none;
background: _palette(bg);
@include breakpoint(medium) {
background: none;
}
.particles-js-canvas-el {
width: 100%;
height: 100%;
}
.content {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
user-select: auto;
}
}