Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-08-21 16:16:10 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: bandwidth speaks

Browse Source
This commit is contained in:
Ash Monty
2022-09-09 01:58:59 +02:00
parent 44f452ae2a
commit 90e638ae6b
2 changed files with 91 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
public/assets/css/partials/footer.css
View File

@@ -48,9 +48,9 @@ footer a:hover {
footer div.discord-server-card-wrapper {
z-index: 2;
justify-self: end;
position: relative;
}
footer div.discord-server-card {
position: relative;
background: var(--bg-shade-2);
border-radius: 12px;
padding: 30px 90px 30px 36px;
@@ -82,15 +82,55 @@ footer div.discord-server-card svg {
stroke-width: 3px;
margin-right: 4px;
}
footer div.discord-server-card::after {
content: "";
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
position: absolute;
top: -120px;
right: 0px;
z-index: -1;
}
footer div.discord-server-card-wrapper img.bandwidth-raccoon {
width: 192px;
height: 192px;
background: no-repeat center/cover url(/assets/images/bandwidth.svg);
z-index: -1;
cursor: pointer;
transform: none;
transition: transform 150ms;
}
footer div.bandwidth-raccoon-wrapper.speak img.bandwidth-raccoon {
transform: rotate(12deg) translateY(-12px);
}
footer .bandwidth-raccoon-wrapper .text-bubble {
position: absolute;
right: 0;
margin: 0 auto;
top: -24px;
max-width: min(200%, 90vw);
width: max-content;
background: var(--bg-shade-3);
padding: 18px;
align-self: center;
margin-bottom: 12px;
border-radius: 12px;
box-sizing: border-box;
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition: opacity 250ms;
}
footer .bandwidth-raccoon-wrapper.speak .text-bubble {
opacity: 1;
}
footer .bandwidth-raccoon-wrapper .text-bubble:after {
content: "";
position: absolute;
display: block;
width: 0;
z-index: 1;
border-style: solid;
border-color: var(--bg-shade-3) transparent;
border-width: 10px 10px 0;
bottom: -10px;
right: 60px;
margin-left: -10px;
}
@media screen and (max-width: 900px) {
@@ -107,7 +147,17 @@ footer div.discord-server-card::after {
width: 100%;
justify-self: normal;
}
footer div.discord-server-card::after {
footer div.discord-server-card-wrapper::before {
content: "";
width: 100%;
height: 60px;
position: absolute;
bottom: -60px;
left: 0;
background: var(--bg-shade-0);
z-index: 2;
}
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
bottom: -72px;
top: unset;
z-index: 0;
@@ -134,7 +184,7 @@ footer div.discord-server-card::after {
padding: 30px;
overflow: visible;
}
footer div.discord-server-card::after {
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
bottom: unset;
top: -120px;
z-index: -1;
@@ -142,7 +192,7 @@ footer div.discord-server-card::after {
}
@media screen and (max-width: 320px) {
footer div.discord-server-card::after {
footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper {
display: none;
}
}

33
views/partials/footer.handlebars
View File

@@ -53,5 +53,38 @@
{{ localeHelper locale "footer.widget.button" }}
</a>
</div>
<div class="bandwidth-raccoon-wrapper">
<div class="text-bubble">
<p>I'm a raccoon, and I love eating grapes!</p>
</div>
<img src="/assets/images/bandwidth.svg" class="bandwidth-raccoon" />
</div>
</div>
</footer>
<script>
const bandwidthRaccoon = document.querySelector("footer img.bandwidth-raccoon");
const bandwidthRaccoonWrapper = document.querySelector("footer .bandwidth-raccoon-wrapper");
const bandwidthRaccoonBubbleText = document.querySelector("footer .bandwidth-raccoon-wrapper .text-bubble p");
let i = 0;
const randomSentences = [
'I\'m Bandwidth the Raccoon, and I love biting the cables going into Pretendo Network\'s servers. Yum!',
'Many people ask us if we\'re gonna get in legal trouble with Nintendo over this; I am happy to say that my aunt works at Nintendo and she says it\'s fine.',
'Webkit v537 is the best version of Webkit for Wii U. No, we\'re not going to port Chrome to the Wii U.',
'I can\'t wait for the clock to reach 03:14:08 UTC on the 19th of January 2038!',
'The Wii U is actually an underrated system: the commercials were like really bad, but the console is great. Huh, wait a second, I\'m not sure why but my Gamepad isn\'t connecting to my Wii.',
'Super Mario World 2 - Yoshi\'s Island\'s main theme is an absolute bop and there\'s no way you\'re gonna convince me otherwise.',
'My favorite Nintendo Switch releases have been Nintendo Switch Online + Expansion Pack, Nintendo Switch Online + Rumble Pak, Nintendo Switch Online + Offline Play Pack, Nintendo Switch Online + Yet Another Port Pack, and Nintendo Switch Online + Dr. Kawashima\'s Brain Training / Brain Age "You Really Liked The Nintendo Wii U Virtual Console Title, So We\'re Bringing It Back" Pack. You can really tell Nintendo cares.',
'Like “You know Ash, bless her heart, she UwU’s all day” is the southern nice way of saying “Ash uwus all the time and it’s really weird and stupid and I wish they didn’t”',
'My first video on my channel!! iv been wanting to make videos for a long time now but my laptop ran pretty bad and i couldn\'t run fraps, skype and minecraft all at once. but now thats over! with some help from my IT teacher my laptop runs alot better and i can record now! i hope y\'all enjoy and if you do please like and subscribe!!!', ];
bandwidthRaccoon.addEventListener("click", () =>
{
bandwidthRaccoonWrapper.classList.add("speak");
if (!randomSentences[i]) {
i = 0
}
bandwidthRaccoonBubbleText.innerText = randomSentences[i];
i += 1;
})
</script>