stan/website
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases Wiki Activity

ui: separate trackers from projects; keep header dropdown on top

Browse Source 
- /trackers index, Trackers section on the homepage and in the header nav;
  /projects lists only projects (tracker URLs unchanged)
- header is its own z-50 layer and <main> is isolated, so maps, charts and
  sticky tables no longer paint over the nav dropdowns
This commit is contained in:
Stan Runge
2026-10-23 22:03:42 +00:00
parent 2915135ed8
commit 7e69d1e888
10 changed files with 174 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/routes/projects/+page.svelte
View File

@@ -1,10 +1,7 @@
<script lang="ts">
import { resolve } from '$app/paths';
import ArrowRight from 'lucide-svelte/icons/arrow-right';
import ExternalLink from 'lucide-svelte/icons/external-link';
import * as Card from '#lib/components/ui/card/index.js';
import { Badge } from '#lib/components/ui/badge/index.js';
import ProjectIcon from '#lib/components/ProjectIcon.svelte';
import CatalogGrid from '#lib/components/CatalogGrid.svelte';
import { projects } from '#lib/projects.js';
const earlier = [
@@ -15,59 +12,12 @@
</script>
<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
<h1 class="mb-10 text-4xl font-semibold tracking-tight sm:text-5xl">projects</h1>
<ul class="grid gap-3 sm:grid-cols-2">
{#each projects as project (project.name)}
<li>
<Card.Root class="h-full py-0 transition-colors hover:bg-muted/50"
><Card.Content class="p-0">
{#if project.external}
<a
href={project.href}
rel="external"
class="flex min-h-28 items-start justify-between gap-4 p-5"
>
<span class="flex min-w-0 items-start gap-3">
<span
class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-[var(--site-surface)] text-[var(--site-muted)]"
>
<ProjectIcon name={project.name} class="size-5" />
</span>
<span class="min-w-0"
><span class="block font-medium">{project.name}</span><span
class="mt-1 block text-sm text-muted-foreground">{project.subtitle}</span
></span
>
</span><ExternalLink
size={18}
aria-hidden="true"
class="text-[var(--site-muted)]"
/>
</a>
{:else}
<a
href={resolve(project.href)}
class="flex min-h-28 items-start justify-between gap-4 p-5"
>
<span class="flex min-w-0 items-start gap-3">
<span
class="mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-[var(--site-surface)] text-[var(--site-muted)]"
>
<ProjectIcon name={project.name} class="size-5" />
</span>
<span class="min-w-0"
><span class="block font-medium">{project.name}</span><span
class="mt-1 block text-sm text-muted-foreground">{project.subtitle}</span
></span
>
</span><ArrowRight size={18} aria-hidden="true" class="text-[var(--site-muted)]" />
</a>
{/if}
</Card.Content></Card.Root
>
</li>
{/each}
</ul>
<h1 class="mb-3 text-4xl font-semibold tracking-tight sm:text-5xl">projects</h1>
<p class="mb-10 text-[var(--site-muted)]">
Things I built. Looking for the money, house, game or price trackers? They live under
<a class="underline" href={resolve('trackers')}>trackers</a>.
</p>
<CatalogGrid items={projects} />
<h2 class="mt-14 mb-3 text-2xl font-semibold">other</h2>
<ul>
{#each earlier as name (name)}