From 085907c589224b4ffaf6a02276909346df6245b4 Mon Sep 17 00:00:00 2001
From: Eric Harmeling <eric.harmeling@outlook.com>
Date: Thu, 18 Dec 2025 14:24:04 -0500
Subject: [PATCH] Make docs mobile-responsive (#6)

---
 docs/docs.json | 11 ++++++-----
 docs/home.mdx  | 38 +++++++++++++++++++-------------------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/docs/docs.json b/docs/docs.json
index 5de63df..1ca6834 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -8,6 +8,12 @@
     "dark": "#404040"
   },
   "favicon": "/favicon.svg",
+  "navbar": {
+    "primary": {
+      "type": "github",
+      "href": "https://github.com/agentskills/agentskills"
+    }
+  },
   "navigation": {
     "pages": [
       "home",
@@ -27,10 +33,5 @@
       "cursor",
       "vscode"
     ]
-  },
-  "footer": {
-    "socials": {
-      "github": "https://github.com/agentskills/agentskills"
-    }
   }
 }
diff --git a/docs/home.mdx b/docs/home.mdx
index 0169b48..e542e44 100644
--- a/docs/home.mdx
+++ b/docs/home.mdx
@@ -26,42 +26,42 @@ Agents are increasingly capable, but often don't have the context they need to d
 
 Agent Skills are supported by leading AI development tools.
 
-<div className="grid grid-cols-3 items-center justify-items-center">
+<div className="grid grid-cols-2 md:grid-cols-3 gap-4 items-center justify-items-center">
   <a href="https://opencode.ai/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/opencode/opencode-wordmark-light.svg" alt="OpenCode" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/opencode/opencode-wordmark-dark.svg" alt="OpenCode" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/opencode/opencode-wordmark-light.svg" alt="OpenCode" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/opencode/opencode-wordmark-dark.svg" alt="OpenCode" noZoom />
   </a>
   <a href="https://cursor.com/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg" alt="Cursor" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg" alt="Cursor" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/cursor/LOCKUP_HORIZONTAL_2D_LIGHT.svg" alt="Cursor" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/cursor/LOCKUP_HORIZONTAL_2D_DARK.svg" alt="Cursor" noZoom />
   </a>
   <a href="https://ampcode.com/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/amp/amp-logo-light.svg" alt="Amp" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/amp/amp-logo-dark.svg" alt="Amp" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '120px', maxWidth: '100%'}} src="/images/logos/amp/amp-logo-light.svg" alt="Amp" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '120px', maxWidth: '100%'}} src="/images/logos/amp/amp-logo-dark.svg" alt="Amp" noZoom />
   </a>
   <a href="https://www.letta.com/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/letta/Letta-logo-RGB_OffBlackonTransparent.svg" alt="Letta" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/letta/Letta-logo-RGB_GreyonTransparent.svg" alt="Letta" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/letta/Letta-logo-RGB_OffBlackonTransparent.svg" alt="Letta" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/letta/Letta-logo-RGB_GreyonTransparent.svg" alt="Letta" noZoom />
   </a>
   <a href="https://block.github.io/goose/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/goose/goose-logo-black.png" alt="Goose" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/goose/goose-logo-white.png" alt="Goose" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/goose/goose-logo-black.png" alt="Goose" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/goose/goose-logo-white.png" alt="Goose" noZoom />
   </a>
   <a href="https://github.com/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/github/GitHub_Lockup_Dark.svg" alt="GitHub" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/github/GitHub_Lockup_Light.svg" alt="GitHub" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/github/GitHub_Lockup_Dark.svg" alt="GitHub" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/github/GitHub_Lockup_Light.svg" alt="GitHub" noZoom />
   </a>
   <a href="https://code.visualstudio.com/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{height: '40px'}} src="/images/logos/vscode/vscode.svg" alt="VS Code" noZoom />
-    <img className="hidden dark:block object-contain" style={{height: '40px'}} src="/images/logos/vscode/vscode-alt.svg" alt="VS Code" noZoom />
+    <img className="block dark:hidden object-contain" style={{height: '40px', maxWidth: '100%'}} src="/images/logos/vscode/vscode.svg" alt="VS Code" noZoom />
+    <img className="hidden dark:block object-contain" style={{height: '40px', maxWidth: '100%'}} src="/images/logos/vscode/vscode-alt.svg" alt="VS Code" noZoom />
   </a>
   <a href="https://claude.ai/code" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/claude-code/Claude-Code-logo-Slate.svg" alt="Claude Code" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/claude-code/Claude-Code-logo-Ivory.svg" alt="Claude Code" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-code/Claude-Code-logo-Slate.svg" alt="Claude Code" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-code/Claude-Code-logo-Ivory.svg" alt="Claude Code" noZoom />
   </a>
   <a href="https://claude.ai/" style={{textDecoration: 'none', border: 'none'}}>
-    <img className="block dark:hidden object-contain" style={{width: '150px'}} src="/images/logos/claude-ai/Claude-logo-Slate.svg" alt="Claude" noZoom />
-    <img className="hidden dark:block object-contain" style={{width: '150px'}} src="/images/logos/claude-ai/Claude-logo-Ivory.svg" alt="Claude" noZoom />
+    <img className="block dark:hidden object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-ai/Claude-logo-Slate.svg" alt="Claude" noZoom />
+    <img className="hidden dark:block object-contain" style={{width: '150px', maxWidth: '100%'}} src="/images/logos/claude-ai/Claude-logo-Ivory.svg" alt="Claude" noZoom />
   </a>
 </div>