wip library to store cold objects in s3, warm objects on disk, and hot objects in memory
nekomimi.pet
nodejs
typescript
1/* Tiered Storage Demo Site - Stylesheet */
2
3:root {
4 --primary-color: #3b82f6;
5 --secondary-color: #8b5cf6;
6 --success-color: #10b981;
7 --background: #0f172a;
8 --surface: #1e293b;
9 --text: #f1f5f9;
10 --text-muted: #94a3b8;
11 --border: #334155;
12}
13
14* {
15 margin: 0;
16 padding: 0;
17 box-sizing: border-box;
18}
19
20body {
21 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
22 background: var(--background);
23 color: var(--text);
24 line-height: 1.6;
25 min-height: 100vh;
26 display: flex;
27 flex-direction: column;
28}
29
30/* Header & Navigation */
31header {
32 background: var(--surface);
33 border-bottom: 1px solid var(--border);
34 position: sticky;
35 top: 0;
36 z-index: 100;
37}
38
39nav {
40 max-width: 1200px;
41 margin: 0 auto;
42 padding: 1rem 2rem;
43 display: flex;
44 justify-content: space-between;
45 align-items: center;
46}
47
48.logo {
49 font-size: 1.5rem;
50 font-weight: 700;
51 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
52 -webkit-background-clip: text;
53 -webkit-text-fill-color: transparent;
54 background-clip: text;
55}
56
57nav ul {
58 display: flex;
59 gap: 2rem;
60 list-style: none;
61}
62
63nav a {
64 color: var(--text-muted);
65 text-decoration: none;
66 transition: color 0.2s;
67 padding: 0.5rem 1rem;
68 border-radius: 0.5rem;
69}
70
71nav a:hover,
72nav a.active {
73 color: var(--text);
74 background: rgba(59, 130, 246, 0.1);
75}
76
77/* Main Content */
78main {
79 flex: 1;
80 max-width: 1200px;
81 margin: 0 auto;
82 padding: 2rem;
83 width: 100%;
84}
85
86/* Hero Section */
87.hero {
88 text-align: center;
89 padding: 4rem 2rem;
90 background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
91 border-radius: 1rem;
92 margin-bottom: 3rem;
93}
94
95.hero h1 {
96 font-size: 3rem;
97 margin-bottom: 1rem;
98 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
99 -webkit-background-clip: text;
100 -webkit-text-fill-color: transparent;
101 background-clip: text;
102}
103
104.hero p {
105 font-size: 1.25rem;
106 color: var(--text-muted);
107 max-width: 600px;
108 margin: 0 auto 2rem;
109}
110
111.cta-buttons {
112 display: flex;
113 gap: 1rem;
114 justify-content: center;
115}
116
117.btn {
118 padding: 0.75rem 2rem;
119 border-radius: 0.5rem;
120 text-decoration: none;
121 font-weight: 600;
122 transition: all 0.2s;
123 display: inline-block;
124}
125
126.btn-primary {
127 background: var(--primary-color);
128 color: white;
129}
130
131.btn-primary:hover {
132 background: #2563eb;
133 transform: translateY(-2px);
134 box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
135}
136
137.btn-secondary {
138 background: var(--surface);
139 color: var(--text);
140 border: 1px solid var(--border);
141}
142
143.btn-secondary:hover {
144 background: var(--border);
145}
146
147/* Features */
148.features {
149 margin-bottom: 3rem;
150}
151
152.features h2 {
153 text-align: center;
154 font-size: 2rem;
155 margin-bottom: 2rem;
156}
157
158.feature-grid {
159 display: grid;
160 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
161 gap: 2rem;
162}
163
164.feature-card {
165 background: var(--surface);
166 padding: 2rem;
167 border-radius: 1rem;
168 border: 1px solid var(--border);
169 transition: transform 0.2s, box-shadow 0.2s;
170}
171
172.feature-card:hover {
173 transform: translateY(-4px);
174 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
175}
176
177.feature-icon {
178 font-size: 3rem;
179 margin-bottom: 1rem;
180}
181
182.feature-card h3 {
183 color: var(--primary-color);
184 margin-bottom: 0.5rem;
185}
186
187.feature-card p {
188 color: var(--text-muted);
189}
190
191/* Architecture Diagram */
192.architecture {
193 margin-bottom: 3rem;
194}
195
196.architecture h2 {
197 text-align: center;
198 font-size: 2rem;
199 margin-bottom: 2rem;
200}
201
202.tier-diagram {
203 max-width: 600px;
204 margin: 0 auto;
205}
206
207.tier {
208 background: var(--surface);
209 border: 2px solid var(--border);
210 border-radius: 0.5rem;
211 padding: 1.5rem;
212 margin-bottom: 1rem;
213}
214
215.tier.hot {
216 border-color: #ef4444;
217 background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), var(--surface));
218}
219
220.tier.warm {
221 border-color: #f59e0b;
222 background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), var(--surface));
223}
224
225.tier.cold {
226 border-color: var(--primary-color);
227 background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), var(--surface));
228}
229
230.tier-label {
231 font-weight: 700;
232 margin-bottom: 0.5rem;
233 font-size: 1.1rem;
234}
235
236.tier-content {
237 color: var(--text-muted);
238 font-size: 0.9rem;
239}
240
241.arrow {
242 text-align: center;
243 font-size: 2rem;
244 color: var(--text-muted);
245 margin: -0.5rem 0;
246}
247
248.diagram-note {
249 text-align: center;
250 color: var(--text-muted);
251 font-style: italic;
252 margin-top: 1rem;
253}
254
255/* Stats */
256.stats {
257 margin-bottom: 3rem;
258}
259
260.stats h2 {
261 text-align: center;
262 font-size: 2rem;
263 margin-bottom: 2rem;
264}
265
266.stats-grid {
267 display: grid;
268 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
269 gap: 1.5rem;
270}
271
272.stat-card {
273 background: var(--surface);
274 padding: 2rem;
275 border-radius: 1rem;
276 border: 1px solid var(--border);
277 text-align: center;
278}
279
280.stat-value {
281 font-size: 2.5rem;
282 font-weight: 700;
283 color: var(--primary-color);
284 margin-bottom: 0.5rem;
285}
286
287.stat-label {
288 color: var(--text-muted);
289 font-size: 0.9rem;
290}
291
292/* Content Pages */
293.content {
294 max-width: 800px;
295 margin: 0 auto;
296}
297
298.content h1 {
299 font-size: 2.5rem;
300 margin-bottom: 1.5rem;
301 color: var(--primary-color);
302}
303
304.content h2 {
305 font-size: 1.8rem;
306 margin-top: 2rem;
307 margin-bottom: 1rem;
308}
309
310.content h3 {
311 font-size: 1.3rem;
312 margin-top: 1.5rem;
313 margin-bottom: 0.5rem;
314}
315
316.content h4 {
317 font-size: 1.1rem;
318 margin-top: 1rem;
319 margin-bottom: 0.5rem;
320 color: var(--primary-color);
321}
322
323.content p {
324 margin-bottom: 1rem;
325 color: var(--text-muted);
326}
327
328.content ul, .content ol {
329 margin-bottom: 1rem;
330 margin-left: 2rem;
331 color: var(--text-muted);
332}
333
334.content li {
335 margin-bottom: 0.5rem;
336}
337
338.content code {
339 background: var(--surface);
340 padding: 0.2rem 0.5rem;
341 border-radius: 0.25rem;
342 font-family: 'Monaco', 'Courier New', monospace;
343 font-size: 0.9em;
344 color: var(--success-color);
345}
346
347.content pre {
348 background: var(--surface);
349 padding: 1.5rem;
350 border-radius: 0.5rem;
351 overflow-x: auto;
352 margin-bottom: 1rem;
353 border: 1px solid var(--border);
354}
355
356.content pre code {
357 background: none;
358 padding: 0;
359 color: var(--text);
360}
361
362.solution-grid {
363 display: grid;
364 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
365 gap: 1.5rem;
366 margin: 2rem 0;
367}
368
369.solution-item {
370 background: var(--surface);
371 padding: 1.5rem;
372 border-radius: 0.5rem;
373 border: 1px solid var(--border);
374}
375
376.solution-item h3 {
377 margin-top: 0;
378}
379
380.use-cases {
381 display: flex;
382 flex-direction: column;
383 gap: 1.5rem;
384 margin-top: 2rem;
385}
386
387.use-case {
388 background: var(--surface);
389 padding: 1.5rem;
390 border-radius: 0.5rem;
391 border-left: 4px solid var(--primary-color);
392}
393
394.use-case h4 {
395 margin-top: 0;
396}
397
398/* Footer */
399footer {
400 background: var(--surface);
401 border-top: 1px solid var(--border);
402 padding: 2rem;
403 text-align: center;
404 color: var(--text-muted);
405 margin-top: auto;
406}
407
408footer p {
409 margin: 0.5rem 0;
410}
411
412/* Responsive */
413@media (max-width: 768px) {
414 .hero h1 {
415 font-size: 2rem;
416 }
417
418 .hero p {
419 font-size: 1rem;
420 }
421
422 nav ul {
423 gap: 1rem;
424 }
425
426 .feature-grid,
427 .stats-grid {
428 grid-template-columns: 1fr;
429 }
430
431 .solution-grid {
432 grid-template-columns: 1fr;
433 }
434
435 .cta-buttons {
436 flex-direction: column;
437 align-items: stretch;
438 }
439}