your personal website on atproto - mirror
blento.app
chore: UX changes for low res display
- add spacing for hover opened menus with padding
- increase stroke-width for svg icons
- replace mobile icon with (https://lucide.dev/icons/smartphone)
+80
-69
+1
-1
src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
+1
-1
src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
···
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-12 w-full items-center justify-center pt-1.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
>
+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
>