diff options
| -rw-r--r-- | pnpm-lock.yaml | 11 | ||||
| -rw-r--r-- | src/components/Header.astro | 18 | ||||
| -rw-r--r-- | src/components/MobileLogo.astro | 11 | ||||
| -rw-r--r-- | src/components/ThemeToggle.astro | 7 | ||||
| -rw-r--r-- | src/components/react/SearchButton.tsx | 16 | ||||
| -rw-r--r-- | src/layouts/Layout.astro | 2 | ||||
| -rw-r--r-- | src/pages/index.astro | 8 | ||||
| -rw-r--r-- | src/styles/global.css | 4 | ||||
| -rw-r--r-- | src/styles/typography.css | 6 |
9 files changed, 62 insertions, 21 deletions
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1d5bce1..b59b57d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: '@radix-ui/react-checkbox': specifier: ^1.3.3 version: 1.3.3(@types/react-dom@19.0.0)(@types/react@19.0.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + '@radix-ui/react-dialog': + specifier: ^1.1.15 + version: 1.1.15(@types/react-dom@19.0.0)(@types/react@19.0.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) '@shikijs/rehype': specifier: ^3.4.0 version: 3.23.0 @@ -62,6 +65,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + flexsearch: + specifier: ^0.8.212 + version: 0.8.212 lucide-react: specifier: ^0.469.0 version: 0.469.0(react@19.0.0) @@ -2344,6 +2350,9 @@ packages: resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==} engines: {node: '>=8'} + flexsearch@0.8.212: + resolution: {integrity: sha512-wSyJr1GUWoOOIISRu+X2IXiOcVfg9qqBRyCPRUdLMIGJqPzMo+jMRlvE83t14v1j0dRMEaBbER/adQjp6Du2pw==} + fontace@0.4.1: resolution: {integrity: sha512-lDMvbAzSnHmbYMTEld5qdtvNH2/pWpICOqpean9IgC7vUbUJc3k+k5Dokp85CegamqQpFbXf0rAVkbzpyTA8aw==} @@ -6189,6 +6198,8 @@ snapshots: flattie@1.1.1: {} + flexsearch@0.8.212: {} + fontace@0.4.1: dependencies: fontkitten: 1.0.2 diff --git a/src/components/Header.astro b/src/components/Header.astro index 2402c2a..ff2a8ef 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -2,21 +2,25 @@ import Link from '@/components/Link.astro' import ThemeToggle from '@/components/ThemeToggle.astro' import SearchButton from '@/components/react/SearchButton' -import { NAV_LINKS, SITE } from '@/consts' +import { NAV_LINKS } from '@/consts' import { Image } from 'astro:assets' import logo from '../../public/static/logo.svg' --- -<div> +<div class="border-b md:border-b-0"> <div - class="mx-auto flex max-w-3xl items-center justify-between gap-4 px-4 py-3" + class="mx-auto flex max-w-3xl flex-row items-center justify-center gap-4 px-4 py-3 md:justify-between" > - <Link href="/" class="flex shrink-0 items-center justify-center gap-3"> + <Link + href="/" + class="hidden shrink-0 items-center justify-center gap-3 md:flex" + > <Image src={logo} alt="Logo" class="size-5 sm:size-6" /> <span - class="hidden h-full font-mono text-lg leading-none font-medium min-[400px]:block" - >{SITE.title}</span + class="hidden h-full py-4 font-mono leading-none font-medium italic md:block md:text-3xl" > + foss<span class="text-primary">cet</span> + </span> </Link> <div class="flex items-center gap-4"> <nav class="flex items-center gap-4 text-sm sm:gap-6"> @@ -24,7 +28,7 @@ import logo from '../../public/static/logo.svg' NAV_LINKS.map((item) => ( <Link href={item.href} - class="text-foreground/60 hover:text-foreground capitalize transition-colors" + class="text-foreground/60 hover:text-foreground font-mono transition-colors" > {item.label} </Link> diff --git a/src/components/MobileLogo.astro b/src/components/MobileLogo.astro new file mode 100644 index 0000000..9a6406e --- /dev/null +++ b/src/components/MobileLogo.astro @@ -0,0 +1,11 @@ +--- +import Link from './Link.astro' +--- + +<Link href="/" class="contents"> + <div + class="flex h-full items-center justify-center pt-8 text-center font-mono text-3xl leading-none font-medium italic md:hidden lg:text-3xl" + > + foss<span class="text-primary">cet</span> + </div> +</Link> diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro index f7b0926..3047030 100644 --- a/src/components/ThemeToggle.astro +++ b/src/components/ThemeToggle.astro @@ -10,8 +10,11 @@ import { Icon } from 'astro-icon/components' title="Toggle theme" className="-my-2 -me-2 size-8" > - <Icon name="lucide:sun" class="size-4 dark:hidden" /> - <Icon name="lucide:moon" class="absolute hidden size-4 dark:block" /> + <Icon name="lucide:sun" class="text-muted-foreground size-4 dark:hidden" /> + <Icon + name="lucide:moon" + class="text-muted-foreground absolute hidden size-4 dark:block" + /> <span class="sr-only">Toggle theme</span> </Button> diff --git a/src/components/react/SearchButton.tsx b/src/components/react/SearchButton.tsx index 17aad93..01a33c9 100644 --- a/src/components/react/SearchButton.tsx +++ b/src/components/react/SearchButton.tsx @@ -12,10 +12,11 @@ const SearchButton: React.FC = () => { const handleKeyDown = (e: KeyboardEvent) => { // Don't trigger if user is typing in an input, textarea, or contenteditable const target = e.target as HTMLElement - const isInput = target.tagName === 'INPUT' || - target.tagName === 'TEXTAREA' || - target.isContentEditable - + const isInput = + target.tagName === 'INPUT' || + target.tagName === 'TEXTAREA' || + target.isContentEditable + if ((e.metaKey || e.ctrlKey) && e.key === 'k' && !isInput) { e.preventDefault() setIsOpen(true) @@ -29,16 +30,17 @@ const SearchButton: React.FC = () => { return ( <ErrorBoundary> <Button - variant="outline" + variant="ghost" size="icon" onClick={() => setIsOpen(true)} - className="size-9 border md:border-0 md:bg-transparent md:hover:bg-muted md:-my-2 md:-me-2 md:size-8" + // className="md:hover:bg-muted size-9 border md:-my-2 md:-me-2 md:size-8 border-0 md:bg-transparent" + className="-my-2 -me-2 size-8" title="Search (⌘K)" aria-label="Search blog posts" aria-expanded={isOpen} aria-haspopup="dialog" > - <Search className="h-5 w-5 md:h-4 md:w-4" /> + <Search className="text-muted-foreground h-5 w-5 md:h-4 md:w-4" /> <span className="sr-only">Search</span> </Button> <ErrorBoundary> diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 6184f18..1e54650 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -5,6 +5,7 @@ import '@/styles/typography.css' import Footer from '@/components/Footer.astro' import Head from '@/components/Head.astro' import Header from '@/components/Header.astro' +import MobileLogo from '@/components/MobileLogo.astro' import { SITE } from '@/consts' import { cn } from '@/lib/utils' @@ -24,6 +25,7 @@ const { class: className } = Astro.props <slot name="head" /> </Head> <body class="flex h-fit min-h-screen flex-col gap-y-6 font-sans"> + <MobileLogo /> <header class="bg-background/50 sticky top-0 z-50 divide-y backdrop-blur-sm xl:divide-none" > diff --git a/src/pages/index.astro b/src/pages/index.astro index c884146..e1678c8 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -16,8 +16,12 @@ const events = await getRecentEvents(SITE.featuredEventsCount) <PageHead slot="head" title="Home" /> <section class="rounded-lg border"> <div class="flex flex-col space-y-1.5 p-6"> - <h3 class="font-mono text-3xl leading-none font-medium"> - Software belongs to the people. + <h3 class="font-mono text-3xl leading-relaxed font-medium"> + Software belongs to the <span + class="bg-primary text-primary-foreground pl-1" + > + people. + </span> </h3> <p class="text-muted-foreground mt-5"> We are a community of hackers, builders, and privacy advocates dedicated diff --git a/src/styles/global.css b/src/styles/global.css index d7dffa3..8b6c78a 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -84,13 +84,13 @@ [data-theme='dark'] { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); - --primary: oklch(0.922 0 0); + --primary: oklch(0.8732 0.2457 149.11); --primary-foreground: oklch(0.205 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); - --ring: oklch(0.556 0 0); + --ring: oklch(0.8732 0.2457 149.11 / 0.5); } @layer base { diff --git a/src/styles/typography.css b/src/styles/typography.css index 6667606..1e86118 100644 --- a/src/styles/typography.css +++ b/src/styles/typography.css @@ -1,6 +1,10 @@ @reference './global.css'; @layer base { + ::selection { + background: var(--color-primary); + color: var(--color-primary-foreground); + } p, h1, h2, @@ -64,7 +68,7 @@ } :where(a):not(:where(.not-prose, .not-prose *)) { - @apply text-foreground decoration-muted-foreground hover:decoration-foreground font-medium break-words underline underline-offset-[3px] transition-colors; + @apply text-foreground decoration-primary hover:decoration-foreground hidden font-medium break-words underline underline-offset-[3px] transition-colors; } :where(strong):not(:where(.not-prose, .not-prose *)) { |