@jjlmoya/utils-cooking 1.19.0 → 1.21.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.
Files changed (26) hide show
  1. package/package.json +5 -3
  2. package/scripts/postinstall.mjs +27 -0
  3. package/src/tool/american-kitchen-converter/component.astro +0 -498
  4. package/src/tool/american-kitchen-converter/us-cooking-conversion-calculator-cups-to-grams-fahrenheit.css +496 -0
  5. package/src/tool/banana-ripeness/banana-ripeness.css +587 -0
  6. package/src/tool/banana-ripeness/component.astro +0 -589
  7. package/src/tool/brine/component.astro +0 -536
  8. package/src/tool/brine/equilibrium-brining-calculator-meat-fermentation-ratios.css +534 -0
  9. package/src/tool/cookware-guide/component.astro +0 -24
  10. package/src/tool/cookware-guide/cookware-selector.css +22 -0
  11. package/src/tool/egg-timer/component.astro +1 -505
  12. package/src/tool/egg-timer/perfect-boiled-egg-timer-altitude-calculator.css +503 -0
  13. package/src/tool/ingredient-rescaler/component.astro +0 -22
  14. package/src/tool/ingredient-rescaler/recipe-ingredient-scaler-converter-servings.css +20 -0
  15. package/src/tool/kitchen-timer/component.astro +0 -340
  16. package/src/tool/kitchen-timer/kitchen-timer.css +338 -0
  17. package/src/tool/meringue-peak/component.astro +0 -300
  18. package/src/tool/meringue-peak/meringue-sugar-ratio-calculator-stiff-peaks.css +298 -0
  19. package/src/tool/mold-scaler/cake-pan-size-converter-calculator.css +364 -0
  20. package/src/tool/mold-scaler/component.astro +0 -366
  21. package/src/tool/pizza/component.astro +0 -570
  22. package/src/tool/pizza/neapolitan-pizza-dough-calculator-authentic-recipe.css +569 -0
  23. package/src/tool/roux-guide/component.astro +0 -23
  24. package/src/tool/roux-guide/roux-ratio-calculator-thickening-sauce-guide.css +21 -0
  25. package/src/tool/sourdough-calculator/component.astro +0 -371
  26. package/src/tool/sourdough-calculator/sourdough-starter-feeding-calculator-ratio-proportions.css +369 -0
@@ -0,0 +1,496 @@
1
+ :root {
2
+ --akc-primary: #ea580c;
3
+ --akc-secondary: #f97316;
4
+ --akc-text: #0f172a;
5
+ --akc-text-muted: #475569;
6
+ --akc-bg: #fff;
7
+ --akc-bg-secondary: #f8fafc;
8
+ --akc-bg-tertiary: #f1f5f9;
9
+ --akc-border: #e2e8f0;
10
+ }
11
+
12
+ .theme-dark {
13
+ --akc-primary: #fb923c;
14
+ --akc-secondary: #fb923c;
15
+ --akc-text: #fff;
16
+ --akc-text-muted: #a0aec0;
17
+ --akc-bg: #0f172a;
18
+ --akc-bg-secondary: #1c1f2e;
19
+ --akc-bg-tertiary: #151720;
20
+ --akc-border: #2d3748;
21
+ }
22
+
23
+ .akc-wrapper {
24
+ max-width: 800px;
25
+ margin: 0 auto;
26
+ }
27
+
28
+ .akc-main-card {
29
+ background: var(--akc-bg);
30
+ backdrop-filter: blur(20px);
31
+ -webkit-backdrop-filter: blur(20px);
32
+ border: 1px solid var(--akc-border);
33
+ border-radius: 2rem;
34
+ padding: 2.5rem;
35
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
36
+ color: var(--akc-text);
37
+ }
38
+
39
+ .theme-dark .akc-main-card {
40
+ background: rgba(15, 23, 42, 0.4);
41
+ border-color: rgba(255, 255, 255, 0.05);
42
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
43
+ }
44
+
45
+ .akc-tabs {
46
+ display: flex;
47
+ gap: 1rem;
48
+ background: rgba(0, 0, 0, 0.04);
49
+ padding: 0.5rem;
50
+ border-radius: 1.5rem;
51
+ margin-bottom: 2.5rem;
52
+ }
53
+
54
+ .theme-dark .akc-tabs {
55
+ background: rgba(0, 0, 0, 0.2);
56
+ }
57
+
58
+ .akc-tab-btn {
59
+ flex: 1;
60
+ border: none;
61
+ background: transparent;
62
+ padding: 1rem;
63
+ border-radius: 1.2rem;
64
+ font-size: 1rem;
65
+ font-weight: 600;
66
+ color: inherit;
67
+ opacity: 0.6;
68
+ cursor: pointer;
69
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ gap: 0.5rem;
74
+ }
75
+
76
+ .akc-tab-btn:hover {
77
+ opacity: 1;
78
+ background: rgba(255, 255, 255, 0.05);
79
+ }
80
+
81
+ .akc-tab-btn.active {
82
+ opacity: 1;
83
+ background: var(--akc-primary);
84
+ color: var(--akc-text);
85
+ box-shadow: 0 8px 20px rgba(234, 88, 12, 0.3);
86
+ transform: translateY(-2px);
87
+ }
88
+
89
+ .akc-tab-content {
90
+ display: none;
91
+ animation: slide-up 0.4s ease-out forwards;
92
+ }
93
+
94
+ .akc-tab-content.active {
95
+ display: block;
96
+ }
97
+
98
+ @keyframes slide-up {
99
+ from {
100
+ opacity: 0;
101
+ transform: translateY(15px);
102
+ }
103
+
104
+ to {
105
+ opacity: 1;
106
+ transform: translateY(0);
107
+ }
108
+ }
109
+
110
+ .akc-step-title {
111
+ font-size: 1.25rem;
112
+ font-weight: 700;
113
+ margin-bottom: 1.5rem;
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 0.75rem;
117
+ color: var(--akc-text);
118
+ }
119
+
120
+ .akc-step-number {
121
+ background: var(--akc-primary);
122
+ color: var(--akc-text);
123
+ width: 2rem;
124
+ height: 2rem;
125
+ display: flex;
126
+ align-items: center;
127
+ justify-content: center;
128
+ border-radius: 50%;
129
+ font-size: 1rem;
130
+ }
131
+
132
+ .akc-grid {
133
+ display: grid;
134
+ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
135
+ gap: 1rem;
136
+ margin-bottom: 2.5rem;
137
+ }
138
+
139
+ .akc-item-card {
140
+ background: var(--akc-bg-secondary);
141
+ border: 1px solid var(--akc-border);
142
+ border-radius: 1.5rem;
143
+ padding: 1.5rem 1rem;
144
+ text-align: center;
145
+ cursor: pointer;
146
+ transition: all 0.3s ease;
147
+ display: flex;
148
+ flex-direction: column;
149
+ align-items: center;
150
+ gap: 1rem;
151
+ color: inherit;
152
+ }
153
+
154
+ .theme-dark .akc-item-card {
155
+ background: rgba(0, 0, 0, 0.2);
156
+ border-color: rgba(255, 255, 255, 0.05);
157
+ }
158
+
159
+ .akc-item-card:hover {
160
+ border-color: rgba(234, 88, 12, 0.5);
161
+ }
162
+
163
+ .akc-item-card.active {
164
+ background: rgba(234, 88, 12, 0.1);
165
+ border-color: var(--akc-primary);
166
+ box-shadow: 0 10px 25px rgba(234, 88, 12, 0.15);
167
+ transform: translateY(-4px);
168
+ }
169
+
170
+ .akc-item-icon {
171
+ width: 56px;
172
+ height: 56px;
173
+ border-radius: 50%;
174
+ background: rgba(0, 0, 0, 0.05);
175
+ display: flex;
176
+ align-items: center;
177
+ justify-content: center;
178
+ color: var(--akc-primary);
179
+ font-size: 1.5rem;
180
+ transition: all 0.3s ease;
181
+ }
182
+
183
+ .theme-dark .akc-item-icon {
184
+ background: rgba(255, 255, 255, 0.05);
185
+ }
186
+
187
+ .akc-item-card.active .akc-item-icon {
188
+ background: var(--akc-primary);
189
+ color: var(--akc-text);
190
+ transform: scale(1.1);
191
+ }
192
+
193
+ .akc-item-name {
194
+ font-weight: 600;
195
+ font-size: 0.95rem;
196
+ line-height: 1.2;
197
+ }
198
+
199
+ .akc-item-sub {
200
+ font-size: 0.75rem;
201
+ opacity: 0.6;
202
+ margin-top: 0.25rem;
203
+ }
204
+
205
+ .akc-amount-control {
206
+ display: flex;
207
+ flex-direction: column;
208
+ gap: 1.5rem;
209
+ margin-bottom: 3rem;
210
+ align-items: center;
211
+ }
212
+
213
+ .akc-stepper {
214
+ display: flex;
215
+ align-items: center;
216
+ background: rgba(0, 0, 0, 0.03);
217
+ border-radius: 2rem;
218
+ padding: 0.5rem;
219
+ border: 1px solid rgba(0, 0, 0, 0.05);
220
+ }
221
+
222
+ .theme-dark .akc-stepper {
223
+ background: rgba(0, 0, 0, 0.3);
224
+ border-color: rgba(255, 255, 255, 0.05);
225
+ }
226
+
227
+ .akc-step-btn {
228
+ width: 3.5rem;
229
+ height: 3.5rem;
230
+ border-radius: 50%;
231
+ border: none;
232
+ background: white;
233
+ color: var(--akc-primary);
234
+ font-size: 1.5rem;
235
+ cursor: pointer;
236
+ display: flex;
237
+ align-items: center;
238
+ justify-content: center;
239
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
240
+ transition: all 0.2s ease;
241
+ }
242
+
243
+ .theme-dark .akc-step-btn {
244
+ background: rgba(255, 255, 255, 0.1);
245
+ color: var(--akc-text);
246
+ }
247
+
248
+ .akc-step-btn:hover {
249
+ transform: scale(1.05);
250
+ background: var(--akc-primary);
251
+ color: var(--akc-text);
252
+ }
253
+
254
+ .akc-step-input {
255
+ width: 120px;
256
+ text-align: center;
257
+ font-size: 2.5rem;
258
+ font-weight: 800;
259
+ background: transparent;
260
+ border: none;
261
+ color: inherit;
262
+ outline: none;
263
+ }
264
+
265
+ .akc-quick-amounts {
266
+ display: flex;
267
+ gap: 0.75rem;
268
+ flex-wrap: wrap;
269
+ justify-content: center;
270
+ }
271
+
272
+ .akc-quick-btn {
273
+ padding: 0.5rem 1rem;
274
+ border-radius: 1rem;
275
+ border: 1px solid var(--akc-border);
276
+ background: transparent;
277
+ color: inherit;
278
+ font-weight: 600;
279
+ cursor: pointer;
280
+ transition: all 0.2s ease;
281
+ }
282
+
283
+ .theme-dark .akc-quick-btn {
284
+ border-color: rgba(255, 255, 255, 0.1);
285
+ }
286
+
287
+ .akc-quick-btn:hover {
288
+ background: rgba(234, 88, 12, 0.1);
289
+ color: var(--akc-primary);
290
+ border-color: var(--akc-primary);
291
+ }
292
+
293
+ .akc-result-display {
294
+ background: linear-gradient(135deg, rgba(234, 88, 12, 0.1), rgba(249, 115, 22, 0.05));
295
+ border: 2px solid rgba(234, 88, 12, 0.2);
296
+ border-radius: 2rem;
297
+ padding: 3rem 2rem;
298
+ text-align: center;
299
+ position: relative;
300
+ overflow: hidden;
301
+ }
302
+
303
+ .theme-dark .akc-result-display {
304
+ background: linear-gradient(135deg, rgba(234, 88, 12, 0.15), rgba(249, 115, 22, 0.05));
305
+ border-color: rgba(234, 88, 12, 0.3);
306
+ }
307
+
308
+ .akc-result-display::before {
309
+ content: '';
310
+ position: absolute;
311
+ top: 0;
312
+ left: 0;
313
+ right: 0;
314
+ bottom: 0;
315
+ background: radial-gradient(circle at top right, rgba(234, 88, 12, 0.1), transparent 70%);
316
+ pointer-events: none;
317
+ }
318
+
319
+ .akc-result-value {
320
+ font-size: 6rem;
321
+ font-weight: 900;
322
+ line-height: 1;
323
+ background: linear-gradient(to right, var(--akc-primary), var(--akc-secondary));
324
+ -webkit-background-clip: text;
325
+ background-clip: text;
326
+ -webkit-text-fill-color: transparent;
327
+ margin-bottom: 0.5rem;
328
+ }
329
+
330
+ .akc-result-unit {
331
+ font-size: 1.5rem;
332
+ font-weight: 700;
333
+ opacity: 0.8;
334
+ text-transform: uppercase;
335
+ letter-spacing: 0.2em;
336
+ color: var(--akc-text-muted);
337
+ }
338
+
339
+ .akc-toggle {
340
+ display: flex;
341
+ background: rgba(0, 0, 0, 0.05);
342
+ border-radius: 1.5rem;
343
+ padding: 0.5rem;
344
+ margin-bottom: 2.5rem;
345
+ }
346
+
347
+ .theme-dark .akc-toggle {
348
+ background: rgba(0, 0, 0, 0.3);
349
+ }
350
+
351
+ .akc-toggle-btn {
352
+ flex: 1;
353
+ padding: 1rem;
354
+ border: none;
355
+ background: transparent;
356
+ color: inherit;
357
+ font-weight: 600;
358
+ border-radius: 1rem;
359
+ cursor: pointer;
360
+ transition: all 0.3s ease;
361
+ opacity: 0.6;
362
+ }
363
+
364
+ .akc-toggle-btn.active {
365
+ background: var(--akc-primary);
366
+ color: var(--akc-text);
367
+ opacity: 1;
368
+ box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
369
+ }
370
+
371
+ .akc-temps-container {
372
+ display: flex;
373
+ align-items: center;
374
+ justify-content: space-between;
375
+ gap: 2rem;
376
+ margin-bottom: 3rem;
377
+ }
378
+
379
+ .akc-temp-box {
380
+ flex: 1;
381
+ background: var(--akc-bg-secondary);
382
+ border: 1px solid var(--akc-border);
383
+ border-radius: 2rem;
384
+ padding: 2rem;
385
+ text-align: center;
386
+ transition: all 0.3s ease;
387
+ }
388
+
389
+ .theme-dark .akc-temp-box {
390
+ background: rgba(0, 0, 0, 0.2);
391
+ border-color: rgba(255, 255, 255, 0.05);
392
+ }
393
+
394
+ .akc-temp-box:focus-within {
395
+ border-color: var(--akc-primary);
396
+ box-shadow: 0 10px 30px rgba(234, 88, 12, 0.1);
397
+ transform: translateY(-5px);
398
+ }
399
+
400
+ .akc-temp-label {
401
+ font-size: 1rem;
402
+ font-weight: 700;
403
+ opacity: 0.7;
404
+ margin-bottom: 1rem;
405
+ text-transform: uppercase;
406
+ letter-spacing: 0.1em;
407
+ }
408
+
409
+ .akc-temp-input {
410
+ width: 100%;
411
+ text-align: center;
412
+ font-size: 4rem;
413
+ font-weight: 900;
414
+ background: transparent;
415
+ border: none;
416
+ color: inherit;
417
+ outline: none;
418
+ }
419
+
420
+ .akc-temp-middle {
421
+ display: flex;
422
+ align-items: center;
423
+ justify-content: center;
424
+ color: var(--akc-primary);
425
+ background: rgba(234, 88, 12, 0.1);
426
+ width: 4rem;
427
+ height: 4rem;
428
+ border-radius: 50%;
429
+ flex-shrink: 0;
430
+ }
431
+
432
+ .akc-presets {
433
+ display: grid;
434
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
435
+ gap: 1rem;
436
+ }
437
+
438
+ .akc-preset-card {
439
+ background: var(--akc-bg-secondary);
440
+ border: 1px solid var(--akc-border);
441
+ border-radius: 1rem;
442
+ padding: 1rem;
443
+ text-align: center;
444
+ cursor: pointer;
445
+ transition: all 0.2s ease;
446
+ color: inherit;
447
+ }
448
+
449
+ .theme-dark .akc-preset-card {
450
+ background: rgba(0, 0, 0, 0.2);
451
+ border-color: rgba(255, 255, 255, 0.05);
452
+ }
453
+
454
+ .akc-preset-card:hover {
455
+ background: rgba(234, 88, 12, 0.05);
456
+ border-color: var(--akc-primary);
457
+ transform: translateY(-2px);
458
+ }
459
+
460
+ .akc-preset-temp {
461
+ font-weight: 800;
462
+ font-size: 1.25rem;
463
+ color: var(--akc-primary);
464
+ margin-bottom: 0.25rem;
465
+ }
466
+
467
+ .akc-preset-desc {
468
+ font-size: 0.8rem;
469
+ opacity: 0.7;
470
+ font-weight: 500;
471
+ }
472
+
473
+ @media (max-width: 768px) {
474
+ .akc-tabs {
475
+ flex-direction: column;
476
+ gap: 0.5rem;
477
+ }
478
+
479
+ .akc-temps-container {
480
+ flex-direction: column;
481
+ }
482
+
483
+ .akc-temp-middle {
484
+ height: 3rem;
485
+ width: 3rem;
486
+ transform: rotate(90deg);
487
+ }
488
+
489
+ .akc-result-value {
490
+ font-size: 4.5rem;
491
+ }
492
+
493
+ .akc-main-card {
494
+ padding: 1.5rem;
495
+ }
496
+ }