Refactor home page shapes background
This commit is contained in:
Amy
parent
da19ce8f01
commit
35ba440636
|
|
@ -18,180 +18,3 @@
|
|||
filter: var(--blue);
|
||||
opacity: 20%;
|
||||
}
|
||||
|
||||
.homeDots {
|
||||
top: calc(0.06 * (580rem / 0.65) / 16);
|
||||
right: 90vw;
|
||||
width: calc(168rem / 16);
|
||||
height: calc(204rem / 16);
|
||||
filter: var(--teal);
|
||||
opacity: 25%;
|
||||
}
|
||||
|
||||
.homeHash1 {
|
||||
top: calc(0.32 * (580rem / 0.65) / 16);
|
||||
left: 12vw;
|
||||
width: calc(60rem / 16);
|
||||
height: calc(60rem / 16);
|
||||
}
|
||||
|
||||
.homeTriangle1 {
|
||||
top: calc(0.05 * (580rem / 0.65) / 16);
|
||||
left: 20vw;
|
||||
width: calc(68rem / 16);
|
||||
height: calc(68rem / 16);
|
||||
transform: rotate(18deg);
|
||||
filter: var(--teal);
|
||||
opacity: 30%;
|
||||
}
|
||||
|
||||
.homeWaves1 {
|
||||
top: calc(0.5 * (580rem / 0.65) / 16);
|
||||
left: 24vw;
|
||||
width: calc(116rem / 16);
|
||||
height: calc(58rem / 16);
|
||||
filter: var(--teal);
|
||||
}
|
||||
|
||||
.homeTriangle2 {
|
||||
top: calc(0.02 * (580rem / 0.65) / 16);
|
||||
right: 40vw;
|
||||
width: calc(68rem / 16);
|
||||
height: calc(68rem / 16);
|
||||
transform: rotate(-26deg);
|
||||
}
|
||||
|
||||
.homePlus {
|
||||
top: calc(0.42 * (580rem / 0.65) / 16);
|
||||
right: 22vw;
|
||||
width: calc(48rem / 16);
|
||||
height: calc(48rem / 16);
|
||||
}
|
||||
|
||||
.homeWaves2 {
|
||||
top: calc(0.1 * (580rem / 0.65) / 16);
|
||||
right: 18vw;
|
||||
width: calc(102rem / 16);
|
||||
height: calc(50rem / 16);
|
||||
filter: var(--teal);
|
||||
}
|
||||
|
||||
.homeHash2 {
|
||||
top: calc(0.25 * (580rem / 0.65) / 16);
|
||||
right: 9vw;
|
||||
width: calc(60rem / 16);
|
||||
height: calc(60rem / 16);
|
||||
}
|
||||
|
||||
@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
|
||||
.homeDots {
|
||||
top: 6vh;
|
||||
}
|
||||
.homeHash1 {
|
||||
top: 32vh;
|
||||
}
|
||||
.homeTriangle1 {
|
||||
top: 5vh;
|
||||
}
|
||||
.homeWaves1 {
|
||||
top: 50vh;
|
||||
}
|
||||
.homeTriangle2 {
|
||||
top: 2vh;
|
||||
}
|
||||
.homePlus {
|
||||
top: 42vh;
|
||||
}
|
||||
.homeWaves2 {
|
||||
top: 10vh;
|
||||
}
|
||||
.homeHash2 {
|
||||
top: 25vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: calc((420rem / 0.65) / 16)) {
|
||||
.homeDots {
|
||||
top: calc(0.06 * (420rem / 0.65) / 16);
|
||||
}
|
||||
.homeHash1 {
|
||||
top: calc(0.32 * (420rem / 0.65) / 16);
|
||||
}
|
||||
.homeTriangle1 {
|
||||
top: calc(0.05 * (420rem / 0.65) / 16);
|
||||
}
|
||||
.homeWaves1 {
|
||||
top: calc(0.5 * (420rem / 0.65) / 16);
|
||||
}
|
||||
.homeTriangle2 {
|
||||
top: calc(0.02 * (420rem / 0.65) / 16);
|
||||
}
|
||||
.homePlus {
|
||||
top: calc(0.42 * (420rem / 0.65) / 16);
|
||||
}
|
||||
.homeWaves2 {
|
||||
top: calc(0.1 * (420rem / 0.65) / 16);
|
||||
}
|
||||
.homeHash2 {
|
||||
top: calc(0.25 * (420rem / 0.65) / 16);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: calc(768rem / 16)) {
|
||||
.homeDots {
|
||||
top: 0;
|
||||
right: 80vw;
|
||||
width: calc(168rem / 16);
|
||||
height: calc(152rem / 16);
|
||||
filter: var(--blue);
|
||||
opacity: 20%;
|
||||
}
|
||||
|
||||
.homeHash1 {
|
||||
top: calc(190rem / 16);
|
||||
left: unset;
|
||||
right: 87vw;
|
||||
width: calc(60rem / 16);
|
||||
height: calc(60rem / 16);
|
||||
}
|
||||
|
||||
.homeTriangle1 {
|
||||
top: calc(266rem / 16);
|
||||
left: unset;
|
||||
right: 78vw;
|
||||
width: calc(45rem / 16);
|
||||
height: calc(45rem / 16);
|
||||
transform: rotate(-26deg);
|
||||
filter: var(--blue);
|
||||
opacity: 20%;
|
||||
}
|
||||
|
||||
.homeWaves1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homeTriangle2 {
|
||||
top: calc(4rem / 16);
|
||||
right: 3vw;
|
||||
width: calc(45rem / 16);
|
||||
height: calc(45rem / 16);
|
||||
transform: rotate(16deg);
|
||||
}
|
||||
|
||||
.homePlus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.homeWaves2 {
|
||||
top: calc(168rem / 16);
|
||||
left: 86vw;
|
||||
right: unset;
|
||||
width: calc(102rem / 16);
|
||||
height: calc(50rem / 16);
|
||||
filter: var(--blue);
|
||||
}
|
||||
|
||||
.homeHash2 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,18 +56,3 @@ function Shape(props: { type: ShapeType; style: CSSProperties }) {
|
|||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// function HomeShapes() {
|
||||
// return (
|
||||
// <>
|
||||
// <Shape type="dots" className={styles.homeDots} />
|
||||
// <Shape type="hash" className={styles.homeHash1} />
|
||||
// <Shape type="triangle" className={styles.homeTriangle1} />
|
||||
// <Shape type="waves" className={styles.homeWaves1} />
|
||||
// <Shape type="triangle" className={styles.homeTriangle2} />
|
||||
// <Shape type="plus" className={styles.homePlus} />
|
||||
// <Shape type="waves" className={styles.homeWaves2} />
|
||||
// <Shape type="hash" className={styles.homeHash2} />
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
|
|
|||
184
pages/index.tsx
184
pages/index.tsx
|
|
@ -95,8 +95,186 @@ Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
|||
};
|
||||
|
||||
Home.getShapesConfig = (() => {
|
||||
return {
|
||||
triangle: [{ left: "2rem" }, { bottom: "2rem" }],
|
||||
dots: [{ top: "100px", right: "50vw" }],
|
||||
const bigDesktopConfig = {
|
||||
dots: [
|
||||
{
|
||||
top: "calc(0.06 * (580rem / 0.65) / 16)",
|
||||
right: "90vw",
|
||||
width: "calc(168rem / 16)",
|
||||
height: "calc(204rem / 16)",
|
||||
filter: "var(--teal)",
|
||||
opacity: "25%",
|
||||
},
|
||||
],
|
||||
hash: [
|
||||
{
|
||||
top: "calc(0.32 * (580rem / 0.65) / 16)",
|
||||
left: "12vw",
|
||||
width: "calc(60rem / 16)",
|
||||
height: "calc(60rem / 16)",
|
||||
},
|
||||
{
|
||||
top: "calc(0.25 * (580rem / 0.65) / 16)",
|
||||
right: "9vw",
|
||||
width: "calc(60rem / 16)",
|
||||
height: "calc(60rem / 16)",
|
||||
},
|
||||
],
|
||||
plus: [
|
||||
{
|
||||
top: "calc(0.42 * (580rem / 0.65) / 16)",
|
||||
right: "22vw",
|
||||
width: "calc(48rem / 16)",
|
||||
height: "calc(48rem / 16)",
|
||||
},
|
||||
],
|
||||
triangle: [
|
||||
{
|
||||
top: "calc(0.05 * (580rem / 0.65) / 16)",
|
||||
left: "20vw",
|
||||
width: "calc(68rem / 16)",
|
||||
height: "calc(68rem / 16)",
|
||||
transform: "rotate(18deg)",
|
||||
filter: "var(--teal)",
|
||||
opacity: "30%",
|
||||
},
|
||||
{
|
||||
top: "calc(0.02 * (580rem / 0.65) / 16)",
|
||||
right: "40vw",
|
||||
width: "calc(68rem / 16)",
|
||||
height: "calc(68rem / 16)",
|
||||
transform: "rotate(-26deg)",
|
||||
},
|
||||
],
|
||||
waves: [
|
||||
{
|
||||
top: "calc(0.5 * (580rem / 0.65) / 16)",
|
||||
left: "24vw",
|
||||
width: "calc(116rem / 16)",
|
||||
height: "calc(58rem / 16)",
|
||||
filter: "var(--teal)",
|
||||
},
|
||||
{
|
||||
top: "calc(0.1 * (580rem / 0.65) / 16)",
|
||||
right: "18vw",
|
||||
width: "calc(102rem / 16)",
|
||||
height: "calc(50rem / 16)",
|
||||
filter: "var(--teal)",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const mediumDesktopConfig = {
|
||||
dots: [{ ...bigDesktopConfig["dots"][0], top: "6vh" }],
|
||||
hash: [
|
||||
{ ...bigDesktopConfig["hash"][0], top: "32vh" },
|
||||
{ ...bigDesktopConfig["hash"][1], top: "25vh" },
|
||||
],
|
||||
plus: [{ ...bigDesktopConfig["plus"][0], top: "42vh" }],
|
||||
triangle: [
|
||||
{ ...bigDesktopConfig["triangle"][0], top: "5vh" },
|
||||
{ ...bigDesktopConfig["triangle"][1], top: "2vh" },
|
||||
],
|
||||
waves: [
|
||||
{ ...bigDesktopConfig["waves"][0], top: "50vh" },
|
||||
{ ...bigDesktopConfig["waves"][1], top: "10vh" },
|
||||
],
|
||||
};
|
||||
|
||||
const smallDesktopConfig = {
|
||||
dots: [
|
||||
{
|
||||
...bigDesktopConfig["dots"][0],
|
||||
top: "calc(0.06 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
],
|
||||
hash: [
|
||||
{
|
||||
...bigDesktopConfig["hash"][0],
|
||||
top: "calc(0.32 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
{
|
||||
...bigDesktopConfig["hash"][1],
|
||||
top: "calc(0.25 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
],
|
||||
plus: [
|
||||
{
|
||||
...bigDesktopConfig["plus"][0],
|
||||
top: "calc(0.42 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
],
|
||||
triangle: [
|
||||
{
|
||||
...bigDesktopConfig["triangle"][0],
|
||||
top: "calc(0.05 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
{
|
||||
...bigDesktopConfig["triangle"][1],
|
||||
top: "calc(0.02 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
],
|
||||
waves: [
|
||||
{
|
||||
...bigDesktopConfig["waves"][0],
|
||||
top: "calc(0.5 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
{
|
||||
...bigDesktopConfig["waves"][1],
|
||||
top: "calc(0.1 * (420rem / 0.65) / 16)",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const mobileConfig = {
|
||||
dots: [
|
||||
{
|
||||
top: "0",
|
||||
right: "80vw",
|
||||
width: "calc(168rem / 16)",
|
||||
height: "calc(152rem / 16)",
|
||||
},
|
||||
],
|
||||
hash: [
|
||||
{
|
||||
top: "calc(190rem / 16)",
|
||||
right: "87vw",
|
||||
width: "calc(60rem / 16)",
|
||||
height: "calc(60rem / 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",
|
||||
width: "calc(45rem / 16)",
|
||||
height: "calc(45rem / 16)",
|
||||
transform: "rotate(16deg)",
|
||||
},
|
||||
],
|
||||
waves: [
|
||||
{
|
||||
top: "calc(168rem / 16)",
|
||||
left: "86vw",
|
||||
width: "calc(102rem / 16)",
|
||||
height: "calc(50rem / 16)",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
if (window.innerWidth <= 768) {
|
||||
return mobileConfig;
|
||||
} else if (window.innerHeight <= 420 / 0.65) {
|
||||
return smallDesktopConfig;
|
||||
} else if (window.innerHeight <= 580 / 0.65) {
|
||||
return mediumDesktopConfig;
|
||||
}
|
||||
return bigDesktopConfig;
|
||||
}) as GetShapesConfig;
|
||||
|
|
|
|||
Loading…
Reference in New Issue