fix header (#38)

apps/web/app/globals.css

@@ -5,6 +5,7 @@
 
 :root {
   --radius: 0.5rem;
+  --ds-gray-500: oklch(0.836 0 0);
   /* Monochrome light theme */
   --background: oklch(1.0 0 0);
   --foreground: oklch(0.1 0 0);
@@ -28,6 +29,7 @@
 }
 
 .dark {
+  --ds-gray-500: oklch(0.39 0 0);
   /* Monochrome dark theme */
   --background: oklch(0.0 0 0);
   --foreground: oklch(0.98 0 0);

apps/web/components/code-block.tsx

@@ -201,7 +201,7 @@ export function CodeBlock({
         </div>
       )}
       <div
-        className="text-[11px] leading-relaxed [&_pre]:bg-transparent! [&_pre]:p-0! [&_pre]:m-0! [&_pre]:border-none! [&_pre]:rounded-none! [&_pre]:text-[11px]! [&_pre]:overflow-visible! [&_code]:bg-transparent! [&_code]:p-0! [&_code]:rounded-none! [&_code]:text-[11px]!"
+        className="text-[13px] leading-relaxed [&_pre]:bg-transparent! [&_pre]:p-0! [&_pre]:m-0! [&_pre]:border-none! [&_pre]:rounded-none! [&_pre]:text-[13px]! [&_pre]:overflow-visible! [&_code]:bg-transparent! [&_code]:p-0! [&_code]:rounded-none! [&_code]:text-[13px]!"
         dangerouslySetInnerHTML={{ __html: html }}
       />
     </div>

apps/web/components/header.tsx

@@ -3,18 +3,53 @@ import { ThemeToggle } from "./theme-toggle";
 
 export function Header() {
   return (
-    <header className="sticky top-0 z-50 backdrop-blur-sm border-b border-border bg-background/80">
-      <div className="max-w-5xl mx-auto px-6 h-14 flex justify-between items-center">
-        <Link
-          href="/"
-          className="font-semibold hover:opacity-70 transition-opacity"
-        >
-          json-render
-        </Link>
-        <nav className="flex gap-4 items-center text-sm">
+    <header className="sticky top-0 z-50 bg-background">
+      <div className="flex h-14 items-center justify-between px-4 gap-6">
+        <div className="flex items-center gap-2">
+          <Link href="https://vercel.com" title="Made with love by Vercel">
+            <svg
+              data-testid="geist-icon"
+              height="18"
+              strokeLinejoin="round"
+              viewBox="0 0 16 16"
+              width="18"
+              style={{ color: "currentcolor" }}
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8 1L16 15H0L8 1Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </Link>
+          <span className="text-(--ds-gray-500)">
+            <svg
+              data-testid="geist-icon"
+              height="16"
+              strokeLinejoin="round"
+              viewBox="0 0 16 16"
+              width="16"
+              style={{ color: "currentcolor" }}
+            >
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.01526 15.3939L4.3107 14.7046L10.3107 0.704556L10.6061 0.0151978L11.9849 0.606077L11.6894 1.29544L5.68942 15.2954L5.39398 15.9848L4.01526 15.3939Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </span>
+          <Link href="/">
+            <span className="font-medium tracking-tight text-lg">
+              json-render
+            </span>
+          </Link>
+        </div>
+        <nav className="flex items-center gap-4">
           <Link
             href="/docs"
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
             Docs
           </Link>
@@ -22,7 +57,7 @@ export function Header() {
             href="https://github.com/vercel-labs/json-render"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-muted-foreground hover:text-foreground transition-colors"
+            className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
             GitHub
           </a>