46 lines
1004 B
Svelte
46 lines
1004 B
Svelte
<!--
|
|
Component: Logo
|
|
Project logo with apropriate styles
|
|
-->
|
|
<script lang="ts">
|
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
|
|
interface Props {
|
|
class?: string;
|
|
}
|
|
|
|
const { class: className }: Props = $props();
|
|
|
|
const baseClasses = 'barlow font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl';
|
|
|
|
const title = 'GLYPHDIFF';
|
|
</script>
|
|
|
|
<!-- 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>
|