your personal website on atproto - mirror
blento.app
Merge pull request #254 from jellydeck/card-tweak
feat: tweak card spacing, radius & add svelte inspector
+14
-19
+9
-17
src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
+9
-17
src/lib/cards/_base/BaseCard/BaseEditingCard.svelte
···
298
298
299
299
<div
300
300
class={[
301
-
'absolute -bottom-7 w-full items-center justify-center text-xs lg:group-focus-within:inline-flex lg:group-hover/card:inline-flex',
301
+
'absolute -bottom-13 w-full items-center justify-center 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
>
···
434
434
{#if cardDef.canResize !== false}
435
435
<!-- Resize handle at bottom right corner -->
436
436
<div
437
+
role="separator"
437
438
onpointerdown={handleResizeStart}
438
-
class="bg-base-300/70 dark:bg-base-900/70 pointer-events-auto absolute right-0.5 bottom-0.5 hidden cursor-se-resize rounded-md rounded-br-3xl p-1 lg:group-hover/card:block"
439
+
class="bg-base-300/70 dark:bg-base-900/70 pointer-events-auto absolute right-2 bottom-2 hidden cursor-se-resize rounded-md rounded-br-2xl p-1.5 lg:group-hover/card:block"
439
440
>
440
441
<svg
441
442
xmlns="http://www.w3.org/2000/svg"
···
447
448
stroke-linejoin="round"
448
449
class=" dark:text-base-400 text-base-600 size-4"
449
450
>
450
-
<circle cx="12" cy="5" r="1" /><circle cx="19" cy="5" r="1" /><circle
451
-
cx="5"
452
-
cy="5"
453
-
r="1"
454
-
/>
455
-
<circle cx="12" cy="12" r="1" /><circle cx="19" cy="12" r="1" /><circle
456
-
cx="5"
457
-
cy="12"
458
-
r="1"
459
-
/>
460
-
<circle cx="12" cy="19" r="1" /><circle cx="19" cy="19" r="1" /><circle
461
-
cx="5"
462
-
cy="19"
463
-
r="1"
464
-
/>
451
+
<circle cx="9" cy="12" r="1" />
452
+
<circle cx="9" cy="5" r="1" />
453
+
<circle cx="9" cy="19" r="1" />
454
+
<circle cx="15" cy="12" r="1" />
455
+
<circle cx="15" cy="5" r="1" />
456
+
<circle cx="15" cy="19" r="1" />
465
457
</svg>
466
458
<span class="sr-only">Resize card</span>
467
459
</div>
+1
-1
src/lib/cards/core/TextCard/EditingTextCard.svelte
+1
-1
src/lib/cards/core/TextCard/EditingTextCard.svelte
···
15
15
<!-- svelte-ignore a11y_click_events_have_key_events -->
16
16
<div
17
17
class={cn(
18
-
'prose dark:prose-invert prose-neutral prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 accent:prose-a:text-accent-950 accent:prose-a:underline accent:prose-p:text-base-900 hover:bg-base-700/5 accent:hover:bg-accent-300/20 prose-p:first:mt-0 prose-p:last:mb-0 inline-flex h-full w-full max-w-none cursor-text overflow-y-scroll rounded-md px-6 py-4 text-lg transition-colors duration-150',
18
+
'prose dark:prose-invert prose-neutral prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 accent:prose-a:text-accent-950 accent:prose-a:underline accent:prose-p:text-base-900 hover:bg-base-700/5 accent:hover:bg-accent-300/20 prose-p:first:mt-0 prose-p:last:mb-0 inline-flex h-full w-full max-w-none cursor-text overflow-y-scroll rounded-xl px-6 py-5 text-lg transition-colors duration-150',
19
19
textAlignClasses[item.cardData.textAlign as string],
20
20
verticalAlignClasses[item.cardData.verticalAlign as string],
21
21
textSizeClasses[(item.cardData.textSize ?? 0) as number]
+1
-1
src/lib/cards/core/TextCard/TextCard.svelte
+1
-1
src/lib/cards/core/TextCard/TextCard.svelte
···
14
14
15
15
<div
16
16
class={cn(
17
-
'prose dark:prose-invert prose-neutral prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 accent:prose-a:text-accent-950 accent:prose-a:underline accent:prose-p:text-base-900 prose-p:first:mt-0 prose-p:last:mb-0 prose-headings:first:mt-0 prose-headings:last:mb-0 inline-flex h-full min-h-full w-full max-w-none overflow-x-hidden overflow-y-scroll rounded-md px-6 py-4 text-lg',
17
+
'prose dark:prose-invert prose-neutral prose-sm prose-a:no-underline prose-a:text-accent-600 dark:prose-a:text-accent-400 accent:prose-a:text-accent-950 accent:prose-a:underline accent:prose-p:text-base-900 prose-p:first:mt-0 prose-p:last:mb-0 prose-headings:first:mt-0 prose-headings:last:mb-0 inline-flex h-full min-h-full w-full max-w-none overflow-x-hidden overflow-y-scroll rounded-xl px-6 py-5 text-lg',
18
18
textAlignClasses?.[item.cardData.textAlign as string],
19
19
verticalAlignClasses[item.cardData.verticalAlign as string],
20
20
textSizeClasses[(item.cardData.textSize ?? 0) as number]