refactor: Optimize sidebar data loading, update font to ExtraBold, and adjust blur effects for category cards and header.

This commit is contained in:
Ben
2026-03-08 19:20:53 -07:00
parent 1093208324
commit 3ae77e02a0
4 changed files with 31 additions and 7 deletions

View File

@@ -343,9 +343,14 @@ a:focus-visible {
justify-content: space-between;
padding: 0 1.5rem;
background: var(--header-bg);
border-bottom: 1px solid var(--border);
}
@media (min-width: 1025px) {
.site-header {
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
}
.header-left {

View File

@@ -12,7 +12,7 @@
/>
<link
rel="preload"
href="/fonts/inter/Inter-Bold.woff2"
href="/fonts/inter/Inter-ExtraBold.woff2"
as="font"
type="font/woff2"
crossorigin

View File

@@ -24,8 +24,6 @@
text-decoration: none;
color: var(--text);
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
cursor: pointer;
}
.category-card:hover {

View File

@@ -2,7 +2,18 @@
import { browser } from '$app/environment';
import { onMount } from 'svelte';
import { page } from '$app/stores';
import { categories, getCalculatorsByCategory, type CalculatorDef } from '$lib/data/calculators';
import { categories } from '$lib/data/stats';
import type { CalculatorDef } from '$lib/data/calculators';
let allCalculators: CalculatorDef[] = [];
let isLoaded = false;
async function loadData() {
if (isLoaded || !browser) return;
const module = await import('$lib/data/calculators');
allCalculators = module.calculators;
isLoaded = true;
}
let expandedCategory = '';
let expandedUnits: Record<string, string> = {};
@@ -76,7 +87,12 @@
$: categoryUnitGroups = Object.entries(categories).map(([key, meta]) => {
const buckets = new Map<string, UnitBucket>();
const calcs = getCalculatorsByCategory(key);
if (!isLoaded) {
return { key, meta, units: [] };
}
const calcs = allCalculators.filter(c => c.category === key && !c.hidden);
const canonicalByPair = new Map<string, CalculatorDef>();
calcs.forEach(calc => {
@@ -161,6 +177,11 @@
}
export let open = false;
$: if (browser && (isDesktop || open)) {
loadData();
}
$: isSidebarHidden = !isDesktop && !open;
function closeSidebar() {