146 lines
2.7 KiB
CSS
146 lines
2.7 KiB
CSS
@import url("https://fonts.googleapis.com/css2?family=Fraunces:wght@400;700;800&display=swap");
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
padding: 3rem 1.5rem;
|
|
font-family: "Fraunces", Georgia, serif;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
h1,
|
|
h2 {
|
|
letter-spacing: -0.025em;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.wrapper {
|
|
max-width: 80rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.center-xy {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font-size: 2.25rem;
|
|
}
|
|
|
|
.fleck-demos {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
|
|
grid-gap: 4rem;
|
|
}
|
|
|
|
.fleck-demo {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 1;
|
|
background: red;
|
|
border-radius: 50%;
|
|
|
|
background-color: var(--background-color);
|
|
background-image: paint(fleck);
|
|
}
|
|
|
|
@supports not (aspect-ratio: 1 / 1) {
|
|
.fleck-demo {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 0;
|
|
padding-top: 100%;
|
|
}
|
|
}
|
|
|
|
.fleck-demo[data-theme="pink"] {
|
|
--fleck-seed: 123456;
|
|
--fleck-count: 500;
|
|
--fleck-size-base: 5px;
|
|
--fleck-color-1: #ffb5d7;
|
|
--fleck-color-2: #a6bfeb;
|
|
--fleck-color-3: #cce0ee;
|
|
--fleck-color-4: #ebaedc;
|
|
|
|
--background-color: hsl(213, 48%, 97%);
|
|
}
|
|
|
|
.fleck-demo[data-theme="gold"] {
|
|
--fleck-seed: 123453;
|
|
--fleck-count: 680;
|
|
--fleck-size-base: 4px;
|
|
--fleck-color-1: #e8ad3c;
|
|
--fleck-color-2: #a96c1a;
|
|
--fleck-color-3: #d7b54e;
|
|
--fleck-color-4: #e2b84b;
|
|
--fleck-color-5: #d6cdc4;
|
|
|
|
--background-color: #1b1918;
|
|
}
|
|
|
|
.fleck-demo[data-theme="green"] {
|
|
--fleck-seed: 123450;
|
|
--fleck-count: 540;
|
|
--fleck-size-base: 4px;
|
|
--fleck-color-1: #58835c;
|
|
--fleck-color-2: #abb16b;
|
|
--fleck-color-3: #4a6539;
|
|
--fleck-color-4: #074a41;
|
|
|
|
--background-color: #102222;
|
|
}
|
|
|
|
.fleck-demo[data-theme="blue"] {
|
|
--fleck-seed: 123449;
|
|
--fleck-count: 580;
|
|
--fleck-size-base: 4px;
|
|
--fleck-color-1: #0193c1;
|
|
--fleck-color-2: #74d8e6;
|
|
--fleck-color-3: #0bc0e0;
|
|
--fleck-color-4: #3ddaf5;
|
|
--fleck-color-5: #e2f9fe;
|
|
--fleck-color-6: #02313f;
|
|
|
|
--background-color: #84dce2;
|
|
}
|
|
|
|
.fleck-demo[data-theme="grunge"] {
|
|
--fleck-seed: 123448;
|
|
--fleck-count: 580;
|
|
--fleck-size-base: 4px;
|
|
--fleck-color-1: #000001;
|
|
--fleck-color-2: #171920;
|
|
--fleck-color-3: #f9be41;
|
|
--fleck-color-4: #fff;
|
|
|
|
--background-color: #fec536;
|
|
}
|
|
|
|
.fleck-demo[data-theme="red"] {
|
|
--fleck-seed: 123447;
|
|
--fleck-count: 540;
|
|
--fleck-size-base: 4px;
|
|
|
|
--fleck-color-1: #fe9f00;
|
|
--fleck-color-2: #100b10;
|
|
--fleck-color-3: #bd0700;
|
|
--fleck-color-4: #ffe2e0;
|
|
|
|
--background-color: #ff380c;
|
|
}
|
|
|
|
.fleck-demo-title {
|
|
margin-top: 1.5rem;
|
|
text-align: center;
|
|
font-size: clamp(1.125rem, 5vw, 1.25rem);
|
|
} |