Something went wrong. Try again.
2025 refresh of the landing page in Astro
Something went wrong. Try again.
2.0 kB · 62 lines
Astro
at redesign
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263---import Wordmark from "./Wordmark.astro";
type NavVariant = "home" | "pds";type PdsPage = "home" | "about" | "migrate";
interface Props { variant?: NavVariant; /** Which PDS subsite page is active, for link highlighting. Ignored outside variant="pds". */ pdsPage?: PdsPage;}
const { variant = "home", pdsPage = "home" } = Astro.props;---
<nav class="sticky top-0 z-10 border-b border-rule backdrop-blur-md" style="background: color-mix(in oklab, var(--color-night) 88%, transparent);"> <div class="max-w-[980px] mx-auto px-7 py-[14px] flex items-center justify-between gap-4 sm:gap-8 mono text-[13px]" > <a href={variant === "pds" ? "/pds" : "/"} class:list={[ "border-none!", variant === "pds" ? "inline-flex flex-col sm:flex-row sm:items-baseline items-start gap-[2px] sm:gap-[6px]" : "inline-flex items-baseline", ]} aria-label={variant === "pds" ? "dummy.cafe / hosting provider" : "dummy.cafe"} > <Wordmark size="nav" mode="ink" /> {variant === "pds" && ( <span class="text-ink-soft leading-none">hosting provider</span> )} </a>
<div class="flex gap-[10px] sm:gap-[22px] items-center text-ink-soft"> {variant === "home" && ( <span class="mono text-[12px] text-ink-dim">© 2026</span> )} {variant === "pds" && ( <> <a href="/pds/about" class:list={["border-none! py-1 hover:text-ink", pdsPage === "about" && "text-ink"]} >about</a> <a href="/pds/migrate" class:list={["border-none! py-1 hover:text-ink", pdsPage === "migrate" && "text-ink"]} >migrate</a> <span class="hidden sm:inline-block w-px h-[14px] bg-rule" aria-hidden></span> <a href="/" class="hidden sm:inline border-none! py-1 text-ink-dim hover:text-ink" >dummy.cafe ↗</a> </> )} </div> </div></nav>