Refactor home page shapes background
This commit is contained in:
parent
da19ce8f01
commit
35ba440636
|
@ -18,180 +18,3 @@
|
||||||
filter: var(--blue);
|
filter: var(--blue);
|
||||||
opacity: 20%;
|
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 = (() => {
|
Home.getShapesConfig = (() => {
|
||||||
return {
|
const bigDesktopConfig = {
|
||||||
triangle: [{ left: "2rem" }, { bottom: "2rem" }],
|
dots: [
|
||||||
dots: [{ top: "100px", right: "50vw" }],
|
{
|
||||||
|
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;
|
}) as GetShapesConfig;
|
||||||
|
|
Loading…
Reference in New Issue