48 lines
1.3 KiB
Svelte
48 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { appliedFontsManager } from '$entities/Font';
|
|
import { displayedFontsStore } from '$features/DisplayFont';
|
|
import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
|
|
import { controlManager } from '$features/SetupFont';
|
|
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
|
|
import { FontSearch } from '$widgets/FontSearch';
|
|
|
|
/**
|
|
* Page Component
|
|
*/
|
|
|
|
let searchContainer: HTMLElement;
|
|
|
|
let isExpanded = $state(false);
|
|
|
|
$effect(() => {
|
|
appliedFontsManager.touch(
|
|
displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
|
|
);
|
|
});
|
|
</script>
|
|
|
|
<!-- Font List -->
|
|
<div class="p-2 will-change-[height]">
|
|
<div bind:this={searchContainer}>
|
|
<FontSearch bind:showFilters={isExpanded} />
|
|
</div>
|
|
|
|
<ComparisonSlider />
|
|
|
|
<div class="will-change-tranform transition-transform content">
|
|
<FontDisplay />
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.content {
|
|
/* Tells the browser to skip rendering off-screen content */
|
|
content-visibility: auto;
|
|
/* Helps the browser reserve space without calculating everything */
|
|
contain-intrinsic-size: 1px 1000px;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
</style>
|