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

feature/responsive #22

Merged
ilia merged 49 commits from feature/responsive into main 2026-02-09 06:49:25 +00:00
Conversation 0 Commits 49 Files Changed 70 +38 -32
4 changed files with 38 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0d572708c0 - Show all commits

31
src/features/DisplayFont/ui/FontSampler/FontSampler.svelte
View File

@@ -11,6 +11,7 @@ import {
import { controlManager } from '$features/SetupFont';
import {
ContentEditable,
Footnote,
// IconButton,
} from '$shared/ui';
// import XIcon from '@lucide/svelte/icons/x';
@@ -66,13 +67,13 @@ function removeSample() {
>
<div class="px-4 sm:px-5 md:px-6 py-2.5 sm:py-3 border-b border-gray-200/60 flex items-center justify-between">
<div class="flex items-center gap-2 sm:gap-2.5">
<span class="font-mono text-[8px] sm:text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
<Footnote>
typeface_{String(index).padStart(3, '0')}
</span>
</Footnote>
<div class="w-px h-2 sm:h-2.5 bg-gray-300/60"></div>
<span class="font-mono text-[9px] sm:text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900">
<Footnote class="tracking-[0.15em] font-bold text-gray-900">
{font.name}
</span>
</Footnote>
</div>
<!--
@@ -101,20 +102,20 @@ function removeSample() {
</div>
<div class="px-4 sm:px-5 md:px-6 py-1.5 sm:py-2 border-t border-gray-200/40 w-full flex flex-row gap-2 sm:gap-4 bg-gray-50/30 mt-auto">
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto">
<Footnote class="text-[7px] sm:text-[8px] tracking-wider ml-auto">
SZ:{fontSize}PX
</span>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
</Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<Footnote class="text-[7px] sm:text-[8px] tracking-wider">
WGT:{fontWeight}
</span>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
</Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<Footnote class="text-[7px] sm:text-[8px] tracking-wider">
LH:{lineHeight?.toFixed(2)}
</span>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/40 hidden sm:block"></div>
<span class="text-[7px] sm:text-[8px] font-mono text-gray-400 uppercase tracking-wider">
</Footnote>
<div class="w-px h-2 sm:h-2.5 self-center bg-gray-300/60 hidden sm:block"></div>
<Footnote class="text-[0.4375rem] sm:text-[0.5rem] tracking-wider">
LTR:{letterSpacing}
</span>
</Footnote>
</div>
</div>

9
src/routes/Page.svelte
View File

@@ -5,7 +5,10 @@
<script lang="ts">
import { scrollBreadcrumbsStore } from '$entities/Breadcrumb';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Section } from '$shared/ui';
import {
Logo,
Section,
} from '$shared/ui';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch';
import { SampleList } from '$widgets/SampleList';
@@ -52,9 +55,7 @@ function handleTitleStatusChanged(index: number, isPast: boolean, title?: Snippe
Project_Codename
</span>
{/snippet}
<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>
<Logo />
</Section>
<!--
<Section class="my-12 gap-8" index={1} onTitleStatusChange={handleTitleStatusChanged}>

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

@@ -11,6 +11,7 @@ import {
type FlyParams,
fly,
} from 'svelte/transition';
import { Footnote } from '..';
interface Props extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
/**
@@ -91,17 +92,21 @@ $effect(() => {
out:fly={flyParams}
>
<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">
<div class="flex items-center gap-2 sm:gap-3">
{#if icon}
{@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>
{@render icon({ className: 'size-3 sm:size-4 stroke-gray-900 stroke-1 opacity-60' })}
<div class="w-px h-2.5 sm:h-3 bg-gray-300/60"></div>
{/if}
{#if description}
{@render description({ className: 'font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600' })}
<Footnote>
{#snippet render({ class: className })}
{@render description({ className })}
{/snippet}
</Footnote>
{:else if typeof index === 'number'}
<span class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-600">
<Footnote>
Component_{String(index).padStart(3, '0')}
</span>
</Footnote>
{/if}
</div>

13
src/widgets/FontSearch/ui/FontSearch/FontSearch.svelte
View File

@@ -13,6 +13,7 @@ import {
import { springySlideFade } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import {
Footnote,
IconButton,
SearchBar,
} from '$shared/ui';
@@ -107,14 +108,12 @@ function toggleFilters() {
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
"
>
<div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4 opacity-70">
<div class="w-1 h-1 rounded-full bg-gray-900"></div>
<div class="w-px h-2.5 bg-gray-400/50"></div>
<span
class="font-mono text-[9px] sm:text-[10px] uppercase tracking-[0.2em] text-gray-500 font-medium"
>
<div class="flex items-center gap-2 sm:gap-2.5 mb-3 sm:mb-4">
<div class="w-1 h-1 rounded-full bg-gray-900 opacity-70"></div>
<div class="w-px h-2.5 bg-gray-300/60"></div>
<Footnote>
filter_params
</span>
</Footnote>
</div>
<div class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">