your personal website on atproto - mirror blento.app
25
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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
··· 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 >
+1 -1
src/lib/website/Pronouns.svelte
··· 69 69 {/if} 70 70 71 71 {#if editing} 72 - <Button size="sm" onclick={openModal}> 72 + <Button size="iconLg" onclick={openModal}> 73 73 <svg 74 74 xmlns="http://www.w3.org/2000/svg" 75 75 fill="none"