your personal website on atproto - mirror
blento.app
code review
+5
-125
4 changed files
src
lib
cards
social
KichCookingLogCard
KichRecipeCard
KichRecipeCollectionCard
+1
-1
src/lib/cards/social/KichCookingLogCard/KichCookingLogCard.svelte
+1
-1
src/lib/cards/social/KichCookingLogCard/KichCookingLogCard.svelte
-119
src/lib/cards/social/KichRecipeCard/KichMascot.svelte
-119
src/lib/cards/social/KichRecipeCard/KichMascot.svelte
···
1
1
-
<script lang="ts">
2
2
-
/**
3
3
-
* Fills use `var(--color-accent-*)` from `app.css` (@theme inline).
4
4
-
* Rough mapping: pan/lid main 500↔800, pan inner 400↔900, hat 800, face 500↔700,
5
5
-
* whisk handle 300, whisk wires 400↔700.
6
6
-
*/
7
7
-
let {
8
8
-
class: className = '',
9
9
-
size = 200
10
10
-
}: {
11
11
-
class?: string;
12
12
-
size?: number | string;
13
13
-
} = $props();
14
14
-
</script>
15
15
-
16
16
-
<svg
17
17
-
version="1.1"
18
18
-
xmlns="http://www.w3.org/2000/svg"
19
19
-
xmlns:xlink="http://www.w3.org/1999/xlink"
20
20
-
height={size}
21
21
-
width={size}
22
22
-
viewBox="0 0 2000 2000"
23
23
-
class={className}
24
24
-
aria-hidden="true"
25
25
-
>
26
26
-
<defs>
27
27
-
<path
28
28
-
id="SVGID_1_"
29
29
-
d="M1787.7,919.57c-50.73-11.06-57.3,98.11-61.92,119.4c-15.58,71.93-93.74,137.57-126.55,137.57
30
30
-
c-3.44,0-19.91-202.39-34.17-243.95c-5.11-14.91-805.52,100.63-917.74,124.88c-4.49,0.97-7.87,4.62-7.87,9.21l0.04,45.67
31
31
-
c0,0-227.54-143.74-491.22-125.86c-71.83,4.87-78.94,32.62-78.94,69.74c0,72.82,80.53,73.79,85,73.79
32
32
-
c3.3,0.06,194.65,3.02,252.1,10.44c5.38,0.69-12.19,80.56,95.49,174.89c100.67,88.18,180.47,70.41,180.47,70.41
33
33
-
s3.76,196.51,73.77,256.56c0.08,0.07,0.15,0.14,0.22,0.21c42.48,48.98,110.86,70.85,154.37,70.85
34
34
-
c46.05,0,554.58-72.38,574.77-78.81c51.79-16.5,102.53-59.5,130.78-118.21c31-64.43-4.1-259.98-4.1-259.98
35
35
-
s119.54-33.26,174.57-159.6C1806.48,1051.52,1852.7,933.74,1787.7,919.57z M667.68,1306c-15.44,4.03-73.42-9.77-101.49-32.87
36
36
-
c-73-60.07-71.77-116.46-71.77-116.46s120.54,15.61,161.76,77.71C666.51,1249.93,672.93,1304.63,667.68,1306z"
37
37
-
></path>
38
38
-
<clipPath id="SVGID_2_">
39
39
-
<use xlink:href="#SVGID_1_" style="overflow: visible"></use>
40
40
-
</clipPath>
41
41
-
</defs>
42
42
-
<g id="Pan">
43
43
-
<g id="Layer_7">
44
44
-
<g>
45
45
-
<path
46
46
-
clip-path="url(#SVGID_2_)"
47
47
-
fill="light-dark(var(--color-accent-500), var(--color-accent-700))"
48
48
-
d="M-33.22,908.19c-29.56,13.8,1915.64-65.87,1915.64-65.87s-6.28,846.46-8.25,876.02l-1771.46,98.34
49
49
-
C102.72,1816.67-18.15,901.15-33.22,908.19z"
50
50
-
></path>
51
51
-
<path
52
52
-
clip-path="url(#SVGID_2_)"
53
53
-
fill="light-dark(var(--color-accent-400), var(--color-accent-600))"
54
54
-
d="M745.58,955.31c0,0,55.68,484.78,79.25,552.86c12.29,35.49,88.96,134.37,199.43,127.73
55
55
-
c130.71-7.86,487.54-73.71,494.31-76.36c74.55-29.29,101.33-101.47,110.49-149.34c4.81-25.15,412.2-594.72,412.2-594.72
56
56
-
s-472.68,182.49-472.68,78.04L745.58,955.31z"
57
57
-
></path>
58
58
-
</g>
59
59
-
</g>
60
60
-
</g>
61
61
-
<g id="Hat">
62
62
-
<path
63
63
-
fill="light-dark(var(--color-accent-500), var(--color-accent-600))"
64
64
-
d="M824.37,762.02c-24.77-56.65-38.77-131.39-38.77-131.39S630.07,677.6,644.38,506.95
65
65
-
c7.57-90.3,127.4-88.63,127.4-88.63s13.39-107.72,95.01-128.43c105.53-26.77,164.82,44.9,164.82,44.9s99.81-82.45,167.79,6.53
66
66
-
c82.58,108.08-50.38,178.25-50.38,178.25l38.3,144.24l-34.74,13.24c0,0-38.31-123.27-156.72-97.16
67
67
-
c-36.01,7.94-92.1,47.15-79.84,147.62L824.37,762.02z"
68
68
-
></path>
69
69
-
</g>
70
70
-
<g id="Lid">
71
71
-
<path
72
72
-
fill="light-dark(var(--color-accent-500), var(--color-accent-700))"
73
73
-
d="M629.5,1013.47c0,0-3.17-78.23,159.4-177.48c89.55-54.67,192.07-80.36,192.07-80.36
74
74
-
s-73.44-100.53,33.56-127.37c102.47-25.71,88,96.6,88,96.6s178.21-15.1,228.64-7.61c2.89,0.43,5.74,0.9,8.55,1.32
75
75
-
c188.11,27.93,200.21,90.26,200.21,90.26s-310.02,70.36-427.13,97.46C1001.07,932.12,629.5,1013.47,629.5,1013.47z"
76
76
-
></path>
77
77
-
</g>
78
78
-
<g id="Face">
79
79
-
<path
80
80
-
fill="light-dark(var(--color-accent-700), var(--color-accent-800))"
81
81
-
d="M1054.91,1348.62c-2.74-7.7,24.57-28.5,29.8-21.03c28.26,40.36,94.1,54.33,127.73,48.39
82
82
-
c31.53-5.57,78.25-27.8,99.46-77.43c3.51-8.21,29.93,4.46,30.71,13.35c4.46,50.9-78.44,97.71-125.49,104.8
83
83
-
C1156.41,1425.85,1070.29,1391.85,1054.91,1348.62z"
84
84
-
></path>
85
85
-
<path
86
86
-
fill="light-dark(var(--color-accent-700), var(--color-accent-800))"
87
87
-
d="M963.36,1257.03c-5.61,5.61-28.87,5.91-33.4-8.57c-7.36-23.52,13.14-68.73,58.34-77.48
88
88
-
c45.57-8.82,89.24,24.61,90.89,50.84c0.5,7.93-7.87,22.88-24.1,20.71c-17.71-2.36-21.71-45.44-60.03-30.86
89
89
-
C964.05,1223.49,973.43,1246.96,963.36,1257.03z"
90
90
-
></path>
91
91
-
<path
92
92
-
fill="light-dark(var(--color-accent-700), var(--color-accent-800))"
93
93
-
d="M1432.96,1175.75c-3.34,23.86-21.56,22.48-30.03,18.54c-13.35-6.2-16.76-37.29-47.37-35.87
94
94
-
c-36.94,1.72-28.93,37.69-40.16,45.71c-7.14,5.1-25.09,4.56-33.9-7.78c-9.94-13.91,24.59-77.1,60.14-79.49
95
95
-
C1409.04,1112.32,1434.37,1165.67,1432.96,1175.75z"
96
96
-
></path>
97
97
-
</g>
98
98
-
<g id="Whisk">
99
99
-
<path
100
100
-
fill="light-dark(var(--color-accent-500), var(--color-accent-800))"
101
101
-
d="M1734.3,935.14c13.79-8.82,46.53-19.44,63.72-18.42c0.46,0.03,15.94,7.3,17.44,11.46
102
102
-
c7.91,21.98,68.71,284.74,69.2,289.26c1.67,15.33,2.32,48.82-38.35,53.79c-44.73,5.47-52.79-24.14-54.26-30.39
103
103
-
c-1.36-5.82-60.52-242.2-67.21-288.27C1724.13,947.66,1732.81,936.1,1734.3,935.14z"
104
104
-
></path>
105
105
-
<g>
106
106
-
<g>
107
107
-
<path
108
108
-
fill="light-dark(var(--color-accent-400), var(--color-accent-600))"
109
109
-
d="M1822.76,556.21c-22.53-95.48-122.57-128.57-172.27-114.36c-56.73,16.21-128.14,73.55-101.96,189.73
110
110
-
c23.23,103.05,161.51,245.48,187.37,302.46c3.05,6.72,59.25-10.59,60.32-18.82C1807.03,832.15,1846.87,658.38,1822.76,556.21z
111
111
-
M1575.7,619.43c-18.58-69.18,33.78-117.74,33.78-117.74s5.1,64.78,12.2,103.77c7.92,43.49,73.28,213.63,73.28,213.63
112
112
-
S1590.64,675.05,1575.7,619.43z M1652.42,593.37c-6.27-28.57-21.41-110.86,7.24-116.78c29.27-6.04,46.85,77.63,54.04,106.64
113
113
-
c23.68,95.55,27.02,244.65,27.02,244.65S1668.83,668.14,1652.42,593.37z M1775.88,805.11c0,0-9.58-154.64-27.44-224.28
114
114
-
c-7.1-27.71-39.85-104.54-39.85-104.54s68.22,8.67,86.65,85.72C1814,640.35,1775.88,805.11,1775.88,805.11z"
115
115
-
></path>
116
116
-
</g>
117
117
-
</g>
118
118
-
</g>
119
119
-
</svg>
+1
-1
src/lib/cards/social/KichRecipeCard/KichRecipeCard.svelte
+1
-1
src/lib/cards/social/KichRecipeCard/KichRecipeCard.svelte
···
121
121
<img
122
122
src={imageUrl}
123
123
alt={title}
124
124
-
class="recipe-image rounded-top-xl aspect-16/9 w-full object-cover"
124
124
+
class="recipe-image rounded-t-xl aspect-16/9 w-full object-cover"
125
125
/>
126
126
<div class="image-overlay pointer-events-none absolute inset-0"></div>
127
127
<div class="compact-overlay pointer-events-none absolute right-0 bottom-0 left-0 p-4">
+3
-4
src/lib/cards/social/KichRecipeCollectionCard/KichRecipeCollectionCard.svelte
+3
-4
src/lib/cards/social/KichRecipeCollectionCard/KichRecipeCollectionCard.svelte
···
5
5
import { CardDefinitionsByType } from '../..';
6
6
import { getAdditionalUserData } from '$lib/website/context';
7
7
import type { ContentComponentProps } from '../../types';
8
8
-
import KichMascot from '../KichRecipeCard/KichMascot.svelte';
9
8
import type { KichRecipeCollectionCardData } from '.';
10
9
11
10
let { item }: ContentComponentProps = $props();
···
85
84
class="relative block min-h-0 flex-1"
86
85
>
87
86
{#if imageUrl}
88
88
-
<img src={imageUrl} alt={title} class="rounded-top-xl h-full w-full object-cover" />
87
87
+
<img src={imageUrl} alt={title} class="rounded-t-xl h-full w-full object-cover" />
89
88
{:else}
90
89
<div
91
91
-
class="rounded-top-xl from-base-300 to-base-200 dark:from-base-800 dark:to-base-900 h-full w-full bg-gradient-to-br"
90
90
+
class="rounded-t-xl from-base-300 to-base-200 dark:from-base-800 dark:to-base-900 h-full w-full bg-gradient-to-br"
92
91
></div>
93
92
{/if}
94
93
···
103
102
</div>
104
103
{/if}
105
104
106
106
-
<h3 class="line-clamp-2 text-xl font-semibold text-white">{title}</h3>
105
105
+
<h3 class="kich-wordmark line-clamp-2 text-xl font-semibold text-white">{title}</h3>
107
106
{#if description}
108
107
<p class="mt-1 line-clamp-2 text-sm text-white/90">{description}</p>
109
108
{/if}