-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.stylus
122 lines (110 loc) · 3.17 KB
/
style.stylus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
*
box-sizing border-box
user-select none
-webkit-user-select none
body
background hsl(0, 0%, 90%)
min-height 100vh
overflow hidden
display flex
align-items center
justify-content center
opacity 0
@media(prefers-color-scheme dark)
background hsl(0, 0%, 10%)
.heart
position absolute
height calc(var(--size) * 1vmin)
width calc(var(--size) * 1vmin)
left 50%
top 50%
transform translate(-50%, -50%)
svg
height 100%
width 100%
path
fill 'hsl(%s, 100%, 60%)' % var(--hue)
.backdrop
--color-one hsl(235, 90%, 75%)
--color-two hsl(180, 90%, 75%)
--color-three hsl(90, 90%, 75%)
--color-four hsl(50, 90%, 75%)
--color-five hsl(10, 90%, 75%)
--cloud hsla(0, 0%, 100%, 0.95)
height 100vmax
width 100vmax
background radial-gradient(circle at center center, var(--cloud) 20%, transparent 20%), repeating-conic-gradient(var(--color-one) 0, var(--color-one) 10%, var(--color-two) 10%, var(--color-two) 20%, var(--color-three) 20%, var(--color-three) 30%, var(--color-four) 30%, var(--color-four) 40%, var(--color-five) 40%, var(--color-five) 50%)
position fixed
transform-origin center
border-radius 50%
svg
--size 50
height calc(var(--size) * 1vmin)
width calc(var(--size) * 1vmin)
z-index 2
span
z-index 2
.care-bear
--lightness 50
cursor pointer
&__ear
circle:nth-of-type(1)
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
circle:nth-of-type(2)
--lightness 90
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
&__arm
rect
--lightness 45
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
&__feet
--lightness 40
// $clip = circle(65% at 50% 130%)
// -webkit-clip-path $clip
// clip-path $clip
path
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
&__head
circle
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
&__belly
circle:nth-of-type(1)
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
circle:nth-of-type(2)
--lightness 90
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
&__heart
--saturation 20
--hue 0
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
&__muzzle
--lightness 90
circle
fill 'hsl(%s, %s, %s)' % (var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%))
/**
* Rain
*/
.rain
svg
animation-delay calc(var(--d) * -1s)
animation-duration calc(var(--a) * 1s)
animation-iteration-count infinite
animation-name drop
animation-timing-function linear
height 3vmin
left calc(var(--x) * 1%)
position absolute
top calc((var(--y) + 50) * -1px)
width 3vmin
z-index -1
path
fill #a1c6cc
stroke none
opacity var(--o)
transform scaleY(calc(var(--s) * 1.5))
@keyframes drop
90%
opacity 1
100%
opacity 0
transform translateY(75vmin)