Add our supporters page shapes background
This commit is contained in:
parent
964544be1f
commit
2cbb4d21a0
|
@ -41,6 +41,7 @@ export type ShapeType =
|
||||||
| "plus"
|
| "plus"
|
||||||
| "ring"
|
| "ring"
|
||||||
| "triangle"
|
| "triangle"
|
||||||
|
| "triangleBig"
|
||||||
| "waves"
|
| "waves"
|
||||||
| "waveBig";
|
| "waveBig";
|
||||||
|
|
||||||
|
@ -60,6 +61,7 @@ function Shape(props: { type: ShapeType; style: CSSProperties }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Used for most mobile pages
|
||||||
export const mobileShapesConfig = {
|
export const mobileShapesConfig = {
|
||||||
dots: [
|
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 React from "react";
|
||||||
|
|
||||||
import { Image } from "@/components/Image";
|
import { Image } from "@/components/Image";
|
||||||
|
import {
|
||||||
|
GetShapesConfig,
|
||||||
|
aboutShapesConfig,
|
||||||
|
mobileShapesConfig,
|
||||||
|
} from "@/components/ShapesBackground";
|
||||||
|
|
||||||
import Content from "../../content/about/our-supporters.mdx";
|
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