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

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

@@ -55,7 +55,7 @@ function removeSample() {
<div
class="
w-full h-full rounded-2xl
w-full h-full rounded-xl sm:rounded-2xl
flex flex-col
backdrop-blur-md bg-white/80
border border-gray-300/50
@@ -64,13 +64,13 @@ function removeSample() {
"
style:font-weight={fontWeight}
>
<div class="px-6 py-3 border-b border-gray-200/60 flex items-center justify-between">
<div class="flex items-center gap-2.5">
<span class="font-mono text-[9px] uppercase tracking-[0.25em] text-gray-500 font-medium">
<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">
typeface_{String(index).padStart(3, '0')}
</span>
<div class="w-px h-2.5 bg-gray-300/60"></div>
<span class="font-mono text-[10px] tracking-[0.15em] font-bold uppercase text-gray-900">
<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">
{font.name}
</span>
</div>
@@ -87,7 +87,7 @@ function removeSample() {
-->
</div>
<div class="p-8 relative z-10">
<div class="p-4 sm:p-5 md:p-8 relative z-10">
<!-- TODO: Fix this ! -->
<FontApplicator id={font.id} name={font.name} url={font.styles.regular!}>
<ContentEditable
@@ -100,20 +100,20 @@ function removeSample() {
</FontApplicator>
</div>
<div class="px-6 py-2 border-t border-gray-200/40 w-full flex gap-4 bg-gray-50/30 mt-auto">
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider ml-auto">
<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">
SZ:{fontSize}PX
</span>
<div class="w-px h-2.5 self-center bg-gray-300/40"></div>
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
<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">
WGT:{fontWeight}
</span>
<div class="w-px h-2.5 self-center bg-gray-300/40"></div>
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
<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">
LH:{lineHeight?.toFixed(2)}
</span>
<div class="w-px h-2.5 self-center bg-gray-300/40"></div>
<span class="text-[8px] font-mono text-gray-400 uppercase tracking-wider">
<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">
LTR:{letterSpacing}
</span>
</div>