src/shared/ui/Logo/Logo.svelte

@@ -11,9 +11,35 @@ interface Props {
 
 const { class: className }: Props = $props();
 
-const baseClasses =
+const baseClasses = 'font-[Barlow] font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl';
-    '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]';
+
+const title = 'GLYPHDIFF';
 </script>
-<h2 class={cn(baseClasses, className)}>
+
-    GLYPHDIFF
+<!-- Firefox version (hidden in Chrome/Safari) -->
+<h2
+    class={cn(
+        baseClasses,
+        'text-justify [text-align-last:justify] [text-justify:inter-character]',
+        // Hide in non-Firefox
+        'hidden [@supports(text-justify:inter-character)]:block',
+        className,
+    )}
+>
+    {title}
+</h2>
+
+<!-- Chrome/Safari version (hidden in Firefox) -->
+<h2
+    class={cn(
+        'flex justify-between w-full',
+        baseClasses,
+        // Hide in Firefox
+        '[@supports(text-justify:inter-character)]:hidden',
+        className,
+    )}
+>
+    {#each title.split('') as letter}
+        <span>{letter}</span>
+    {/each}
 </h2>