Compare commits
9 Commits
main
...
amy-random
| Author | SHA1 | Date |
|---|---|---|
Amy
|
b0d23c51d4 | 2 years ago |
|
Amy
|
da19ce8f01 | 2 years ago |
|
Amy
|
c2e6078dff | 2 years ago |
|
Amy
|
79a3959ece | 2 years ago |
|
Amy
|
bdd2ef380b | 2 years ago |
|
Amy
|
93824c31d8 | 2 years ago |
|
Amy
|
bbc8e94387 | 2 years ago |
|
Amy
|
04ecb67feb | 2 years ago |
|
Amy
|
0bbfaa59c4 | 2 years ago |
@ -0,0 +1,199 @@ |
||||
.shapesContainer { |
||||
position: absolute; |
||||
overflow: hidden; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
z-index: -10; |
||||
} |
||||
|
||||
.shape { |
||||
--blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg) |
||||
brightness(92%) contrast(93%); |
||||
--teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg) |
||||
brightness(91%) contrast(88%); |
||||
|
||||
position: absolute; |
||||
filter: var(--blue); |
||||
opacity: 20%; |
||||
|
||||
transition: 0.5s; |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
@ -0,0 +1,76 @@ |
||||
import React, { CSSProperties, useEffect, useState } from "react"; |
||||
|
||||
import { Image } from "./Image"; |
||||
|
||||
import styles from "./ShapesBackground.module.css"; |
||||
|
||||
interface Props { |
||||
getConfig?: GetShapesConfig; |
||||
} |
||||
|
||||
export function ShapesBackground({ getConfig }: Props) { |
||||
const [config, setConfig] = useState<ShapesConfig>({}); |
||||
|
||||
useEffect(() => { |
||||
setConfig(getConfig?.() ?? {}); |
||||
}, [getConfig]); |
||||
|
||||
return ( |
||||
<div className={styles.shapesContainer}> |
||||
{Object.entries(config).map(([type, instances]) => |
||||
instances.map((attributes, idx) => ( |
||||
<Shape |
||||
key={idx.toString() + type} |
||||
type={type as ShapeType} |
||||
style={attributes} |
||||
/> |
||||
)) |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export const shapeTypes = [ |
||||
"asterisk", |
||||
"circle", |
||||
"cross", |
||||
"dots", |
||||
"hash", |
||||
"plus", |
||||
"ring", |
||||
"triangle", |
||||
"waves", |
||||
] as const; |
||||
|
||||
export type ShapeType = typeof shapeTypes[number]; |
||||
|
||||
export type ShapesConfig = { |
||||
[key in ShapeType]?: CSSProperties[]; |
||||
}; |
||||
|
||||
export type GetShapesConfig = () => ShapesConfig; |
||||
|
||||
function Shape(props: { type: ShapeType; style: CSSProperties }) { |
||||
return ( |
||||
<Image |
||||
src={`/images/shapes/${props.type}.svg`} |
||||
className={styles.shape} |
||||
style={props.style} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
// 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} />
|
||||
// </>
|
||||
// );
|
||||
// }
|
||||
|
Before Width: | Height: | Size: 836 B After Width: | Height: | Size: 836 B |
|
Before Width: | Height: | Size: 425 B After Width: | Height: | Size: 425 B |
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 4.4 KiB |
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 627 B After Width: | Height: | Size: 627 B |
|
Before Width: | Height: | Size: 365 B After Width: | Height: | Size: 365 B |
|
Before Width: | Height: | Size: 227 B After Width: | Height: | Size: 227 B |
|
Before Width: | Height: | Size: 190 B After Width: | Height: | Size: 190 B |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |