flo-bit.dev / blento
your personal website on atproto - mirror blento.app
fork atom

commit

Florian 567bff95 5048ccea

+15 -7
unified split
+9 -1
src/lib/cards/social/BigSocialCard/BigSocialCard.svelte
··· 7 8 const platform = $derived(item.cardData.platform as string); 9 const platformData = $derived(platformsData[platform]); 10 </script> 11 12 <div 13 class="flex h-full w-full items-center justify-center p-10" 14 - style={`background-color: #${item.cardData.color}`} 15 > 16 <div 17 class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"
··· 7 8 const platform = $derived(item.cardData.platform as string); 9 const platformData = $derived(platformsData[platform]); 10 + 11 + // Color logic: 12 + // - base/transparent/undefined: background = brand color, icon = white 13 + // - other: background = that color (from BaseCard), icon = white 14 + const useBrandBackground = $derived( 15 + !item.color || item.color === 'base' || item.color === 'transparent' 16 + ); 17 + const brandColor = $derived(`#${item.cardData.color}`); 18 </script> 19 20 <div 21 class="flex h-full w-full items-center justify-center p-10" 22 + style={useBrandBackground ? `background-color: ${brandColor}` : ''} 23 > 24 <div 25 class="flex aspect-square max-h-full max-w-full items-center justify-center [&_svg]:size-full [&_svg]:max-w-60 [&_svg]:fill-white"
+2 -2
src/lib/cards/social/BigSocialCard/index.ts
··· 36 return item; 37 }, 38 name: 'Social Icon', 39 - allowSetColor: false, 40 - defaultColor: 'transparent', 41 minW: 2, 42 minH: 2, 43 onUrlHandler: (url, item) => {
··· 36 return item; 37 }, 38 name: 'Social Icon', 39 + allowSetColor: true, 40 + defaultColor: 'base', 41 minW: 2, 42 minH: 2, 43 onUrlHandler: (url, item) => {
+4 -4
src/lib/cards/visual/FluidTextCard/FluidTextCard.svelte
··· 127 const isDark = document.documentElement.classList.contains('dark'); 128 129 // Draw shadow behind fluid (light mode only, transparent only) 130 - if (shadowCanvas && item.color === 'transparent' && !isDark) { 131 shadowCanvas.width = width * dpr; 132 shadowCanvas.height = height * dpr; 133 const shadowCtx = shadowCanvas.getContext('2d')!; ··· 153 } 154 155 // Draw darkened text shape behind fluid 156 - shadowCtx.fillStyle = getHexCSSVar('--color-base-200'); 157 shadowCtx.fillText(text, width / 2, textY); 158 } else if (shadowCanvas) { 159 - // Clear shadow canvas in dark mode 160 shadowCanvas.width = 1; 161 shadowCanvas.height = 1; 162 } ··· 1774 ? 'bg-base-50 dark:bg-base-900' 1775 : 'bg-black'}" 1776 > 1777 - <canvas bind:this={shadowCanvas} class="absolute h-full w-full dark:hidden"></canvas> 1778 <canvas bind:this={fluidCanvas} class="absolute h-full w-full"></canvas> 1779 <canvas bind:this={maskCanvas} class="absolute h-full w-full"></canvas> 1780 </div>
··· 127 const isDark = document.documentElement.classList.contains('dark'); 128 129 // Draw shadow behind fluid (light mode only, transparent only) 130 + if (shadowCanvas && item.color === 'transparent') { 131 shadowCanvas.width = width * dpr; 132 shadowCanvas.height = height * dpr; 133 const shadowCtx = shadowCanvas.getContext('2d')!; ··· 153 } 154 155 // Draw darkened text shape behind fluid 156 + shadowCtx.fillStyle = getHexCSSVar(isDark ? '--color-base-950' : '--color-base-200'); 157 shadowCtx.fillText(text, width / 2, textY); 158 } else if (shadowCanvas) { 159 + // Clear shadow canvas when not transparent 160 shadowCanvas.width = 1; 161 shadowCanvas.height = 1; 162 } ··· 1774 ? 'bg-base-50 dark:bg-base-900' 1775 : 'bg-black'}" 1776 > 1777 + <canvas bind:this={shadowCanvas} class="absolute h-full w-full"></canvas> 1778 <canvas bind:this={fluidCanvas} class="absolute h-full w-full"></canvas> 1779 <canvas bind:this={maskCanvas} class="absolute h-full w-full"></canvas> 1780 </div>