e4539ed0f0
Replaces bg-white, text-brand-navy, border-brand-sand, text-gray-*, bg-[#2A2A2A], bg-brand-purple/15, hover:bg-brand-sand, etc. across all 35 .svelte files with semantic token utilities (bg-surface, text-ink, border-line, bg-pdf-bg, bg-nav-active, bg-muted, text-accent, bg-primary, ...). Also adds CSS filter: invert(1) in layout.css for De Gruyter <img> icons in dark mode, excluding icons that carry .invert already (to prevent double-inversion). Closes #64 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
34 lines
922 B
Svelte
34 lines
922 B
Svelte
<script lang="ts">
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
let { text, maxLines = 10 }: { text: string; maxLines?: number } = $props();
|
|
|
|
let expanded = $state(false);
|
|
let el = $state<HTMLElement | undefined>(undefined);
|
|
let isClamped = $state(false);
|
|
|
|
$effect(() => {
|
|
if (el && !expanded) {
|
|
isClamped = el.scrollHeight > el.clientHeight;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div>
|
|
<div
|
|
bind:this={el}
|
|
style={!expanded ? `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${maxLines}` : ''}
|
|
class="rounded border border-line bg-muted p-5 font-serif text-sm leading-relaxed whitespace-pre-wrap text-ink"
|
|
>
|
|
{text}
|
|
</div>
|
|
{#if isClamped || expanded}
|
|
<button
|
|
onclick={() => (expanded = !expanded)}
|
|
class="mt-2 font-sans text-xs text-ink-3 transition hover:text-ink"
|
|
>
|
|
{expanded ? m.comp_expandable_show_less() : m.comp_expandable_show_more()}
|
|
</button>
|
|
{/if}
|
|
</div>
|