feat: bandwidth my beloved

src/components/Bandwidth/Bandwidth.module.css

@@ -0,0 +1,71 @@
+.wrapper {
+	position: relative;
+	width: fit-content;
+}
+
+.bubble {
+	position: absolute;
+	display: block;
+	width: 90vw;
+	height: min-content;
+	max-width: 24rem;
+	top: -1rem;
+	transform: translateY(-100%);
+	padding: 1.25rem;
+	border-radius: 0.5rem;
+
+	background: var(--bg-shade-3);
+}
+
+.bubble.left {
+	left: 0;
+}
+.bubble.right {
+	right: 0;
+}
+.bubble.center {
+	left: 50%;
+	transform: translate(-50%, -100%);
+}
+
+.wrapper.active:after {
+	content: '';
+	position: absolute;
+	display: block;
+	width: 0;
+	border-style: solid;
+	border-color: var(--bg-shade-3) transparent;
+	border-width: 12px 12px 0;
+	top: -1rem;
+	left: 50%;
+	transform: translateX(12px);
+}
+
+.bubble p {
+	margin: 0 !important;
+}
+
+.bandwidth {
+	cursor: pointer;
+	transform: rotate(0);
+	transition: transform 250ms ease-in-out;
+}
+
+.active .bandwidth {
+	transform: rotate(15deg);
+}
+
+.active .bandwidth.jump {
+	animation: jump 250ms ease-in-out;
+}
+@keyframes jump {
+	0% {
+		transform: translateY(0) rotate(15deg);
+	}
+	50% {
+		transform: translateY(-12px) rotate(15deg);
+	}
+	100% {
+		transform: translateY(0) rotate(15deg);
+	}
+}

src/components/Footer/Footer.js

@@ -1,3 +1,4 @@
+import Bandwidth from '@/components/Bandwidth/Bandwidth';
 import Logo from '@/components/Logo/Logo';
 import Section from '@/components/Section/Section';
 import Title from '@/components/Title/Title';
@@ -11,7 +12,7 @@ import Link from 'next/link';
 import styles from './Footer.module.css';
 
 export default function Footer(ctx) {
-	const { locale } = getLocale('todo');
+	const { locale } = getLocale('TODO');
 
 	const year = new Date().getFullYear(); /* Can't have an outdated year this way :3 */
 
@@ -23,7 +24,7 @@ export default function Footer(ctx) {
 					<div>
 						<p>
 							Copyright ©{' '}
-							<Link href={`https://wikipedia.org/wiki/${year}`} className={styles.link}>
+							<Link href={`https://wikipedia.org/wiki/${year}`} target="_blank" className={styles.link}>
 								{year}
 							</Link>
 						</p>
@@ -117,6 +118,12 @@ export default function Footer(ctx) {
 					</div>
 				</div>
 				<div className={styles.discordWidgetWrapper}>
+					<Bandwidth
+						alignBubble="right"
+						size={210}
+						lines={locale.footer.bandwidthRaccoonQuotes}
+						className={styles.bandwidth}
+					/>
 					<div className={styles.discordWidget}>
 						<Title element="h3">{locale.footer.widget.captions[0]}</Title>
 						<Title element="h3" className={styles.sub}>

src/components/Footer/Footer.module.css

@@ -39,6 +39,10 @@
 	width: fit-content;
 }
 
+.footer p:last-child {
+	margin-bottom: 0;
+}
+
 .footer .link {
 	color: unset;
 	font-weight: unset;
@@ -73,10 +77,23 @@
 
 .footer .discordWidget .link .arrow {
 	position: relative;
-	top: 0.25rem;
+	top: 0.27rem;
 	margin-right: 0.5ch;
 }
 
+.discordWidgetWrapper {
+	position: relative;
+	z-index: 2;
+	align-self: end;
+}
+
+.discordWidgetWrapper .bandwidth {
+	position: absolute;
+	right: 0;
+	top: -136px;
+	z-index: -1;
+}
+
 @media screen and (max-width: 1080px) {
 	.footer {
 		flex-flow: column;
@@ -104,6 +121,7 @@
 
 	.footer .discordWidgetWrapper {
 		margin-top: 1rem;
+		width: 100%;
 	}
 }
 
@@ -135,3 +153,9 @@
 		font-size: 1.1rem;
 	}
 }
+
+@media screen and (max-width: 300px) {
+	.discordWidgetWrapper .bandwidth {
+		display: none;
+	}
+}