Fix an animation bug on mobile devices on the landing page

This commit is contained in:
Chris Wilson 2020-12-04 23:00:06 -05:00
parent a9a44036a9
commit 64b5b28d47
4 changed files with 5 additions and 50 deletions

View File

@ -37,7 +37,6 @@ Uncle_texts = [
"Chasing tail.\nFly ladies.\nDo not follow.", "Chasing tail.\nFly ladies.\nDo not follow.",
"I feel like\nI've done this\nbefore…", "I feel like\nI've done this\nbefore…",
"Magic Cape can\npass through\nthe barrier!", "Magic Cape can\npass through\nthe barrier!",
"If this is a\nKanzeon seed,\nI'm quitting.",
"I am not your\nreal uncle.", "I am not your\nreal uncle.",
"You're going\nto have a very\nbad time.", "You're going\nto have a very\nbad time.",
"Today you\nwill have\nbad luck.", "Today you\nwill have\nbad luck.",

View File

@ -40,8 +40,8 @@ const adjustHeaderWidth = () => {
}; };
window.addEventListener('load', () => { window.addEventListener('load', () => {
adjustFooterHeight();
adjustHeaderWidth();
window.addEventListener('resize', adjustFooterHeight); window.addEventListener('resize', adjustFooterHeight);
window.addEventListener('resize', adjustHeaderWidth); window.addEventListener('resize', adjustHeaderWidth);
adjustFooterHeight();
adjustHeaderWidth();
}); });

View File

@ -271,52 +271,8 @@ html{
} }
@media all and (max-width: 1520px){ @media all and (max-width: 1520px){
#landing-clouds #cloud1{ #landing-clouds #cloud1, #landing-clouds #cloud2, #landing-clouds #cloud3{
animation-name: c1-glide-out; display: none;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
left: -400px;
}
#landing-clouds #cloud2{
animation-name: c2-glide-out;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
right: -300px;
}
#landing-clouds #cloud3{
animation-name: c3-glide-out;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
right: -200px;
}
@keyframes c1-glide-out{
from{ left: 10px; }
to{
left: -400px;
display: none;
}
}
@keyframes c2-glide-out{
from{ right: 82px; }
to{
right: -300px;
display: none;
}
}
@keyframes c3-glide-out{
from{ right: 24px; }
to{
right: -200px;
display: none;
}
} }
#landing-links{ #landing-links{

View File

@ -33,7 +33,7 @@
</div> </div>
<div id="landing" class="grass-island"> <div id="landing" class="grass-island">
<div id="landing-body"> <div id="landing-body">
<p id="first-line">Welcome to the Multiworld Randomizer!</p> <p id="first-line">Welcome to the Archipelago Multiworld Randomizer!</p>
<p>This is a <span data-tooltip="Allegedly.">randomizer</span> for The Legend of Zelda: A <p>This is a <span data-tooltip="Allegedly.">randomizer</span> for The Legend of Zelda: A
Link to the Past.</p> Link to the Past.</p>
<p>It is also a multi-world, meaning Link's items may have been placed into other players' games. <p>It is also a multi-world, meaning Link's items may have been placed into other players' games.