admin/windwiderstand
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add class-variance-authority for card styling and enhance color palettes
Deploy / verify (push) Failing after 1m40s
Details
Deploy / deploy (push) Has been skipped
Details

Browse Source 
- Introduced `class-variance-authority` to manage card component styles, allowing for flexible variant and layout options.
- Added a new color palette for "Fire" to the CSS for improved theming.
- Updated `Card` and `PostCard` components to utilize the new styling system, enhancing visual consistency and responsiveness.
- Refined layout and styling in various components for better user experience.
This commit is contained in:
Peter Meier
2026-04-20 22:09:43 +02:00
parent a18c0a8cf7
commit d327798ce6
9 changed files with 191 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/blocks/DeadlineBannerBlock.svelte
+23 -18
View File
@@ -84,7 +84,7 @@
? "bg-amber-100 text-amber-900"
: variant === "info"
? "bg-sky-100 text-sky-900"
: "bg-wald-100 text-wald-900",
: "bg-wald-500 text-wald-50",
);
const iconName = $derived(
variant === "urgent" ? "mdi:alert-circle" : "mdi:calendar-clock",
@@ -99,30 +99,35 @@
data-block-slug={block._slug}
>
{#snippet inner()}
<div class="container-custom flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-1 px-4 py-1.5 text-xs sm:text-sm">
<div class="container-custom flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-1 px-4 py-2 text-xs sm:text-sm">
{#if dateStr}
<span class="inline-flex items-center gap-1.5 rounded-md bg-white/70 px-2 py-0.5 text-sm sm:text-base font-bold whitespace-nowrap shrink-0">
<Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
{dateStr}
<span class="inline-flex items-center rounded-md bg-white/50 text-wald-900 px-2 py-0.5 text-sm sm:text-base font-bold whitespace-nowrap shrink-0">
<span class="inline-flex items-center gap-1.5">
<Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
{dateStr}
</span>
{#if countdownStr}
<span class="ml-1 rounded-full bg-black/80 text-white px-1.5 py-0 text-[0.6rem] font-bold uppercase tracking-wide">
<span
class="ml-0 inline-flex min-w-0 max-w-0 scale-[0.96] items-center overflow-hidden whitespace-nowrap rounded-md border border-transparent py-0.5 text-[0.6rem] font-semibold uppercase tracking-wide opacity-0 transition-[max-width,margin,opacity,transform,padding,border-color] duration-200 ease-out group-hover:ml-2 group-hover:max-w-48 group-hover:border-wald-900 group-hover:px-2 group-hover:opacity-100 group-hover:scale-100 group-focus-within:ml-2 group-focus-within:max-w-48 group-focus-within:border-wald-900 group-focus-within:px-2 group-focus-within:opacity-100 group-focus-within:scale-100"
>
{countdownStr}
</span>
{/if}
</span>
{:else}
<Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
{#if countdownStr}
<span class="rounded-full bg-white/60 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide whitespace-nowrap shrink-0">
{countdownStr}
</span>
{/if}
<span class="inline-flex items-center gap-0 shrink-0">
<Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
{#if countdownStr}
<span
class="ml-0 inline-flex min-w-0 max-w-0 shrink-0 scale-[0.96] items-center overflow-hidden whitespace-nowrap rounded-full px-0 py-0.5 text-xs font-semibold uppercase tracking-wide opacity-0 transition-[max-width,margin,opacity,transform,padding] duration-200 ease-out group-hover:ml-2 group-hover:max-w-48 group-hover:px-2 group-hover:opacity-100 group-hover:scale-100 group-focus-within:ml-2 group-focus-within:max-w-48 group-focus-within:px-2 group-focus-within:opacity-100 group-focus-within:scale-100"
>
{countdownStr}
</span>
{/if}
</span>
{/if}
{#if text}
<span class="min-w-0 wrap-break-word line-clamp-2 sm:line-clamp-1">{text}</span>
{/if}
{#if href}
<Icon icon="mdi:arrow-right" class="size-4 shrink-0 ml-auto" aria-hidden="true" />
<span class="min-w-0 wrap-break-word line-clamp-2 sm:line-clamp-1 font-semibold text-shadow-sm">{text}</span>
{/if}
</div>
{/snippet}
@@ -131,12 +136,12 @@
href={href}
target={newTab ? "_blank" : undefined}
rel={newTab ? "noopener noreferrer" : undefined}
class="block no-underline text-inherit hover:no-underline transition-all hover:brightness-95 {variantClasses}"
class="group block no-underline text-inherit hover:no-underline transition-all hover:brightness-95 {variantClasses}"
>
{@render inner()}
</a>
{:else}
<div class="{variantClasses}">
<div class="group {variantClasses}">
{@render inner()}
</div>
{/if}