@duskmoon-dev/css-art 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/art/atom.css +184 -0
- package/dist/art/eclipse.css +79 -0
- package/dist/art/index.css +1271 -0
- package/dist/art/moon.css +89 -0
- package/dist/art/mountain.css +112 -0
- package/dist/art/plasma-ball.css +662 -0
- package/dist/art/snow.css +38 -0
- package/dist/art/sun.css +99 -0
- package/dist/index.css +1281 -0
- package/dist/index.min.css +1 -0
- package/package.json +60 -0
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
@layer css-art {
|
|
2
|
+
.art-moon {
|
|
3
|
+
--art-moon-size: 8rem;
|
|
4
|
+
--art-moon-color: oklch(92% 0.06 90);
|
|
5
|
+
--art-moon-shadow: oklch(85% 0.04 90);
|
|
6
|
+
--art-moon-glow: oklch(95% 0.03 90 / 0.4);
|
|
7
|
+
|
|
8
|
+
position: relative;
|
|
9
|
+
width: var(--art-moon-size);
|
|
10
|
+
height: var(--art-moon-size);
|
|
11
|
+
border-radius: 50%;
|
|
12
|
+
background: radial-gradient(
|
|
13
|
+
circle at 35% 35%,
|
|
14
|
+
var(--art-moon-color) 0%,
|
|
15
|
+
var(--art-moon-shadow) 100%
|
|
16
|
+
);
|
|
17
|
+
box-shadow:
|
|
18
|
+
0 0 calc(var(--art-moon-size) * 0.25) var(--art-moon-glow),
|
|
19
|
+
0 0 calc(var(--art-moon-size) * 0.5) var(--art-moon-glow);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* Crescent variant — shadow circle creates the crescent shape */
|
|
23
|
+
.art-moon-crescent {
|
|
24
|
+
overflow: hidden;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.art-moon-crescent::after {
|
|
28
|
+
content: '';
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: -10%;
|
|
31
|
+
right: -20%;
|
|
32
|
+
width: 85%;
|
|
33
|
+
height: 85%;
|
|
34
|
+
border-radius: 50%;
|
|
35
|
+
background: oklch(15% 0.02 260);
|
|
36
|
+
box-shadow: inset 0 0 1rem oklch(20% 0.02 260);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Craters */
|
|
40
|
+
.art-moon::before {
|
|
41
|
+
content: '';
|
|
42
|
+
position: absolute;
|
|
43
|
+
width: 20%;
|
|
44
|
+
height: 20%;
|
|
45
|
+
top: 25%;
|
|
46
|
+
left: 40%;
|
|
47
|
+
border-radius: 50%;
|
|
48
|
+
background: radial-gradient(
|
|
49
|
+
circle,
|
|
50
|
+
oklch(82% 0.03 90 / 0.6) 0%,
|
|
51
|
+
transparent 70%
|
|
52
|
+
);
|
|
53
|
+
box-shadow:
|
|
54
|
+
calc(var(--art-moon-size) * -0.15) calc(var(--art-moon-size) * 0.2) 0 -2px oklch(82% 0.03 90 / 0.4),
|
|
55
|
+
calc(var(--art-moon-size) * 0.1) calc(var(--art-moon-size) * -0.05) 0 -3px oklch(82% 0.03 90 / 0.3),
|
|
56
|
+
calc(var(--art-moon-size) * -0.08) calc(var(--art-moon-size) * -0.12) 0 -1px oklch(82% 0.03 90 / 0.35);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Size variants */
|
|
60
|
+
.art-moon-sm {
|
|
61
|
+
--art-moon-size: 4rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.art-moon-lg {
|
|
65
|
+
--art-moon-size: 12rem;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.art-moon-xl {
|
|
69
|
+
--art-moon-size: 16rem;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Animated glow */
|
|
73
|
+
.art-moon-glow {
|
|
74
|
+
animation: art-moon-pulse 4s ease-in-out infinite;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
@keyframes art-moon-pulse {
|
|
78
|
+
0%, 100% {
|
|
79
|
+
box-shadow:
|
|
80
|
+
0 0 calc(var(--art-moon-size) * 0.25) var(--art-moon-glow),
|
|
81
|
+
0 0 calc(var(--art-moon-size) * 0.5) var(--art-moon-glow);
|
|
82
|
+
}
|
|
83
|
+
50% {
|
|
84
|
+
box-shadow:
|
|
85
|
+
0 0 calc(var(--art-moon-size) * 0.35) var(--art-moon-glow),
|
|
86
|
+
0 0 calc(var(--art-moon-size) * 0.7) var(--art-moon-glow);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
@layer css-art {
|
|
2
|
+
.art-mountain {
|
|
3
|
+
--art-mountain-width: 16rem;
|
|
4
|
+
--art-mountain-height: 10rem;
|
|
5
|
+
--art-mountain-color: oklch(45% 0.05 150);
|
|
6
|
+
--art-mountain-shadow: oklch(35% 0.04 150);
|
|
7
|
+
--art-mountain-snow: oklch(97% 0.005 90);
|
|
8
|
+
|
|
9
|
+
position: relative;
|
|
10
|
+
width: var(--art-mountain-width);
|
|
11
|
+
height: var(--art-mountain-height);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Main peak */
|
|
15
|
+
.art-mountain::before {
|
|
16
|
+
content: '';
|
|
17
|
+
position: absolute;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
left: 50%;
|
|
20
|
+
transform: translateX(-50%);
|
|
21
|
+
width: 0;
|
|
22
|
+
height: 0;
|
|
23
|
+
border-left: calc(var(--art-mountain-width) * 0.45) solid transparent;
|
|
24
|
+
border-right: calc(var(--art-mountain-width) * 0.45) solid transparent;
|
|
25
|
+
border-bottom: var(--art-mountain-height) solid var(--art-mountain-color);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Snow cap */
|
|
29
|
+
.art-mountain::after {
|
|
30
|
+
content: '';
|
|
31
|
+
position: absolute;
|
|
32
|
+
top: 0;
|
|
33
|
+
left: 50%;
|
|
34
|
+
transform: translateX(-50%);
|
|
35
|
+
width: 0;
|
|
36
|
+
height: 0;
|
|
37
|
+
border-left: calc(var(--art-mountain-width) * 0.1) solid transparent;
|
|
38
|
+
border-right: calc(var(--art-mountain-width) * 0.1) solid transparent;
|
|
39
|
+
border-bottom: calc(var(--art-mountain-height) * 0.25) solid var(--art-mountain-snow);
|
|
40
|
+
z-index: 1;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Range — multiple peaks */
|
|
44
|
+
.art-mountain-range {
|
|
45
|
+
--art-mountain-width: 24rem;
|
|
46
|
+
--art-mountain-height: 10rem;
|
|
47
|
+
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: flex-end;
|
|
50
|
+
position: relative;
|
|
51
|
+
width: var(--art-mountain-width);
|
|
52
|
+
height: var(--art-mountain-height);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.art-mountain-range::before,
|
|
56
|
+
.art-mountain-range::after {
|
|
57
|
+
content: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.art-mountain-range .art-peak {
|
|
61
|
+
position: absolute;
|
|
62
|
+
bottom: 0;
|
|
63
|
+
width: 0;
|
|
64
|
+
height: 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.art-mountain-range .art-peak:nth-child(1) {
|
|
68
|
+
left: 10%;
|
|
69
|
+
border-left: calc(var(--art-mountain-width) * 0.25) solid transparent;
|
|
70
|
+
border-right: calc(var(--art-mountain-width) * 0.25) solid transparent;
|
|
71
|
+
border-bottom: calc(var(--art-mountain-height) * 0.7) solid var(--art-mountain-shadow);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.art-mountain-range .art-peak:nth-child(2) {
|
|
75
|
+
left: 30%;
|
|
76
|
+
border-left: calc(var(--art-mountain-width) * 0.3) solid transparent;
|
|
77
|
+
border-right: calc(var(--art-mountain-width) * 0.3) solid transparent;
|
|
78
|
+
border-bottom: var(--art-mountain-height) solid var(--art-mountain-color);
|
|
79
|
+
z-index: 1;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.art-mountain-range .art-peak:nth-child(3) {
|
|
83
|
+
right: 5%;
|
|
84
|
+
border-left: calc(var(--art-mountain-width) * 0.22) solid transparent;
|
|
85
|
+
border-right: calc(var(--art-mountain-width) * 0.22) solid transparent;
|
|
86
|
+
border-bottom: calc(var(--art-mountain-height) * 0.6) solid oklch(40% 0.04 150);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Sunset color variant */
|
|
90
|
+
.art-mountain-sunset {
|
|
91
|
+
--art-mountain-color: oklch(30% 0.06 280);
|
|
92
|
+
--art-mountain-shadow: oklch(22% 0.05 280);
|
|
93
|
+
--art-mountain-snow: oklch(85% 0.08 50);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Forest color variant */
|
|
97
|
+
.art-mountain-forest {
|
|
98
|
+
--art-mountain-color: oklch(40% 0.08 145);
|
|
99
|
+
--art-mountain-shadow: oklch(30% 0.06 145);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Size variants */
|
|
103
|
+
.art-mountain-sm {
|
|
104
|
+
--art-mountain-width: 10rem;
|
|
105
|
+
--art-mountain-height: 6rem;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.art-mountain-lg {
|
|
109
|
+
--art-mountain-width: 24rem;
|
|
110
|
+
--art-mountain-height: 15rem;
|
|
111
|
+
}
|
|
112
|
+
}
|