36 lines
874 B
Svelte
36 lines
874 B
Svelte
<script lang="ts">
|
|
import FontDisplay from '$features/DisplayFont/ui/FontDisplay/FontDisplay.svelte';
|
|
import { FontSearch } from '$widgets/FontSearch';
|
|
|
|
/**
|
|
* Page Component
|
|
*/
|
|
|
|
let searchContainer: HTMLElement;
|
|
|
|
let isExpanded = $state(false);
|
|
</script>
|
|
|
|
<!-- Font List -->
|
|
<div class="p-2 will-change-[height]">
|
|
<div bind:this={searchContainer}>
|
|
<FontSearch bind:showFilters={isExpanded} />
|
|
</div>
|
|
|
|
<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>
|