Commit
+18 -15 +/-5 browse
1 | diff --git a/src/props.gradients.css b/src/props.gradients.css |
2 | index 4cc6cd6..03f3de3 100644 |
3 | --- a/src/props.gradients.css |
4 | +++ b/src/props.gradients.css |
5 | @@ -53,4 +53,10 @@ |
6 | circle at bottom left, |
7 | hsl(150 100% 84%), hsl(150 100% 84% / 0%) |
8 | ); |
9 | + --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); |
10 | + --grain-filter-1: contrast(300%) brightness(100%); |
11 | + --grain-filter-2: contrast(200%) brightness(150%); |
12 | + --grain-filter-3: contrast(200%) brightness(250%); |
13 | + --grain-filter-4: contrast(200%) brightness(500%); |
14 | + --grain-filter-5: contrast(200%) brightness(1000%); |
15 | } |
16 | diff --git a/src/props.gradients.js b/src/props.gradients.js |
17 | index b2f18b3..0e91232 100644 |
18 | --- a/src/props.gradients.js |
19 | +++ b/src/props.gradients.js |
20 | @@ -46,7 +46,8 @@ const Gradients = { |
21 | circle at bottom left, |
22 | hsl(220 90% 75%), hsl(220 90% 75% / 0%) |
23 | )`, |
24 | - '--gradient-30': `radial-gradient( |
25 | + '--gradient-30': |
26 | + `radial-gradient( |
27 | circle at top right, |
28 | hsl(150 100% 50%), hsl(150 100% 50% / 0%) |
29 | ), |
30 | @@ -54,6 +55,14 @@ const Gradients = { |
31 | circle at bottom left, |
32 | hsl(150 100% 84%), hsl(150 100% 84% / 0%) |
33 | )`, |
34 | + |
35 | + '--grain': `url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`, |
36 | + |
37 | + '--grain-filter-1': 'contrast(300%) brightness(100%)', |
38 | + '--grain-filter-2': 'contrast(200%) brightness(150%)', |
39 | + '--grain-filter-3': 'contrast(200%) brightness(250%)', |
40 | + '--grain-filter-4': 'contrast(200%) brightness(500%)', |
41 | + '--grain-filter-5': 'contrast(200%) brightness(1000%)', |
42 | } |
43 | |
44 | export default Gradients |
45 | \ No newline at end of file |
46 | diff --git a/src/props.shadows.css b/src/props.shadows.css |
47 | index 1c36c28..0f85134 100644 |
48 | --- a/src/props.shadows.css |
49 | +++ b/src/props.shadows.css |
50 | @@ -1,3 +1,5 @@ |
51 | + @import 'props.media.css'; |
52 | + |
53 | :where(html) { |
54 | --shadow-color: 220 3% 15%; |
55 | --shadow-strength: 1%; |
56 | diff --git a/src/props.svg.css b/src/props.svg.css |
57 | index c1089b8..b0df8be 100644 |
58 | --- a/src/props.svg.css |
59 | +++ b/src/props.svg.css |
60 | @@ -1,10 +1,4 @@ |
61 | :where(html) { |
62 | - --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); |
63 | - --grain-filter-1: contrast(300%) brightness(100%); |
64 | - --grain-filter-2: contrast(200%) brightness(150%); |
65 | - --grain-filter-3: contrast(200%) brightness(250%); |
66 | - --grain-filter-4: contrast(200%) brightness(500%); |
67 | - --grain-filter-5: contrast(200%) brightness(1000%); |
68 | --squircle-1: url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 18.75 18.75, 0 75, 0 S 150, 18.75 150, 75 131.25, 150 75, 150 0, 131.25 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E"); |
69 | --squircle-2: url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 13.500000000000004 13.500000000000004, 0 75, 0 S 150, 13.500000000000004 150, 75 136.5, 150 75, 150 0, 136.5 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E"); |
70 | --squircle-3: url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 5.999999999999997 5.999999999999997, 0 75, 0 S 150, 5.999999999999997 150, 75 144, 150 75, 150 0, 144 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E"); |
71 | diff --git a/src/props.svg.js b/src/props.svg.js |
72 | index 3f9b895..61d6705 100644 |
73 | --- a/src/props.svg.js |
74 | +++ b/src/props.svg.js |
75 | @@ -1,12 +1,4 @@ |
76 | const SVG = { |
77 | - '--grain': `url("data:image/svg+xml,%3Csvg viewBox='0 0 2056 2056' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`, |
78 | - |
79 | - '--grain-filter-1': 'contrast(300%) brightness(100%)', |
80 | - '--grain-filter-2': 'contrast(200%) brightness(150%)', |
81 | - '--grain-filter-3': 'contrast(200%) brightness(250%)', |
82 | - '--grain-filter-4': 'contrast(200%) brightness(500%)', |
83 | - '--grain-filter-5': 'contrast(200%) brightness(1000%)', |
84 | - |
85 | '--squircle-1': `url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 18.75 18.75, 0 75, 0 S 150, 18.75 150, 75 131.25, 150 75, 150 0, 131.25 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E")`, |
86 | '--squircle-2': `url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 13.500000000000004 13.500000000000004, 0 75, 0 S 150, 13.500000000000004 150, 75 136.5, 150 75, 150 0, 136.5 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E")`, |
87 | '--squircle-3': `url("data:image/svg+xml,%3Csvg viewbox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d=' M 0, 75 C 0, 5.999999999999997 5.999999999999997, 0 75, 0 S 150, 5.999999999999997 150, 75 144, 150 75, 150 0, 144 0, 75 ' fill='%23FADB5F' transform='rotate( 0, 100, 100 ) translate( 25 25 )'%3E%3C/path%3E%3C/svg%3E")`, |