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

35
src/routes/Page.svelte
View File

@@ -42,8 +42,8 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
</script>
<!-- Font List -->
<div class="p-2 h-full flex flex-col gap-3">
<Section class="my-12 gap-8" onTitleStatusChange={handleTitleStatusChanged}>
<div class="p-2 sm:p-3 md:p-4 h-full flex flex-col gap-3 sm:gap-4">
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" onTitleStatusChange={handleTitleStatusChanged}>
{#snippet icon({ className })}
<CodeIcon class={className} />
{/snippet}
@@ -52,24 +52,25 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
Project_Codename
</span>
{/snippet}
<h2 class={cn('font-[Barlow] font-thin text-7xl md:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]')}>
<h2 class={cn('font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl text-justify [text-align-last:justify] [text-justify:inter-character]')}>
GLYPHDIFF
</h2>
</Section>
<!--
<Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
{#snippet icon({ className })}
<EyeIcon class={className} />
{/snippet}
{#snippet title({ className })}
<h1 class={className}>
Optical<br />Comparator
</h1>
{/snippet}
<ComparisonSlider />
</Section>
-->
<Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>
{#snippet icon({ className })}
<EyeIcon class={className} />
{/snippet}
{#snippet title({ className })}
<h1 class={className}>
Optical<br />Comparator
</h1>
{/snippet}
<ComparisonSlider />
</Section>
<Section class="my-12 gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={2} onTitleStatusChange={handleTitleStatusChanged}>
{#snippet icon({ className })}
<ScanSearchIcon class={className} />
{/snippet}
@@ -81,7 +82,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
<FontSearch bind:showFilters={isExpanded} />
</Section>
<Section class="my-12 gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
<Section class="my-4 sm:my-10 md:my-12 gap-6 sm:gap-8" index={3} onTitleStatusChange={handleTitleStatusChanged}>
{#snippet icon({ className })}
<LineSquiggleIcon class={className} />
{/snippet}