Remove hardcoded shapes backgrounds
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
28c45c9475
commit
ff98395d9b
|
@ -306,33 +306,3 @@ 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)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
|
@ -2,17 +2,11 @@ import path from "path";
|
||||||
|
|
||||||
import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
|
import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
|
||||||
import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
|
import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
|
||||||
import {
|
|
||||||
mobileShapesConfig,
|
|
||||||
aboutShapesConfig,
|
|
||||||
} from "@/components/ShapesBackground";
|
|
||||||
|
|
||||||
export const options = {
|
export const options = {
|
||||||
title: "Code of Conduct",
|
title: "Code of Conduct",
|
||||||
image: "images/code-of-conduct.svg",
|
image: "images/code-of-conduct.svg",
|
||||||
pagePath: path.join("about", "code-of-conduct"),
|
pagePath: path.join("about", "code-of-conduct"),
|
||||||
getShapesConfig: () =>
|
|
||||||
window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default createReadAllPage(options);
|
export default createReadAllPage(options);
|
||||||
|
|
|
@ -2,17 +2,11 @@ import path from "path";
|
||||||
|
|
||||||
import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
|
import { createReadAllPage } from "@/components/OrganizedContent/ReadAll";
|
||||||
import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
|
import { createReadAllGetStaticProps } from "@/components/OrganizedContent/static";
|
||||||
import {
|
|
||||||
mobileShapesConfig,
|
|
||||||
aboutShapesConfig,
|
|
||||||
} from "@/components/ShapesBackground";
|
|
||||||
|
|
||||||
export const options = {
|
export const options = {
|
||||||
title: "Constitution",
|
title: "Constitution",
|
||||||
image: "images/constitution.svg",
|
image: "images/constitution.svg",
|
||||||
pagePath: path.join("about", "constitution"),
|
pagePath: path.join("about", "constitution"),
|
||||||
getShapesConfig: () =>
|
|
||||||
window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default createReadAllPage(options);
|
export default createReadAllPage(options);
|
||||||
|
|
|
@ -1,11 +1,6 @@
|
||||||
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";
|
||||||
|
|
||||||
|
@ -24,7 +19,3 @@ export default function OurSupporters() {
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
OurSupporters.getShapesConfig = (() => {
|
|
||||||
return window.innerWidth <= 768 ? mobileShapesConfig : aboutShapesConfig;
|
|
||||||
}) as GetShapesConfig;
|
|
||||||
|
|
|
@ -3,10 +3,6 @@ import React from "react";
|
||||||
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
import { ConnectWithUs } from "@/components/ConnectWithUs";
|
||||||
import { EmailSignup } from "@/components/EmailSignup";
|
import { EmailSignup } from "@/components/EmailSignup";
|
||||||
import { Image } from "@/components/Image";
|
import { Image } from "@/components/Image";
|
||||||
import {
|
|
||||||
GetShapesConfig,
|
|
||||||
mobileShapesConfig,
|
|
||||||
} from "@/components/ShapesBackground";
|
|
||||||
|
|
||||||
import Content from "../content/get-involved.mdx";
|
import Content from "../content/get-involved.mdx";
|
||||||
|
|
||||||
|
@ -37,63 +33,3 @@ export default function GetInvolved() {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
GetInvolved.getShapesConfig = (() => {
|
|
||||||
const desktopConfig = {
|
|
||||||
hash: [
|
|
||||||
{
|
|
||||||
top: "calc(860rem / 16)",
|
|
||||||
right: "90vw",
|
|
||||||
width: "calc(60rem / 16)",
|
|
||||||
height: "calc(60rem / 16)",
|
|
||||||
filter: "var(--teal)",
|
|
||||||
opacity: "30%",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
plus: [
|
|
||||||
{
|
|
||||||
top: "calc(540rem / 16)",
|
|
||||||
left: "90vw",
|
|
||||||
width: "calc(48rem / 16)",
|
|
||||||
height: "calc(48rem / 16)",
|
|
||||||
filter: "var(--teal)",
|
|
||||||
opacity: "30%",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
triangle: [
|
|
||||||
{
|
|
||||||
top: "calc(280rem / 16)",
|
|
||||||
right: "86vw",
|
|
||||||
width: "calc(68rem / 16)",
|
|
||||||
height: "calc(68rem / 16)",
|
|
||||||
transform: "rotate(-26deg)",
|
|
||||||
filter: "var(--teal)",
|
|
||||||
opacity: "30%",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
waves: [
|
|
||||||
{
|
|
||||||
bottom: "calc(580rem / 16)",
|
|
||||||
left: "88vw",
|
|
||||||
width: "calc(116rem / 16)",
|
|
||||||
height: "calc(58rem / 16)",
|
|
||||||
filter: "var(--teal)",
|
|
||||||
opacity: "30%",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
wavesBig: [
|
|
||||||
{
|
|
||||||
top: "0",
|
|
||||||
right: "89vw",
|
|
||||||
width: "calc(234rem / 16)",
|
|
||||||
height: "calc(115rem / 16)",
|
|
||||||
transform: "scaleX(-1)",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
if (window.innerWidth <= 768) {
|
|
||||||
return mobileShapesConfig;
|
|
||||||
}
|
|
||||||
return desktopConfig;
|
|
||||||
}) as GetShapesConfig;
|
|
||||||
|
|
Loading…
Reference in New Issue