your personal website on atproto - mirror
blento.app
Merge pull request #255 from jellydeck/ux-low-res
feat: design tweaks
+157
-134
+2
-2
src/lib/cards/_base/BaseCard/BaseCard.svelte
+2
-2
src/lib/cards/_base/BaseCard/BaseCard.svelte
···
64
64
--dw: ${item.w};
65
65
--dh: ${item.h};
66
66
--dm: ${margin}px;
67
-
67
+
68
68
--columns: ${COLUMNS}`}
69
69
{...rest}
70
70
>
71
71
<div
72
72
class={[
73
73
'text-base-900 dark:text-base-50 relative isolate h-full w-full overflow-hidden',
74
-
!fillPage ? 'rounded-[23px]' : '',
74
+
!fillPage ? 'rounded-3xl' : '',
75
75
color !== 'base' && color != 'transparent' ? 'light' : ''
76
76
]}
77
77
>
+3
-3
src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
+3
-3
src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
···
210
210
{#if cardDef.canHaveLabel}
211
211
<div
212
212
class={cn(
213
-
'bg-base-200/50 dark:bg-base-900/50 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-xl p-1 px-2 backdrop-blur-md',
213
+
'bg-base-200/70 dark:bg-base-900/70 absolute top-2 left-2 z-100 w-fit max-w-[calc(100%-1rem)] rounded-md rounded-tl-2xl px-2.25 py-0.75 backdrop-blur-md',
214
214
!item.cardData.label && 'hidden lg:group-hover/card:block'
215
215
)}
216
216
>
···
298
298
299
299
<div
300
300
class={[
301
-
'absolute -bottom-13 w-full items-center justify-center text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
301
+
'translate absolute -bottom-13 w-full items-center justify-center pt-2.5 text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
302
302
colorPopoverOpen || settingsPopoverOpen ? 'inline-flex' : 'hidden'
303
303
]}
304
304
>
···
446
446
stroke-width="2"
447
447
stroke-linecap="round"
448
448
stroke-linejoin="round"
449
-
class=" dark:text-base-400 text-base-600 size-4"
449
+
class="dark:text-base-300 text-base-600 size-4"
450
450
>
451
451
<circle cx="9" cy="12" r="1" />
452
452
<circle cx="9" cy="5" r="1" />
+2
-2
src/lib/cards/core/ImageCard/ImageCardSettings.svelte
+2
-2
src/lib/cards/core/ImageCard/ImageCardSettings.svelte
+67
-58
src/lib/cards/core/SectionCard/SectionCardSettings.svelte
+67
-58
src/lib/cards/core/SectionCard/SectionCardSettings.svelte
···
22
22
}
23
23
}
24
24
>
25
-
<ToggleGroupItem size="sm" value="top" class={classes}
26
-
><svg
25
+
<ToggleGroupItem size="sm" value="top" class={classes}>
26
+
<svg
27
27
xmlns="http://www.w3.org/2000/svg"
28
28
viewBox="0 0 24 24"
29
29
fill="none"
30
30
stroke="currentColor"
31
-
stroke-width="2"
31
+
stroke-width="3"
32
32
stroke-linecap="round"
33
33
stroke-linejoin="round"
34
-
><rect width="6" height="16" x="4" y="6" rx="2" /><rect
35
-
width="6"
36
-
height="9"
37
-
x="14"
38
-
y="6"
39
-
rx="2"
40
-
/><path d="M22 2H2" /></svg
41
34
>
35
+
<rect width="6" height="16" x="4" y="6" rx="2" />
36
+
<rect width="6" height="9" x="14" y="6" rx="2" />
37
+
<path d="M22 2H2" />
38
+
</svg>
42
39
</ToggleGroupItem>
43
-
<ToggleGroupItem size="sm" value="center" class={classes}
44
-
><svg
40
+
<ToggleGroupItem size="sm" value="center" class={classes}>
41
+
<svg
45
42
xmlns="http://www.w3.org/2000/svg"
46
43
viewBox="0 0 24 24"
47
44
fill="none"
48
45
stroke="currentColor"
49
-
stroke-width="2"
46
+
stroke-width="3"
50
47
stroke-linecap="round"
51
48
stroke-linejoin="round"
52
-
><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
53
-
d="M22 4H2"
54
-
/></svg
55
-
></ToggleGroupItem
56
-
>
57
-
<ToggleGroupItem size="sm" value="bottom" class={classes}
58
-
><svg
49
+
>
50
+
<rect width="10" height="6" x="7" y="9" rx="2" />
51
+
<path d="M22 20H2" />
52
+
<path d="M22 4H2" />
53
+
</svg>
54
+
</ToggleGroupItem>
55
+
<ToggleGroupItem size="sm" value="bottom" class={classes}>
56
+
<svg
59
57
xmlns="http://www.w3.org/2000/svg"
60
58
viewBox="0 0 24 24"
61
59
fill="none"
62
60
stroke="currentColor"
63
-
stroke-width="2"
61
+
stroke-width="3"
64
62
stroke-linecap="round"
65
63
stroke-linejoin="round"
66
-
><rect width="14" height="6" x="5" y="12" rx="2" /><rect
67
-
width="10"
68
-
height="6"
69
-
x="7"
70
-
y="2"
71
-
rx="2"
72
-
/><path d="M2 22h20" /></svg
73
-
></ToggleGroupItem
74
-
>
64
+
>
65
+
<rect width="14" height="6" x="5" y="12" rx="2" />
66
+
<rect width="10" height="6" x="7" y="2" rx="2" />
67
+
<path d="M2 22h20" />
68
+
</svg>
69
+
</ToggleGroupItem>
75
70
</ToggleGroup>
76
71
77
72
<ToggleGroup
···
86
81
}
87
82
}
88
83
>
89
-
<ToggleGroupItem size="sm" value="left" class={classes}
90
-
><svg
84
+
<ToggleGroupItem size="sm" value="left" class={classes}>
85
+
<svg
91
86
xmlns="http://www.w3.org/2000/svg"
92
87
viewBox="0 0 24 24"
93
88
fill="none"
94
89
stroke="currentColor"
95
-
stroke-width="2"
90
+
stroke-width="3"
96
91
stroke-linecap="round"
97
-
stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
98
-
></ToggleGroupItem
99
-
>
100
-
<ToggleGroupItem size="sm" value="center" class={classes}
101
-
><svg
92
+
stroke-linejoin="round"
93
+
>
94
+
<path d="M21 5H3" />
95
+
<path d="M15 12H3" />
96
+
<path d="M17 19H3" />
97
+
</svg>
98
+
</ToggleGroupItem>
99
+
<ToggleGroupItem size="sm" value="center" class={classes}>
100
+
<svg
102
101
xmlns="http://www.w3.org/2000/svg"
103
102
viewBox="0 0 24 24"
104
103
fill="none"
105
104
stroke="currentColor"
106
-
stroke-width="2"
105
+
stroke-width="3"
107
106
stroke-linecap="round"
108
-
stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
109
-
></ToggleGroupItem
110
-
>
111
-
<ToggleGroupItem size="sm" value="right" class={classes}
112
-
><svg
107
+
stroke-linejoin="round"
108
+
>
109
+
<path d="M21 5H3" />
110
+
<path d="M17 12H7" />
111
+
<path d="M19 19H5" />
112
+
</svg>
113
+
</ToggleGroupItem>
114
+
<ToggleGroupItem size="sm" value="right" class={classes}>
115
+
<svg
113
116
xmlns="http://www.w3.org/2000/svg"
114
117
viewBox="0 0 24 24"
115
118
fill="none"
116
119
stroke="currentColor"
117
-
stroke-width="2"
120
+
stroke-width="3"
118
121
stroke-linecap="round"
119
-
stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
120
-
></ToggleGroupItem
121
-
>
122
+
stroke-linejoin="round"
123
+
>
124
+
<path d="M21 5H3" />
125
+
<path d="M21 12H9" />
126
+
<path d="M21 19H7" />
127
+
</svg>
128
+
</ToggleGroupItem>
122
129
</ToggleGroup>
123
130
124
131
<div>
···
136
143
viewBox="0 0 24 24"
137
144
fill="none"
138
145
stroke="currentColor"
139
-
stroke-width="2"
146
+
stroke-width="3"
140
147
stroke-linecap="round"
141
148
stroke-linejoin="round"
142
-
class="lucide lucide-aarrow-down-icon lucide-a-arrow-down"
143
-
><path d="m14 12 4 4 4-4" /><path d="M18 16V7" /><path
144
-
d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
145
-
/><path d="M3.304 13h6.392" /></svg
146
149
>
150
+
<path d="m14 12 4 4 4-4" />
151
+
<path d="M18 16V7" />
152
+
<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
153
+
<path d="M3.304 13h6.392" />
154
+
</svg>
147
155
</Button>
148
156
<Button
149
157
variant="ghost"
···
162
170
viewBox="0 0 24 24"
163
171
fill="none"
164
172
stroke="currentColor"
165
-
stroke-width="2"
173
+
stroke-width="3"
166
174
stroke-linecap="round"
167
175
stroke-linejoin="round"
168
-
class="lucide lucide-aarrow-up-icon lucide-a-arrow-up"
169
-
><path d="m14 11 4-4 4 4" /><path d="M18 16V7" /><path
170
-
d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
171
-
/><path d="M3.304 13h6.392" /></svg
172
176
>
177
+
<path d="m14 11 4-4 4 4" />
178
+
<path d="M18 16V7" />
179
+
<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
180
+
<path d="M3.304 13h6.392" />
181
+
</svg>
173
182
</Button>
174
183
</div>
175
184
</div>
+70
-58
src/lib/cards/core/TextCard/TextCardSettings.svelte
+70
-58
src/lib/cards/core/TextCard/TextCardSettings.svelte
···
21
21
}
22
22
}
23
23
>
24
-
<ToggleGroupItem size="sm" value="top" class={classes}
25
-
><svg
24
+
<ToggleGroupItem size="sm" value="top" class={classes}>
25
+
<svg
26
26
xmlns="http://www.w3.org/2000/svg"
27
27
viewBox="0 0 24 24"
28
28
fill="none"
29
29
stroke="currentColor"
30
-
stroke-width="2"
30
+
stroke-width="3"
31
31
stroke-linecap="round"
32
32
stroke-linejoin="round"
33
-
><rect width="6" height="16" x="4" y="6" rx="2" /><rect
34
-
width="6"
35
-
height="9"
36
-
x="14"
37
-
y="6"
38
-
rx="2"
39
-
/><path d="M22 2H2" /></svg
33
+
class="size-4"
40
34
>
35
+
<rect width="6" height="16" x="4" y="6" rx="2" />
36
+
<rect width="6" height="9" x="14" y="6" rx="2" />
37
+
<path d="M22 2H2" />
38
+
</svg>
41
39
</ToggleGroupItem>
42
-
<ToggleGroupItem size="sm" value="center" class={classes}
43
-
><svg
40
+
<ToggleGroupItem size="sm" value="center" class={classes}>
41
+
<svg
44
42
xmlns="http://www.w3.org/2000/svg"
45
43
viewBox="0 0 24 24"
46
44
fill="none"
47
45
stroke="currentColor"
48
-
stroke-width="2"
46
+
stroke-width="3"
49
47
stroke-linecap="round"
50
48
stroke-linejoin="round"
51
-
><rect width="10" height="6" x="7" y="9" rx="2" /><path d="M22 20H2" /><path
52
-
d="M22 4H2"
53
-
/></svg
54
-
></ToggleGroupItem
55
-
>
56
-
<ToggleGroupItem size="sm" value="bottom" class={classes}
57
-
><svg
49
+
class="size-4"
50
+
>
51
+
<rect width="10" height="6" x="7" y="9" rx="2" />
52
+
<path d="M22 20H2" />
53
+
<path d="M22 4H2" />
54
+
</svg>
55
+
</ToggleGroupItem>
56
+
<ToggleGroupItem size="sm" value="bottom" class={classes}>
57
+
<svg
58
58
xmlns="http://www.w3.org/2000/svg"
59
59
viewBox="0 0 24 24"
60
60
fill="none"
61
61
stroke="currentColor"
62
-
stroke-width="2"
62
+
stroke-width="3"
63
63
stroke-linecap="round"
64
64
stroke-linejoin="round"
65
-
><rect width="14" height="6" x="5" y="12" rx="2" /><rect
66
-
width="10"
67
-
height="6"
68
-
x="7"
69
-
y="2"
70
-
rx="2"
71
-
/><path d="M2 22h20" /></svg
72
-
></ToggleGroupItem
73
-
>
65
+
>
66
+
<rect width="14" height="6" x="5" y="12" rx="2" />
67
+
<rect width="10" height="6" x="7" y="2" rx="2" />
68
+
<path d="M2 22h20" />
69
+
</svg>
70
+
</ToggleGroupItem>
74
71
</ToggleGroup>
75
72
76
73
<ToggleGroup
···
85
82
}
86
83
}
87
84
>
88
-
<ToggleGroupItem size="sm" value="left" class={classes}
89
-
><svg
85
+
<ToggleGroupItem size="sm" value="left" class={classes}>
86
+
<svg
90
87
xmlns="http://www.w3.org/2000/svg"
91
88
viewBox="0 0 24 24"
92
89
fill="none"
93
90
stroke="currentColor"
94
-
stroke-width="2"
91
+
stroke-width="3"
95
92
stroke-linecap="round"
96
-
stroke-linejoin="round"><path d="M21 5H3" /><path d="M15 12H3" /><path d="M17 19H3" /></svg
97
-
></ToggleGroupItem
98
-
>
99
-
<ToggleGroupItem size="sm" value="center" class={classes}
100
-
><svg
93
+
stroke-linejoin="round"
94
+
>
95
+
<path d="M21 5H3" />
96
+
<path d="M15 12H3" />
97
+
<path d="M17 19H3" />
98
+
</svg>
99
+
</ToggleGroupItem>
100
+
<ToggleGroupItem size="sm" value="center" class={classes}>
101
+
<svg
101
102
xmlns="http://www.w3.org/2000/svg"
102
103
viewBox="0 0 24 24"
103
104
fill="none"
104
105
stroke="currentColor"
105
-
stroke-width="2"
106
+
stroke-width="3"
106
107
stroke-linecap="round"
107
-
stroke-linejoin="round"><path d="M21 5H3" /><path d="M17 12H7" /><path d="M19 19H5" /></svg
108
-
></ToggleGroupItem
109
-
>
110
-
<ToggleGroupItem size="sm" value="right" class={classes}
111
-
><svg
108
+
stroke-linejoin="round"
109
+
class="size-4"
110
+
>
111
+
<path d="M21 5H3" />
112
+
<path d="M17 12H7" />
113
+
<path d="M19 19H5" />
114
+
</svg>
115
+
</ToggleGroupItem>
116
+
<ToggleGroupItem size="sm" value="right" class={classes}>
117
+
<svg
112
118
xmlns="http://www.w3.org/2000/svg"
113
119
viewBox="0 0 24 24"
114
120
fill="none"
115
121
stroke="currentColor"
116
-
stroke-width="2"
122
+
stroke-width="3"
117
123
stroke-linecap="round"
118
-
stroke-linejoin="round"><path d="M21 5H3" /><path d="M21 12H9" /><path d="M21 19H7" /></svg
119
-
></ToggleGroupItem
120
-
>
124
+
stroke-linejoin="round"
125
+
>
126
+
<path d="M21 5H3" />
127
+
<path d="M21 12H9" />
128
+
<path d="M21 19H7" />
129
+
</svg>
130
+
</ToggleGroupItem>
121
131
</ToggleGroup>
122
132
123
133
<div>
···
135
145
viewBox="0 0 24 24"
136
146
fill="none"
137
147
stroke="currentColor"
138
-
stroke-width="2"
148
+
stroke-width="3"
139
149
stroke-linecap="round"
140
150
stroke-linejoin="round"
141
-
class="lucide lucide-aarrow-down-icon lucide-a-arrow-down"
142
-
><path d="m14 12 4 4 4-4" /><path d="M18 16V7" /><path
143
-
d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
144
-
/><path d="M3.304 13h6.392" /></svg
145
151
>
152
+
<path d="m14 12 4 4 4-4" />
153
+
<path d="M18 16V7" />
154
+
<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
155
+
<path d="M3.304 13h6.392" />
156
+
</svg>
146
157
</Button>
147
158
<Button
148
159
variant="ghost"
···
158
169
viewBox="0 0 24 24"
159
170
fill="none"
160
171
stroke="currentColor"
161
-
stroke-width="2"
172
+
stroke-width="3"
162
173
stroke-linecap="round"
163
174
stroke-linejoin="round"
164
-
class="lucide lucide-aarrow-up-icon lucide-a-arrow-up"
165
-
><path d="m14 11 4-4 4 4" /><path d="M18 16V7" /><path
166
-
d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16"
167
-
/><path d="M3.304 13h6.392" /></svg
168
175
>
176
+
<path d="m14 11 4-4 4 4" />
177
+
<path d="M18 16V7" />
178
+
<path d="m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16" />
179
+
<path d="M3.304 13h6.392" />
180
+
</svg>
169
181
</Button>
170
182
</div>
171
183
</div>
+8
-9
src/lib/website/EditBar.svelte
+8
-9
src/lib/website/EditBar.svelte
···
352
352
>
353
353
<svg
354
354
xmlns="http://www.w3.org/2000/svg"
355
-
fill="none"
356
355
viewBox="0 0 24 24"
357
-
stroke-width="1.5"
356
+
fill="none"
358
357
stroke="currentColor"
359
-
class="size-6"
358
+
stroke-width="2"
359
+
stroke-linecap="round"
360
+
stroke-linejoin="round"
361
+
class="size-7"
360
362
>
361
-
<path
362
-
stroke-linecap="round"
363
-
stroke-linejoin="round"
364
-
d="M10.5 1.5H8.25A2.25 2.25 0 0 0 6 3.75v16.5a2.25 2.25 0 0 0 2.25 2.25h7.5A2.25 2.25 0 0 0 18 20.25V3.75a2.25 2.25 0 0 0-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"
365
-
/>
363
+
<rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
364
+
<path d="M12 18h.01" />
366
365
</svg>
367
366
</Toggle>
368
367
{#if hasUnsavedChanges}
···
378
377
xmlns="http://www.w3.org/2000/svg"
379
378
fill="none"
380
379
viewBox="0 0 24 24"
381
-
stroke-width="1.5"
380
+
stroke-width="2"
382
381
stroke="currentColor"
383
382
class="size-5"
384
383
>