glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add tailwind responsive classes

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-06 14:48:44 +03:00
parent a26bcbecff
commit fedf3f88e7
14 changed files with 106 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/shared/ui/Section/Section.svelte
View File

@@ -90,23 +90,26 @@ $effect(() => {
in:fly={flyParams}
out:fly={flyParams}
>
<div class="flex flex-col gap-2" bind:this={titleContainer}>
<div class="flex items-center gap-3 opacity-60">
<div class="flex flex-col gap-2 sm:gap-3" bind:this={titleContainer}>
<div class="flex items-center gap-2 sm:gap-3 opacity-60">
{#if icon}
{@render icon({ className: 'size-4 stroke-gray-900 stroke-1' })}
<div class="w-px h-3 bg-gray-400/50"></div>
{@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1' })}
<div class="w-px h-2.5 sm:h-3 bg-gray-400/50"></div>
{/if}
{#if description}
{@render description({ className: 'font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600' })}
{@render description({ className: 'font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600' })}
{:else if typeof index === 'number'}
<span class="font-mono text-[10px] uppercase tracking-[0.2em] text-gray-600">
<span class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600">
Component_{String(index).padStart(3, '0')}
</span>
{/if}
</div>
{#if title}
{@render title({ className: 'text-5xl md:text-6xl font-semibold tracking-tighter text-gray-900 leading-[0.9]' })}
{@render title({
className:
'text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-semibold tracking-tighter text-gray-900 leading-[0.9]',
})}
{/if}
</div>