Add shapes background to mobile home page
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
79a3959ece
commit
c2e6078dff
|
@ -1,5 +1,6 @@
|
||||||
.shapesContainer {
|
.shapesContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -8,17 +9,19 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.shape {
|
.shape {
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
--blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
|
--blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
|
||||||
brightness(92%) contrast(93%);
|
brightness(92%) contrast(93%);
|
||||||
--teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
|
--teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
|
||||||
brightness(91%) contrast(88%);
|
brightness(91%) contrast(88%);
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
filter: var(--blue);
|
||||||
|
opacity: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeDots {
|
.homeDots {
|
||||||
top: calc(0.06 * (580rem / 0.65) / 16);
|
top: calc(0.06 * (580rem / 0.65) / 16);
|
||||||
left: calc(-32rem / 16);
|
right: 90vw;
|
||||||
width: calc(168rem / 16);
|
width: calc(168rem / 16);
|
||||||
height: calc(204rem / 16);
|
height: calc(204rem / 16);
|
||||||
filter: var(--teal);
|
filter: var(--teal);
|
||||||
|
@ -30,8 +33,6 @@
|
||||||
left: 12vw;
|
left: 12vw;
|
||||||
width: calc(60rem / 16);
|
width: calc(60rem / 16);
|
||||||
height: calc(60rem / 16);
|
height: calc(60rem / 16);
|
||||||
filter: var(--blue);
|
|
||||||
opacity: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeTriangle1 {
|
.homeTriangle1 {
|
||||||
|
@ -50,7 +51,6 @@
|
||||||
width: calc(116rem / 16);
|
width: calc(116rem / 16);
|
||||||
height: calc(58rem / 16);
|
height: calc(58rem / 16);
|
||||||
filter: var(--teal);
|
filter: var(--teal);
|
||||||
opacity: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeTriangle2 {
|
.homeTriangle2 {
|
||||||
|
@ -59,8 +59,6 @@
|
||||||
width: calc(68rem / 16);
|
width: calc(68rem / 16);
|
||||||
height: calc(68rem / 16);
|
height: calc(68rem / 16);
|
||||||
transform: rotate(-26deg);
|
transform: rotate(-26deg);
|
||||||
filter: var(--blue);
|
|
||||||
opacity: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.homePlus {
|
.homePlus {
|
||||||
|
@ -68,8 +66,6 @@
|
||||||
right: 22vw;
|
right: 22vw;
|
||||||
width: calc(48rem / 16);
|
width: calc(48rem / 16);
|
||||||
height: calc(48rem / 16);
|
height: calc(48rem / 16);
|
||||||
filter: var(--blue);
|
|
||||||
opacity: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeWaves2 {
|
.homeWaves2 {
|
||||||
|
@ -78,7 +74,6 @@
|
||||||
width: calc(102rem / 16);
|
width: calc(102rem / 16);
|
||||||
height: calc(50rem / 16);
|
height: calc(50rem / 16);
|
||||||
filter: var(--teal);
|
filter: var(--teal);
|
||||||
opacity: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.homeHash2 {
|
.homeHash2 {
|
||||||
|
@ -86,8 +81,6 @@
|
||||||
right: 9vw;
|
right: 9vw;
|
||||||
width: calc(60rem / 16);
|
width: calc(60rem / 16);
|
||||||
height: calc(60rem / 16);
|
height: calc(60rem / 16);
|
||||||
filter: var(--blue);
|
|
||||||
opacity: 20%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
|
@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
|
||||||
|
@ -143,3 +136,62 @@
|
||||||
top: calc(0.25 * (420rem / 0.65) / 16);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue