Add GitHub icon link to website header (104)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: claude

.claude/tasks/done/104-github-icon.md

@@ -0,0 +1,9 @@
+## Problem to solve
+
+I'd like the github cat icon to be visible in header, and link to the github
+repo.
+
+## Idea
+
+I'd suggest at right of the light/dark mode on desktop. Do your best in burger
+menu on mobile.

web/public/styles/global.css

@@ -141,6 +141,36 @@ body.light-theme .theme-toggle {
   color: #6366f1;
 }
 
+/* GitHub link */
+nav .github-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  transition: all 0.15s ease;
+}
+
+nav .github-link:hover {
+  border-color: var(--accent);
+  background: rgba(99, 102, 241, 0.1);
+  color: var(--text-primary);
+}
+
+.github-icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* Nav icons container (theme toggle + github) */
+.nav-icons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 /* Nav groups for two-level menu */
 .nav-group {
   display: flex;
@@ -1820,6 +1850,32 @@ body.light-theme .js-badge {
     border-radius: 0;
   }
 
+  /* Nav icons on mobile - centered row */
+  header nav .nav-icons {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    padding: 1rem 0;
+    border-top: 1px solid var(--border);
+    margin-top: 0.5rem;
+  }
+
+  header nav .nav-icons .theme-toggle,
+  header nav .nav-icons .github-link {
+    border: none;
+    background: none;
+    padding: 0.5rem;
+  }
+
+  header nav .nav-icons .theme-toggle {
+    font-size: 1.5rem;
+  }
+
+  header nav .nav-icons .github-icon {
+    width: 24px;
+    height: 24px;
+  }
+
   /* Two-level nav on mobile */
   header nav .nav-group {
     flex-direction: column;

web/src/layouts/Layout.astro

@@ -120,9 +120,16 @@ const url = (path: string) => `${base}${path}`;
       <a href={url('/blog')} class:list={[{ active: activeNav === 'blog' }]}>Blog</a>
       <a href={url('/about')} class:list={[{ active: activeNav === 'about' }]}>About</a>
       <a href={url('/security')} class:list={[{ active: activeNav === 'security' }]}>Security</a>
-      <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme" title="Toggle light/dark mode">
-        <span class="theme-icon">&#9790;</span>
-      </button>
+      <div class="nav-icons">
+        <button class="theme-toggle" id="theme-toggle" aria-label="Toggle theme" title="Toggle light/dark mode">
+          <span class="theme-icon">&#9790;</span>
+        </button>
+        <a href="https://github.com/enspirit/elo" target="_blank" rel="noopener noreferrer" class="github-link" aria-label="View on GitHub" title="View on GitHub">
+          <svg viewBox="0 0 24 24" fill="currentColor" class="github-icon">
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+          </svg>
+        </a>
+      </div>
     </nav>
   </header>