feat(docs): comprehensive GitHub Primer theme overhaul with dark mode fix

- Fix broken dark mode by correcting palette toggle order and setting primary/accent to custom - Rewrite extra.css with full GitHub Primer color scheme (light: #ffffff/#0969da, dark: #0d1117/#1f6feb) - Style header, sidebar, buttons, cards, code blocks, and tables to match GitHub aesthetic - Add Open Graph and Twitter Card meta tags via main.html override - Add JSON-LD structured data (WebSite + SoftwareApplication schemas) - Add announcement bar (v2.1.2 release) - Add custom 404 page with navigation buttons - Remove inline styles from skills/index.md (moved to extra.css) - Mobile responsive adjustments for hero sections Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-11 11:54:41 +01:00
parent 2908d877c0
commit 543646a0ac
6 changed files with 452 additions and 82 deletions
--- a/docs/overrides/404.html
+++ b/docs/overrides/404.html
@@ -0,0 +1,19 @@
+{% extends "main.html" %}
+
+{% block content %}
+<div style="text-align: center; padding: 4rem 1rem;">
+  <h1 style="font-size: 6rem; font-weight: 800; margin-bottom: 0.5rem; opacity: 0.15; line-height: 1;">404</h1>
+  <p style="font-size: 1.1rem; margin-bottom: 0.5rem; font-weight: 600;">
+    Page not found
+  </p>
+  <p style="font-size: 0.9rem; opacity: 0.6; margin-bottom: 2rem;">
+    The page you're looking for doesn't exist or has been moved.
+  </p>
+  <a href="{{ config.site_url }}" class="md-button md-button--primary">
+    Back to Home
+  </a>
+  <a href="{{ config.site_url }}skills/" class="md-button">
+    Browse Skills
+  </a>
+</div>
+{% endblock %}
--- a/docs/overrides/main.html
+++ b/docs/overrides/main.html
@@ -9,4 +9,55 @@
  gtag('js', new Date());
  gtag('config', 'G-VHRY2VKY9K');
 </script>
+
+{% if page and page.meta %}
+<!-- Open Graph -->
+<meta property="og:type" content="website" />
+<meta property="og:title" content="{{ page.meta.title or page.title }} - {{ config.site_name }}" />
+<meta property="og:description" content="{{ page.meta.description or config.site_description }}" />
+<meta property="og:url" content="{{ page.canonical_url }}" />
+<meta property="og:site_name" content="{{ config.site_name }}" />
+
+<!-- Twitter Card -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="{{ page.meta.title or page.title }} - {{ config.site_name }}" />
+<meta name="twitter:description" content="{{ page.meta.description or config.site_description }}" />
+<meta name="twitter:site" content="@nginitycloud" />
+{% endif %}
+
+<!-- JSON-LD Structured Data -->
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "{{ config.site_name }}",
+  "url": "{{ config.site_url }}",
+  "description": "{{ config.site_description }}",
+  "author": {
+    "@type": "Person",
+    "name": "{{ config.site_author }}"
+  }
+}
+</script>
+<script type="application/ld+json">
+{
+  "@context": "https://schema.org",
+  "@type": "SoftwareApplication",
+  "name": "Claude Code Skills",
+  "applicationCategory": "DeveloperApplication",
+  "operatingSystem": "Cross-platform",
+  "description": "{{ config.site_description }}",
+  "url": "{{ config.site_url }}",
+  "author": {
+    "@type": "Person",
+    "name": "{{ config.site_author }}"
+  },
+  "license": "https://opensource.org/licenses/MIT",
+  "offers": {
+    "@type": "Offer",
+    "price": "0",
+    "priceCurrency": "USD"
+  }
+}
+</script>
 {% endblock %}
--- a/docs/overrides/partials/announce.html
+++ b/docs/overrides/partials/announce.html
@@ -0,0 +1,3 @@
+<a href="https://github.com/alirezarezvani/claude-skills/releases/tag/v2.1.2">
+  <strong>v2.1.2</strong> — 173 skills across 9 domains. Landing page generator now outputs Next.js TSX + Tailwind CSS!
+</a>
--- a/docs/skills/index.md
+++ b/docs/skills/index.md
@@ -5,57 +5,6 @@ hide:
  - edit
 ---

-<style>
-.skills-hero {
-  text-align: center;
-  padding: 2rem 1rem 0.5rem;
-  max-width: 700px;
-  margin: 0 auto;
-}
-
-.skills-hero h1 {
-  font-size: 2.2rem !important;
-  font-weight: 800 !important;
-  letter-spacing: -0.03em;
-  line-height: 1.15;
-  margin-bottom: 0.5rem !important;
-  background: linear-gradient(135deg, #a78bfa 0%, #e879f9 50%, #f59e0b 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-[data-md-color-scheme="default"] .skills-hero h1 {
-  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #d97706 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.skills-hero-sub {
-  font-size: 1.05rem;
-  opacity: 0.6;
-  max-width: 520px;
-  margin: 0 auto 1.5rem;
-}
-
-.domain-section {
-  margin-top: 1rem;
-}
-
-.skill-count {
-  display: inline-block;
-  background: var(--md-primary-fg-color);
-  color: var(--md-primary-bg-color);
-  font-size: 0.7rem;
-  font-weight: 700;
-  padding: 0.15rem 0.5rem;
-  border-radius: 999px;
-  vertical-align: middle;
-  margin-left: 0.35rem;
-}
-</style>
-
 <div class="skills-hero" markdown>

 # Skills Library
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -1,9 +1,297 @@
 /* ============================================
-   Claude Code Skills — Custom Theme
-   Minimal overrides on Material's native grid
+   Claude Code Skills — GitHub Primer Theme
+   MkDocs Material custom properties override
   ============================================ */

-/* --- Hero Section --- */
+/* ===========================================
+   A. Light Mode — GitHub Primer Light
+   =========================================== */
+[data-md-color-scheme="default"] {
+  --md-primary-fg-color: #0969da;
+  --md-primary-fg-color--light: #218bff;
+  --md-primary-fg-color--dark: #0550ae;
+  --md-primary-bg-color: #ffffff;
+  --md-primary-bg-color--light: #f6f8fa;
+  --md-accent-fg-color: #0969da;
+  --md-accent-fg-color--transparent: rgba(9, 105, 218, 0.1);
+
+  --md-default-fg-color: #1f2328;
+  --md-default-fg-color--light: #656d76;
+  --md-default-fg-color--lighter: #8b949e;
+  --md-default-fg-color--lightest: rgba(31, 35, 40, 0.12);
+  --md-default-bg-color: #ffffff;
+  --md-default-bg-color--light: #f6f8fa;
+  --md-default-bg-color--lighter: #f6f8fa;
+  --md-default-bg-color--lightest: #eaeef2;
+
+  --md-code-fg-color: #1f2328;
+  --md-code-bg-color: #f6f8fa;
+  --md-code-hl-color: rgba(9, 105, 218, 0.1);
+
+  --md-typeset-color: #1f2328;
+  --md-typeset-a-color: #0969da;
+
+  --md-footer-fg-color: #f0f6fc;
+  --md-footer-fg-color--light: rgba(240, 246, 252, 0.7);
+  --md-footer-fg-color--lighter: rgba(240, 246, 252, 0.4);
+  --md-footer-bg-color: #24292f;
+  --md-footer-bg-color--dark: #1c2128;
+}
+
+/* ===========================================
+   B. Dark Mode — GitHub Primer Dark
+   =========================================== */
+[data-md-color-scheme="slate"] {
+  --md-hue: 210;
+  --md-primary-fg-color: #1f6feb;
+  --md-primary-fg-color--light: #388bfd;
+  --md-primary-fg-color--dark: #1158c7;
+  --md-primary-bg-color: #0d1117;
+  --md-primary-bg-color--light: #161b22;
+  --md-accent-fg-color: #58a6ff;
+  --md-accent-fg-color--transparent: rgba(31, 111, 235, 0.15);
+
+  --md-default-fg-color: #f0f6fc;
+  --md-default-fg-color--light: #c9d1d9;
+  --md-default-fg-color--lighter: #8b949e;
+  --md-default-fg-color--lightest: rgba(240, 246, 252, 0.1);
+  --md-default-bg-color: #0d1117;
+  --md-default-bg-color--light: #161b22;
+  --md-default-bg-color--lighter: #161b22;
+  --md-default-bg-color--lightest: #21262d;
+
+  --md-code-fg-color: #c9d1d9;
+  --md-code-bg-color: #161b22;
+  --md-code-hl-color: rgba(31, 111, 235, 0.15);
+
+  --md-typeset-color: #f0f6fc;
+  --md-typeset-a-color: #58a6ff;
+
+  --md-footer-fg-color: #f0f6fc;
+  --md-footer-fg-color--light: rgba(240, 246, 252, 0.7);
+  --md-footer-fg-color--lighter: rgba(240, 246, 252, 0.4);
+  --md-footer-bg-color: #010409;
+  --md-footer-bg-color--dark: #010409;
+}
+
+/* ===========================================
+   C. Header & Navigation Bar
+   =========================================== */
+.md-header {
+  border-bottom: 1px solid var(--md-default-fg-color--lightest);
+  box-shadow: none;
+}
+
+[data-md-color-scheme="default"] .md-header {
+  background-color: #ffffff;
+  color: #1f2328;
+}
+
+[data-md-color-scheme="slate"] .md-header {
+  background-color: #161b22;
+}
+
+/* Header title color fix */
+[data-md-color-scheme="default"] .md-header .md-header__title {
+  color: #1f2328;
+}
+
+/* Header icons */
+[data-md-color-scheme="default"] .md-header .md-icon {
+  color: #656d76;
+}
+
+/* Tab bar */
+.md-tabs {
+  border-bottom: 1px solid var(--md-default-fg-color--lightest);
+}
+
+[data-md-color-scheme="default"] .md-tabs {
+  background-color: #ffffff;
+}
+
+[data-md-color-scheme="slate"] .md-tabs {
+  background-color: #0d1117;
+}
+
+.md-tabs__link {
+  font-weight: 500;
+  font-size: 0.8rem;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+
+.md-tabs__link:hover,
+.md-tabs__link--active {
+  opacity: 1;
+}
+
+/* ===========================================
+   D. Sidebar Navigation
+   =========================================== */
+.md-nav {
+  font-size: 0.78rem;
+  line-height: 1.5;
+}
+
+.md-nav__item {
+  padding: 0;
+}
+
+.md-nav__link {
+  padding: 0.35rem 0.75rem;
+  border-radius: 6px;
+  margin: 1px 4px;
+  font-weight: 400;
+  transition: background-color 0.15s ease;
+}
+
+.md-nav__link:hover {
+  background-color: var(--md-accent-fg-color--transparent);
+}
+
+.md-nav__link--active,
+.md-nav__item .md-nav__link--active {
+  font-weight: 600;
+  color: var(--md-accent-fg-color);
+  background-color: var(--md-accent-fg-color--transparent);
+}
+
+/* Section labels in sidebar */
+.md-nav__item--nested > .md-nav__link {
+  font-weight: 600;
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
+  opacity: 0.8;
+}
+
+/* Sidebar scrollbar */
+.md-sidebar__scrollwrap::-webkit-scrollbar {
+  width: 4px;
+}
+
+.md-sidebar__scrollwrap::-webkit-scrollbar-thumb {
+  background-color: var(--md-default-fg-color--lightest);
+  border-radius: 4px;
+}
+
+/* ===========================================
+   E. Buttons — GitHub-style
+   =========================================== */
+.md-typeset .md-button--primary {
+  background-color: var(--md-primary-fg-color);
+  color: #ffffff !important;
+  border: 1px solid var(--md-primary-fg-color);
+  border-radius: 6px;
+  padding: 0.5rem 1.25rem;
+  font-weight: 500;
+  font-size: 0.82rem;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  box-shadow: none;
+}
+
+.md-typeset .md-button--primary:hover {
+  background-color: var(--md-primary-fg-color--dark);
+  border-color: var(--md-primary-fg-color--dark);
+  color: #ffffff !important;
+}
+
+/* Outline / secondary button */
+.md-typeset .md-button:not(.md-button--primary) {
+  color: var(--md-primary-fg-color);
+  border: 1px solid var(--md-default-fg-color--lightest);
+  border-radius: 6px;
+  padding: 0.5rem 1.25rem;
+  font-weight: 500;
+  font-size: 0.82rem;
+  background-color: transparent;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+  box-shadow: none;
+}
+
+.md-typeset .md-button:not(.md-button--primary):hover {
+  background-color: var(--md-accent-fg-color--transparent);
+  border-color: var(--md-primary-fg-color);
+}
+
+/* ===========================================
+   F. Grid Cards
+   =========================================== */
+.md-typeset .grid.cards > ul > li,
+.md-typeset .grid.cards > ol > li,
+.md-typeset .grid > .card {
+  border: 1px solid var(--md-default-fg-color--lightest);
+  border-radius: 6px;
+  box-shadow: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.md-typeset .grid.cards > ul > li:hover,
+.md-typeset .grid.cards > ol > li:hover,
+.md-typeset .grid > .card:hover {
+  border-color: var(--md-default-fg-color--lighter);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover,
+[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* ===========================================
+   G. Code Blocks
+   =========================================== */
+.md-typeset code {
+  border-radius: 6px;
+  border: 1px solid var(--md-default-fg-color--lightest);
+  padding: 0.1em 0.35em;
+  font-size: 0.85em;
+}
+
+.md-typeset pre {
+  border-radius: 6px;
+  border: 1px solid var(--md-default-fg-color--lightest);
+}
+
+.md-typeset pre > code {
+  border: none;
+  padding: 0;
+}
+
+/* ===========================================
+   H. Tables
+   =========================================== */
+.md-typeset table:not([class]) {
+  border: 1px solid var(--md-default-fg-color--lightest);
+  border-radius: 6px;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+}
+
+.md-typeset table:not([class]) th {
+  background-color: var(--md-default-bg-color--light);
+  font-weight: 600;
+  font-size: 0.78rem;
+  border-bottom: 1px solid var(--md-default-fg-color--lightest);
+}
+
+.md-typeset table:not([class]) td {
+  border-top: 1px solid var(--md-default-fg-color--lightest);
+}
+
+/* ===========================================
+   I. Admonitions
+   =========================================== */
+.md-typeset .admonition,
+.md-typeset details {
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+/* ===========================================
+   J. Hero Section
+   =========================================== */
 .hero {
  text-align: center;
  padding: 2.5rem 1rem 1rem;
@@ -17,14 +305,14 @@
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 0.75rem !important;
-  background: linear-gradient(135deg, #a78bfa 0%, #e879f9 50%, #f59e0b 100%);
+  background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 50%, #388bfd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
 }

 [data-md-color-scheme="default"] .hero h1 {
-  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 50%, #d97706 100%);
+  background: linear-gradient(135deg, #0550ae 0%, #0969da 50%, #218bff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
@@ -47,28 +335,56 @@
  margin: 0.25rem;
 }

-/* --- Tighter grid card spacing --- */
-.md-typeset .grid.cards > ul > li,
-.md-typeset .grid.cards > ol > li,
-.md-typeset .grid > .card {
-  border-radius: 10px;
+/* Skills page hero */
+.skills-hero {
+  text-align: center;
+  padding: 2rem 1rem 0.5rem;
+  max-width: 700px;
+  margin: 0 auto;
 }

-/* --- Section dividers --- */
-.md-typeset hr {
-  border-color: var(--md-default-fg-color--lightest);
+.skills-hero h1 {
+  font-size: 2.2rem !important;
+  font-weight: 800 !important;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+  margin-bottom: 0.5rem !important;
+  background: linear-gradient(135deg, #58a6ff 0%, #1f6feb 50%, #388bfd 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }

-/* --- Code block polish --- */
-.md-typeset code {
-  border-radius: 6px;
+[data-md-color-scheme="default"] .skills-hero h1 {
+  background: linear-gradient(135deg, #0550ae 0%, #0969da 50%, #218bff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
 }

-.md-typeset pre {
-  border-radius: 8px;
+.skills-hero-sub {
+  font-size: 1.05rem;
+  opacity: 0.6;
+  max-width: 520px;
+  margin: 0 auto 1.5rem;
 }

-/* --- Typography --- */
+/* Skill count badge */
+.skill-count {
+  display: inline-block;
+  background: var(--md-primary-fg-color);
+  color: #ffffff;
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  vertical-align: middle;
+  margin-left: 0.35rem;
+}
+
+/* ===========================================
+   K. Typography
+   =========================================== */
 .md-typeset {
  font-size: 0.82rem;
  line-height: 1.7;
@@ -79,7 +395,37 @@
  letter-spacing: -0.01em;
 }

-/* --- Mobile --- */
+/* ===========================================
+   L. Section Dividers
+   =========================================== */
+.md-typeset hr {
+  border-color: var(--md-default-fg-color--lightest);
+}
+
+/* ===========================================
+   M. Search Dialog
+   =========================================== */
+[data-md-color-scheme="default"] .md-search__form {
+  background-color: #f6f8fa;
+  border: 1px solid var(--md-default-fg-color--lightest);
+}
+
+/* ===========================================
+   N. Announcement Bar
+   =========================================== */
+.md-banner {
+  background-color: var(--md-primary-fg-color);
+  color: #ffffff;
+  font-size: 0.78rem;
+}
+
+.md-banner a {
+  color: #ffffff;
+}
+
+/* ===========================================
+   O. Mobile Responsive
+   =========================================== */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.8rem !important;
@@ -88,4 +434,8 @@
  .hero-subtitle {
    font-size: 0.95rem;
  }
+
+  .skills-hero h1 {
+    font-size: 1.8rem !important;
+  }
 }
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -11,20 +11,18 @@ theme:
  name: material
  custom_dir: docs/overrides
  palette:
-    - media: "(prefers-color-scheme)"
-      scheme: slate
-      primary: deep purple
-      accent: deep purple
-      toggle:
-        icon: material/brightness-4
-        name: Switch to light mode
-    - media: "(prefers-color-scheme: light)"
-      scheme: default
-      primary: deep purple
-      accent: deep purple
+    - scheme: default
+      primary: custom
+      accent: custom
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode
+    - scheme: slate
+      primary: custom
+      accent: custom
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
  font:
    text: Inter
    code: JetBrains Mono