refactor: Optimize sidebar data loading, update font to ExtraBold, and adjust blur effects for category cards and header.
This commit is contained in:
@@ -343,9 +343,14 @@ a:focus-visible {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 0 1.5rem;
|
padding: 0 1.5rem;
|
||||||
background: var(--header-bg);
|
background: var(--header-bg);
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1025px) {
|
||||||
|
.site-header {
|
||||||
backdrop-filter: blur(16px);
|
backdrop-filter: blur(16px);
|
||||||
-webkit-backdrop-filter: blur(16px);
|
-webkit-backdrop-filter: blur(16px);
|
||||||
border-bottom: 1px solid var(--border);
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-left {
|
.header-left {
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
href="/fonts/inter/Inter-Bold.woff2"
|
href="/fonts/inter/Inter-ExtraBold.woff2"
|
||||||
as="font"
|
as="font"
|
||||||
type="font/woff2"
|
type="font/woff2"
|
||||||
crossorigin
|
crossorigin
|
||||||
|
|||||||
@@ -24,8 +24,6 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
|
||||||
backdrop-filter: blur(12px);
|
|
||||||
-webkit-backdrop-filter: blur(12px);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.category-card:hover {
|
.category-card:hover {
|
||||||
|
|||||||
@@ -2,7 +2,18 @@
|
|||||||
import { browser } from '$app/environment';
|
import { browser } from '$app/environment';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { page } from '$app/stores';
|
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 expandedCategory = '';
|
||||||
let expandedUnits: Record<string, string> = {};
|
let expandedUnits: Record<string, string> = {};
|
||||||
@@ -76,7 +87,12 @@
|
|||||||
|
|
||||||
$: categoryUnitGroups = Object.entries(categories).map(([key, meta]) => {
|
$: categoryUnitGroups = Object.entries(categories).map(([key, meta]) => {
|
||||||
const buckets = new Map<string, UnitBucket>();
|
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>();
|
const canonicalByPair = new Map<string, CalculatorDef>();
|
||||||
|
|
||||||
calcs.forEach(calc => {
|
calcs.forEach(calc => {
|
||||||
@@ -161,6 +177,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
export let open = false;
|
export let open = false;
|
||||||
|
|
||||||
|
$: if (browser && (isDesktop || open)) {
|
||||||
|
loadData();
|
||||||
|
}
|
||||||
|
|
||||||
$: isSidebarHidden = !isDesktop && !open;
|
$: isSidebarHidden = !isDesktop && !open;
|
||||||
|
|
||||||
function closeSidebar() {
|
function closeSidebar() {
|
||||||
|
|||||||
Reference in New Issue
Block a user