diff --git a/locales/en_US.json b/locales/en_US.json index 2f2e595..065d194 100644 --- a/locales/en_US.json +++ b/locales/en_US.json @@ -214,7 +214,18 @@ "Join our Discord server!" ], "button": "Join now!" - } + }, + "bandwidthRaccoonQuotes": [ + "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!!!" + ] }, "progressPage": { "title": "Our progress", diff --git a/public/assets/css/partials/footer.css b/public/assets/css/partials/footer.css index fc1413f..8e64a29 100644 --- a/public/assets/css/partials/footer.css +++ b/public/assets/css/partials/footer.css @@ -45,11 +45,15 @@ footer a:hover { color: var(--text-shade-3); text-decoration: underline; } +footer div.discord-server-card-wrapper { + z-index: 2; + justify-self: end; + position: relative; +} footer div.discord-server-card { background: var(--bg-shade-2); border-radius: 12px; padding: 30px 90px 30px 36px; - justify-self: end; } footer div.discord-server-card h1 { font-size: 25px; @@ -78,6 +82,56 @@ footer div.discord-server-card svg { stroke-width: 3px; margin-right: 4px; } +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; + 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) { footer { @@ -88,11 +142,31 @@ footer div.discord-server-card svg { footer div { justify-self: center; } - footer div.discord-server-card { + footer div.discord-server-card-wrapper { grid-column: 1 / span 4; - width: calc(100% - 126px); + width: 100%; justify-self: normal; } + 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; + } + footer div.discord-server-card { + box-sizing: border-box; + width: 100%; + overflow: hidden; + } } @media screen and (max-width: 580px) { @@ -103,9 +177,22 @@ footer div.discord-server-card svg { footer div { justify-self: start; } - footer div.discord-server-card { + footer div.discord-server-card-wrapper { grid-column: 1 / span 1; + } + footer div.discord-server-card { padding: 30px; - width: calc(100% - 60px); + overflow: visible; + } + footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper { + bottom: unset; + top: -120px; + z-index: -1; + } +} + +@media screen and (max-width: 320px) { + footer div.discord-server-card-wrapper .bandwidth-raccoon-wrapper { + display: none; } } diff --git a/public/assets/images/bandwidth.svg b/public/assets/images/bandwidth.svg new file mode 100644 index 0000000..9679c40 --- /dev/null +++ b/public/assets/images/bandwidth.svg @@ -0,0 +1,268 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/server.js b/src/server.js index ec5197c..91f2205 100644 --- a/src/server.js +++ b/src/server.js @@ -136,6 +136,13 @@ app.engine('handlebars', handlebars({ neq(value1, value2) { return value1 !== value2; }, + times(n, block) { + let accum = ''; + for(let i = 0; i < n; i++) { + accum += block.fn(i); + } + return accum; + }, localeHelper(locale, propString, propVar) { /* locale: the json locale object @@ -173,7 +180,7 @@ app.engine('handlebars', handlebars({ } return value; - } + }, } })); app.set('view engine', 'handlebars'); diff --git a/views/partials/footer.handlebars b/views/partials/footer.handlebars index e27ae32..c9f3beb 100644 --- a/views/partials/footer.handlebars +++ b/views/partials/footer.handlebars @@ -41,15 +41,51 @@ {{ localeHelper locale "nav.blog" }} {{ localeHelper locale "nav.account" }} -
-

{{ localeHelper locale "footer.widget.captions.0" }}

-

{{ localeHelper locale "footer.widget.captions.1" }}

- - - - - - {{ localeHelper locale "footer.widget.button" }} - +
+
+

{{ localeHelper locale "footer.widget.captions.0" }}

+

{{ localeHelper locale "footer.widget.captions.1" }}

+ + + + + + {{ localeHelper locale "footer.widget.button" }} + +
+
+
+

I'm a raccoon, and I love eating grapes!

+
+ +
+