diff --git a/pages/about/our-supporters.module.css b/pages/about/our-supporters.module.css index 8b8131cb..6fde99bf 100644 --- a/pages/about/our-supporters.module.css +++ b/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 { diff --git a/pages/about/team.module.css b/pages/about/team.module.css index dfbf05de..110127a0 100644 --- a/pages/about/team.module.css +++ b/pages/about/team.module.css @@ -64,6 +64,7 @@ .headerContainer { flex-direction: column-reverse; padding-bottom: 1rem; + margin-top: calc(30rem / 16); } .nav { diff --git a/pages/events/[year]/[term]/[event].tsx b/pages/events/[year]/[term]/[event].tsx index 33a2aeba..4ab46a09 100644 --- a/pages/events/[year]/[term]/[event].tsx +++ b/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; diff --git a/pages/index.tsx b/pages/index.tsx index bc58ea3d..e6ced0e6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -264,20 +264,13 @@ Home.getShapesConfig = (() => { ], hash: [ { - top: "calc(190rem / 16)", - right: "87vw", - width: "calc(60rem / 16)", - height: "calc(60rem / 16)", + top: "calc(250rem / 16)", + right: "80vw", + width: "calc(45rem / 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)", diff --git a/pages/resources/tech-talks/index.module.css b/pages/resources/tech-talks/index.module.css index 7f73bc22..9318627f 100644 --- a/pages/resources/tech-talks/index.module.css +++ b/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-bottom: calc(20rem / 16); + margin: calc(30rem / 16) 0; } .headerContainer {