From d2c30cf314bca7766507f7489adfd5aaf19700dd Mon Sep 17 00:00:00 2001
From: Nikhil M Warrier <nikhilmw.dev@gmail.com>
Date: Tue, 3 Mar 2026 14:31:09 +0530
Subject: Add new color scheme, logo

---
 pnpm-lock.yaml                        | 11 +++++++++++
 src/components/Header.astro           | 18 +++++++++++-------
 src/components/MobileLogo.astro       | 11 +++++++++++
 src/components/ThemeToggle.astro      |  7 +++++--
 src/components/react/SearchButton.tsx | 16 +++++++++-------
 src/layouts/Layout.astro              |  2 ++
 src/pages/index.astro                 |  8 ++++++--
 src/styles/global.css                 |  4 ++--
 src/styles/typography.css             |  6 +++++-
 9 files changed, 62 insertions(+), 21 deletions(-)
 create mode 100644 src/components/MobileLogo.astro

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 *)) {
-- 
cgit v1.2.3