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

Refactor colour and opacity classes

This commit is contained in:
Amy 2021-08-20 00:49:24 -04:00
parent bdd2ef380b
commit 79a3959ece
2 changed files with 26 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/ShapesBackground.module.css
View File

@ -9,35 +9,20 @@
.shape { .shape {
position: absolute; position: absolute;
}
.blue { --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
filter: 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 {
filter: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
brightness(91%) contrast(88%); brightness(91%) contrast(88%);
} }
.opacity20 {
opacity: 20%;
}
.opacity25 {
opacity: 25%;
}
.opacity30 {
opacity: 30%;
}
.homeDots { .homeDots {
top: calc(0.06 * (580rem / 0.65) / 16); 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);
filter: var(--teal);
opacity: 25%;
} }
.homeHash1 { .homeHash1 {
@ -45,6 +30,8 @@
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 {
@ -53,6 +40,8 @@
width: calc(68rem / 16); width: calc(68rem / 16);
height: calc(68rem / 16); height: calc(68rem / 16);
transform: rotate(18deg); transform: rotate(18deg);
filter: var(--teal);
opacity: 30%;
} }
.homeWaves1 { .homeWaves1 {
@ -60,6 +49,8 @@
left: 24vw; left: 24vw;
width: calc(116rem / 16); width: calc(116rem / 16);
height: calc(58rem / 16); height: calc(58rem / 16);
filter: var(--teal);
opacity: 20%;
} }
.homeTriangle2 { .homeTriangle2 {
@ -68,6 +59,8 @@
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 {
@ -75,6 +68,8 @@
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 {
@ -82,6 +77,8 @@
right: 18vw; right: 18vw;
width: calc(102rem / 16); width: calc(102rem / 16);
height: calc(50rem / 16); height: calc(50rem / 16);
filter: var(--teal);
opacity: 20%;
} }
.homeHash2 { .homeHash2 {
@ -89,6 +86,8 @@
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)) {

40
components/ShapesBackground.tsx
View File

@ -48,38 +48,14 @@ function Shape(props: { shape: ShapeType; className: string }) {
function HomeShapes() { function HomeShapes() {
return ( return (
<> <>
<Shape <Shape shape="dots" className={styles.homeDots} />
shape="dots" <Shape shape="hash" className={styles.homeHash1} />
className={`${styles.teal} ${styles.opacity25} ${styles.homeDots}`} <Shape shape="triangle" className={styles.homeTriangle1} />
/> <Shape shape="waves" className={styles.homeWaves1} />
<Shape <Shape shape="triangle" className={styles.homeTriangle2} />
shape="hash" <Shape shape="plus" className={styles.homePlus} />
className={`${styles.blue} ${styles.opacity20} ${styles.homeHash1}`} <Shape shape="waves" className={styles.homeWaves2} />
/> <Shape shape="hash" className={styles.homeHash2} />
<Shape
shape="triangle"
className={`${styles.teal} ${styles.opacity30} ${styles.homeTriangle1}`}
/>
<Shape
shape="waves"
className={`${styles.teal} ${styles.opacity20} ${styles.homeWaves1}`}
/>
<Shape
shape="triangle"
className={`${styles.blue} ${styles.opacity20} ${styles.homeTriangle2}`}
/>
<Shape
shape="plus"
className={`${styles.blue} ${styles.opacity20} ${styles.homePlus}`}
/>
<Shape
shape="waves"
className={`${styles.teal} ${styles.opacity20} ${styles.homeWaves2}`}
/>
<Shape
shape="hash"
className={`${styles.blue} ${styles.opacity20} ${styles.homeHash2}`}
/>
</> </>
); );
} }