Add new color scheme, logo

4 files changed, 36 insertions, 16 deletions

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>