goose.art
extremely claude-assisted go game based on atproto! working on cleaning up and giving a more unique design, still has a bit of a slop vibe to it.
small update
+257
-13
+241
-4
src/app.css
+241
-4
src/app.css
···
5
5
}
6
6
7
7
:root {
8
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
9
-
line-height: 1.5;
10
-
color: #1a202c;
8
+
/* Sunset Sky Palette - extracted from aerial cloudscape */
9
+
--sky-apricot: #F2C5A0;
10
+
--sky-apricot-light: #F8DCC5;
11
+
--sky-apricot-dark: #E5A878;
12
+
--sky-rose: #D4A8B5;
13
+
--sky-rose-light: #E5C5CE;
14
+
--sky-rose-dark: #8B5A6B;
15
+
--sky-mauve: #C5A0B0;
16
+
--sky-blue-light: #B8D4E3;
17
+
--sky-blue-pale: #D4E5EF;
18
+
--sky-slate: #5A7A90;
19
+
--sky-slate-light: #7A98AD;
20
+
--sky-slate-dark: #455D6E;
21
+
--sky-gray: #94A8B8;
22
+
--sky-gray-light: #B5C5D0;
23
+
--sky-cloud: #E8EFF4;
24
+
--sky-white: #F5F8FA;
25
+
26
+
/* Semantic aliases */
27
+
--color-bg: var(--sky-cloud);
28
+
--color-bg-card: var(--sky-white);
29
+
--color-text: var(--sky-slate-dark);
30
+
--color-text-muted: var(--sky-gray);
31
+
--color-text-light: var(--sky-gray-light);
32
+
--color-primary: var(--sky-apricot-dark);
33
+
--color-primary-hover: var(--sky-apricot);
34
+
--color-primary-light: var(--sky-apricot-light);
35
+
--color-secondary: var(--sky-rose);
36
+
--color-secondary-hover: var(--sky-rose-light);
37
+
--color-accent: var(--sky-slate);
38
+
--color-accent-hover: var(--sky-slate-light);
39
+
--color-border: var(--sky-blue-pale);
40
+
--color-link: var(--sky-slate);
41
+
--color-link-hover: var(--sky-apricot-dark);
42
+
43
+
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
44
+
line-height: 1.6;
45
+
color: var(--color-text);
11
46
}
12
47
13
48
body {
14
-
background: #f7fafc;
49
+
background: linear-gradient(180deg, var(--sky-blue-pale) 0%, var(--sky-cloud) 30%, var(--sky-white) 100%);
15
50
min-height: 100vh;
51
+
overflow-x: hidden;
52
+
}
53
+
54
+
/* Animated clouds background */
55
+
.clouds-container {
56
+
position: fixed;
57
+
top: 0;
58
+
left: 0;
59
+
width: 100%;
60
+
height: 100%;
61
+
pointer-events: none;
62
+
z-index: 0;
63
+
overflow: hidden;
64
+
}
65
+
66
+
.cloud {
67
+
position: absolute;
68
+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(232, 239, 244, 0.7) 100%);
69
+
border-radius: 50%;
70
+
filter: blur(1px);
71
+
opacity: 0.6;
72
+
}
73
+
74
+
.cloud::before,
75
+
.cloud::after {
76
+
content: '';
77
+
position: absolute;
78
+
background: inherit;
79
+
border-radius: 50%;
80
+
}
81
+
82
+
/* Cloud shapes - varied sizes from small to large */
83
+
.cloud-1 {
84
+
width: 120px;
85
+
height: 35px;
86
+
top: 8%;
87
+
animation: drift-1 60s linear infinite;
88
+
opacity: 0.5;
89
+
}
90
+
.cloud-1::before {
91
+
width: 55px;
92
+
height: 45px;
93
+
top: -25px;
94
+
left: 15px;
95
+
}
96
+
.cloud-1::after {
97
+
width: 65px;
98
+
height: 40px;
99
+
top: -20px;
100
+
right: 10px;
101
+
}
102
+
103
+
.cloud-2 {
104
+
width: 320px;
105
+
height: 90px;
106
+
top: 20%;
107
+
animation: drift-2 130s linear infinite;
108
+
animation-delay: -20s;
109
+
opacity: 0.55;
110
+
}
111
+
.cloud-2::before {
112
+
width: 160px;
113
+
height: 120px;
114
+
top: -70px;
115
+
left: 40px;
116
+
}
117
+
.cloud-2::after {
118
+
width: 140px;
119
+
height: 85px;
120
+
top: -40px;
121
+
right: 40px;
122
+
}
123
+
124
+
.cloud-3 {
125
+
width: 90px;
126
+
height: 28px;
127
+
top: 38%;
128
+
animation: drift-3 50s linear infinite;
129
+
animation-delay: -15s;
130
+
opacity: 0.4;
131
+
}
132
+
.cloud-3::before {
133
+
width: 45px;
134
+
height: 38px;
135
+
top: -22px;
136
+
left: 12px;
137
+
}
138
+
.cloud-3::after {
139
+
width: 50px;
140
+
height: 32px;
141
+
top: -16px;
142
+
right: 8px;
143
+
}
144
+
145
+
.cloud-4 {
146
+
width: 400px;
147
+
height: 110px;
148
+
top: 55%;
149
+
animation: drift-1 150s linear infinite;
150
+
animation-delay: -70s;
151
+
opacity: 0.4;
152
+
}
153
+
.cloud-4::before {
154
+
width: 200px;
155
+
height: 140px;
156
+
top: -80px;
157
+
left: 60px;
158
+
}
159
+
.cloud-4::after {
160
+
width: 170px;
161
+
height: 100px;
162
+
top: -50px;
163
+
right: 50px;
164
+
}
165
+
166
+
.cloud-5 {
167
+
width: 180px;
168
+
height: 50px;
169
+
top: 75%;
170
+
animation: drift-2 85s linear infinite;
171
+
animation-delay: -40s;
172
+
opacity: 0.35;
173
+
}
174
+
.cloud-5::before {
175
+
width: 85px;
176
+
height: 65px;
177
+
top: -38px;
178
+
left: 25px;
179
+
}
180
+
.cloud-5::after {
181
+
width: 95px;
182
+
height: 55px;
183
+
top: -28px;
184
+
right: 15px;
185
+
}
186
+
187
+
/* Drift animations - clouds move at different speeds and paths */
188
+
@keyframes drift-1 {
189
+
0% {
190
+
left: -300px;
191
+
}
192
+
100% {
193
+
left: 100vw;
194
+
}
195
+
}
196
+
197
+
@keyframes drift-2 {
198
+
0% {
199
+
left: 100vw;
200
+
}
201
+
100% {
202
+
left: -350px;
203
+
}
204
+
}
205
+
206
+
@keyframes drift-3 {
207
+
0% {
208
+
left: -250px;
209
+
}
210
+
100% {
211
+
left: 100vw;
212
+
}
213
+
}
214
+
215
+
/* Ensure main content is above clouds */
216
+
.page-content {
217
+
position: relative;
218
+
z-index: 1;
219
+
}
220
+
221
+
/* Cloud-like card styling */
222
+
.cloud-card {
223
+
background: linear-gradient(
224
+
135deg,
225
+
rgba(255, 255, 255, 0.95) 0%,
226
+
rgba(245, 248, 250, 0.9) 50%,
227
+
rgba(232, 239, 244, 0.85) 100%
228
+
);
229
+
border: none;
230
+
border-radius: 2rem 2.5rem 2rem 2.2rem;
231
+
box-shadow:
232
+
0 0 20px rgba(255, 255, 255, 0.8),
233
+
0 0 40px rgba(255, 255, 255, 0.4),
234
+
0 8px 32px rgba(90, 122, 144, 0.12),
235
+
inset 0 1px 1px rgba(255, 255, 255, 0.9);
236
+
backdrop-filter: blur(8px);
237
+
position: relative;
238
+
}
239
+
240
+
.cloud-card::before {
241
+
content: '';
242
+
position: absolute;
243
+
inset: -2px;
244
+
border-radius: inherit;
245
+
background: linear-gradient(
246
+
135deg,
247
+
rgba(255, 255, 255, 0.6) 0%,
248
+
rgba(212, 229, 239, 0.3) 50%,
249
+
rgba(255, 255, 255, 0.4) 100%
250
+
);
251
+
filter: blur(4px);
252
+
z-index: -1;
16
253
}
17
254
18
255
a {
+15
-9
src/app.html
+15
-9
src/app.html
···
1
1
<!doctype html>
2
2
<html lang="en">
3
-
<head>
4
-
<meta charset="utf-8" />
5
-
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7
-
%sveltekit.head%
8
-
</head>
9
-
<body data-sveltekit-preload-data="hover">
10
-
<div style="display: contents">%sveltekit.body%</div>
11
-
</body>
3
+
<head>
4
+
<meta charset="utf-8" />
5
+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+
<link
10
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
11
+
rel="stylesheet"
12
+
/>
13
+
%sveltekit.head%
14
+
</head>
15
+
<body data-sveltekit-preload-data="hover">
16
+
<div style="display: contents">%sveltekit.body%</div>
17
+
</body>
12
18
</html>