added clipped mm to intro bg
This commit is contained in:
parent
d6e9d2e94d
commit
a06f98ab09
|
@ -25,6 +25,9 @@
|
||||||
<div class="launcher__content-quadrant"></div>
|
<div class="launcher__content-quadrant"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="launcher__vertical-split launcher__vertical-split--right">
|
<div class="launcher__vertical-split launcher__vertical-split--right">
|
||||||
|
<div class="launcher__background-wrapper">
|
||||||
|
<svg src="mm-clipped.svg" class="launcher__background-mm" />
|
||||||
|
</div>
|
||||||
<div class="launcher__title-quadrant launcher__title-quadrant--right">
|
<div class="launcher__title-quadrant launcher__title-quadrant--right">
|
||||||
<button class="subtitle-title subtitle-title--right" selected>
|
<button class="subtitle-title subtitle-title--right" selected>
|
||||||
<div><h3>Zelda 64: Recompiled</h3></div>
|
<div><h3>Zelda 64: Recompiled</h3></div>
|
||||||
|
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 47 KiB |
File diff suppressed because one or more lines are too long
|
@ -1,4 +1,14 @@
|
||||||
|
|
||||||
|
// TODO: Affect all elements with launcher fade-in
|
||||||
|
// @keyframes fade-launcher-in {
|
||||||
|
// 0% {
|
||||||
|
// opacity: 0;
|
||||||
|
// }
|
||||||
|
// to {
|
||||||
|
// opacity: 1;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
.launcher {
|
.launcher {
|
||||||
display: block;
|
display: block;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
@ -7,6 +17,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: $color-background-1;
|
background-color: $color-background-1;
|
||||||
|
// TODO: Affect all elements with launcher fade-in
|
||||||
|
// animation: 1.5s cubic-in-out 1 fade-launcher-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.launcher__vertical-split {
|
.launcher__vertical-split {
|
||||||
|
@ -27,6 +39,51 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes slide-mm-bg-over {
|
||||||
|
0% {
|
||||||
|
transform: translateX(space(100));
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(space(0));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.launcher__background-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
position: absolute;
|
||||||
|
left: -70vw;
|
||||||
|
right: -100%;
|
||||||
|
top: -55vw;
|
||||||
|
bottom: -50vw;
|
||||||
|
transform: translateX(space(0));
|
||||||
|
animation: 25s cubic-out 1 slide-mm-bg-over;
|
||||||
|
// height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-mm-in {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.launcher__background-mm {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
// top: -20%;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: auto;
|
||||||
|
opacity: 0.1;
|
||||||
|
animation: 2.5s cubic-in-out 1 fade-mm-in;
|
||||||
|
}
|
||||||
|
|
||||||
.launcher__title-quadrant {
|
.launcher__title-quadrant {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
padding-top: space(96);
|
padding-top: space(96);
|
||||||
|
|
|
@ -15,3 +15,14 @@
|
||||||
@extend %nav-dir;
|
@extend %nav-dir;
|
||||||
@extend %nav-foc;
|
@extend %nav-foc;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
@include set-color(COLOR);
|
||||||
|
*/
|
||||||
|
@mixin set-color($col) {
|
||||||
|
color: $col;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
image-color: $col;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue