diff --git a/components/ShapesBackground.tsx b/components/ShapesBackground.tsx index f36e1f16..4dd8766c 100644 --- a/components/ShapesBackground.tsx +++ b/components/ShapesBackground.tsx @@ -41,6 +41,7 @@ export type ShapeType = | "plus" | "ring" | "triangle" + | "triangleBig" | "waves" | "waveBig"; @@ -60,6 +61,7 @@ function Shape(props: { type: ShapeType; style: CSSProperties }) { ); } +// Used for most mobile pages export const mobileShapesConfig = { dots: [ { @@ -87,3 +89,33 @@ export const mobileShapesConfig = { }, ], }; + +// Used for Constitution, Code of Conduct, and Our Supporters desktop pages +export const aboutShapesConfig = { + cross: [ + { + top: "calc(400rem / 16)", + right: "90vw", + width: "calc(225rem / 16)", + height: "calc(225rem / 16)", + transform: "rotate(30deg)", + }, + ], + triangleBig: [ + { + bottom: "calc(120rem / 16)", + left: "91vw", + width: "calc(138rem / 16)", + height: "calc(138rem / 16)", + transform: "rotate(-25deg)", + }, + ], + wavesBig: [ + { + top: "calc(-32rem / 16)", + left: "88vw", + width: "calc(296rem / 16)", + height: "calc(254rem / 16)", + }, + ], +}; diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx index e7b31442..3451ab1b 100644 --- a/pages/about/our-supporters.tsx +++ b/pages/about/our-supporters.tsx @@ -1,6 +1,11 @@ import React from "react"; import { Image } from "@/components/Image"; +import { + GetShapesConfig, + aboutShapesConfig, + mobileShapesConfig, +} from "@/components/ShapesBackground"; import Content from "../../content/about/our-supporters.mdx"; @@ -19,3 +24,10 @@ export default function OurSupporters() { ); } + +OurSupporters.getShapesConfig = (() => { + if (window.innerWidth <= 768) { + return mobileShapesConfig; + } + return aboutShapesConfig; +}) as GetShapesConfig; diff --git a/public/images/shapes/triangleBig.svg b/public/images/shapes/triangleBig.svg new file mode 100644 index 00000000..e7eb21f8 --- /dev/null +++ b/public/images/shapes/triangleBig.svg @@ -0,0 +1,3 @@ + + +