Clean up Shapes Backgrounds on some mobile pages (#307)

Addresses some of the shapes shenanigans that I noticed here: #236 (comment)

- Removed shapes from mobile /events/\[year\]/\[term\]/\[event\] page. (I left the default shapes on the mobile /events/\[year\]/\[term\] page, since with the vertical nav header they now fit, but I'd love to hear others' opinions on this!)
- Adjusted top margins on mobile Meet the Team, Our Supporters, and Tech Talks/Tech Talk pages to accommodate the shapes.
- Changed shapes on mobile Home page to accommodate the expanded Social Links.

Co-authored-by: Amy <a258wang@uwaterloo.ca>
Reviewed-on: #307
Reviewed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-authored-by: Amy <a258wang@csclub.uwaterloo.ca>
Co-committed-by: Amy <a258wang@csclub.uwaterloo.ca>

pages/about/our-supporters.module.css

@@ -23,7 +23,7 @@
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .page {
-    margin-bottom: calc(30rem / 16);
+    margin: calc(30rem / 16) 0;
   }
 
   .headerContainer {

pages/about/team.module.css

@@ -64,6 +64,7 @@
   .headerContainer {
     flex-direction: column-reverse;
     padding-bottom: 1rem;
+    margin-top: calc(30rem / 16);
   }
 
   .nav {

pages/events/[year]/[term]/[event].tsx

@@ -5,6 +5,11 @@ import { MDXRemote } from "next-mdx-remote";
 import React from "react";
 
 import { EventCard } from "@/components/EventCard";
+import {
+  ShapesConfig,
+  defaultGetShapesConfig,
+  GetShapesConfig,
+} from "@/components/ShapesBackground";
 import { Title } from "@/components/Title";
 import {
   Event,
@@ -30,6 +35,12 @@ export default function EventInfoPage({ year, term, event }: Props) {
   );
 }
 
+EventInfoPage.getShapesConfig = ((width, height) => {
+  return window.innerWidth <= 768
+    ? ({} as ShapesConfig)
+    : defaultGetShapesConfig(width, height);
+}) as GetShapesConfig;
+
 interface Props {
   year: string;
   term: string;

pages/index.tsx

@@ -264,20 +264,13 @@ Home.getShapesConfig = (() => {
     ],
     hash: [
       {
-        top: "calc(190rem / 16)",
+        top: "calc(250rem / 16)",
-        right: "87vw",
+        right: "80vw",
-        width: "calc(60rem / 16)",
+        width: "calc(45rem / 16)",
-        height: "calc(60rem / 16)",
+        height: "calc(45rem / 16)",
       },
     ],
     triangle: [
-      {
-        top: "calc(266rem / 16)",
-        right: "78vw",
-        width: "calc(45rem / 16)",
-        height: "calc(45rem / 16)",
-        transform: "rotate(-26deg)",
-      },
       {
         top: "calc(4rem / 16)",
         right: "3vw",
@@ -288,7 +281,7 @@ Home.getShapesConfig = (() => {
     ],
     waves: [
       {
-        top: "calc(168rem / 16)",
+        top: "calc(230rem / 16)",
         left: "86vw",
         width: "calc(102rem / 16)",
         height: "calc(50rem / 16)",

pages/resources/tech-talks/index.module.css

@@ -36,8 +36,7 @@
 
 @media only screen and (max-width: calc(768rem / 16)) {
   .page {
-    margin-top: 0;
+    margin: calc(30rem / 16) 0;
-    margin-bottom: calc(20rem / 16);
   }
 
   .headerContainer {