Add our supporters page shapes background
This commit is contained in:
parent
964544be1f
commit
2cbb4d21a0
|
@ -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)",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="129" height="112" viewBox="0 0 129 112" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.02026 109.35L64.8232 5.76872L124.626 109.35L5.02026 109.35Z" stroke="black" stroke-width="5.04411"/>
|
||||
</svg>
|
After Width: | Height: | Size: 220 B |
Loading…
Reference in New Issue