The-Homebrew-Cloud/Zelda64Recomp
2
0
Fork 0
mirror of https://github.com/Mr-Wiseguy/Zelda64Recomp.git synced 2024-11-22 12:59:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

added clipped mm to intro bg

Browse Source
This commit is contained in:
thecozies 2024-01-10 10:03:10 -06:00
parent d6e9d2e94d
commit a06f98ab09
5 changed files with 184 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/launcher.rml
View File

@ -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>

112
assets/mm-clipped.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

2
assets/recomp.rcss
View File

File diff suppressed because one or more lines are too long

57
assets/scss/styles/components/Launcher.scss
View File

@ -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);

11
assets/scss/styles/mixins/_helpers.scss
View File

@ -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;
}
}