diff --git a/src/routes/(pages)/+page.svelte b/src/routes/(pages)/+page.svelte index 86a1ff6..3272f84 100644 --- a/src/routes/(pages)/+page.svelte +++ b/src/routes/(pages)/+page.svelte @@ -128,6 +128,14 @@ } ]; + let categoriesToIcons = $derived.by(() => { + const map = new Map(); + for (const category of [...superCategories, ...categories]) { + map.set(category.id, category.icon); + } + return map; + }); + let filteredTests: Test[] = $state(tests); let filteredCategories: Category[] = $state([]); @@ -211,7 +219,10 @@
- {$i18n.t(test.label)} + {$i18n.t(test.label)} + {#each test.categories as category} + + {/each}
{$i18n.t(`tests.${test.id}.description`)} @@ -316,11 +327,18 @@ color: inherit; & .label { - white-space: nowrap; + display: inline-flex; + align-items: baseline; + gap: 0.25em; + } + + & .label .category, + & .description { + opacity: 0.85; } & .description { - opacity: 0.8; + font-size: 0.85em; grid-column-start: 2; }