www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

Improve shapes layout on home page

This commit is contained in:
Amy 2021-08-20 00:30:31 -04:00
parent bbc8e94387
commit 93824c31d8
1 changed files with 62 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/ShapesBackground.module.css
View File

@ -36,21 +36,21 @@
/* * * HOME PAGE * * */ /* * * HOME PAGE * * */
.homeDots { .homeDots {
top: 6vh; top: calc(0.06 * (580rem / 0.65) / 16);
left: calc(-32rem / 16); left: calc(-32rem / 16);
width: calc(168rem / 16); width: calc(168rem / 16);
height: calc(204rem / 16); height: calc(204rem / 16);
} }
.homeHash1 { .homeHash1 {
top: 32vh; top: calc(0.32 * (580rem / 0.65) / 16);
left: 12vw; left: 12vw;
width: calc(60rem / 16); width: calc(60rem / 16);
height: calc(60rem / 16); height: calc(60rem / 16);
} }
.homeTriangle1 { .homeTriangle1 {
top: 5vh; top: calc(0.05 * (580rem / 0.65) / 16);
left: 20vw; left: 20vw;
width: calc(68rem / 16); width: calc(68rem / 16);
height: calc(68rem / 16); height: calc(68rem / 16);
@ -58,14 +58,14 @@
} }
.homeWaves1 { .homeWaves1 {
top: 50vh; top: calc(0.5 * (580rem / 0.65) / 16);
left: 24vw; left: 24vw;
width: calc(116rem / 16); width: calc(116rem / 16);
height: calc(58rem / 16); height: calc(58rem / 16);
} }
.homeTriangle2 { .homeTriangle2 {
top: 2vh; top: calc(0.02 * (580rem / 0.65) / 16);
right: 40vw; right: 40vw;
width: calc(68rem / 16); width: calc(68rem / 16);
height: calc(68rem / 16); height: calc(68rem / 16);
@ -73,22 +73,76 @@
} }
.homePlus { .homePlus {
top: 42vh; top: calc(0.42 * (580rem / 0.65) / 16);
right: 22vw; right: 22vw;
width: calc(48rem / 16); width: calc(48rem / 16);
height: calc(48rem / 16); height: calc(48rem / 16);
} }
.homeWaves2 { .homeWaves2 {
top: 10vh; top: calc(0.1 * (580rem / 0.65) / 16);
right: 18vw; right: 18vw;
width: calc(102rem / 16); width: calc(102rem / 16);
height: calc(50rem / 16); height: calc(50rem / 16);
} }
.homeHash2 { .homeHash2 {
top: 25vh; top: calc(0.25 * (580rem / 0.65) / 16);
right: 9vw; right: 9vw;
width: calc(60rem / 16); width: calc(60rem / 16);
height: 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);
}
}