Fix GitHub Copilot logo and site mentions (#182)

* Fix GitHub Copilot site mentions

* Fix mobile command blocks

* Fix mobile nav drawer centering

* Align mobile nav controls

* Align mobile nav controls

* Pad mobile nav drawer

* Fix light mobile nav drawer

* Remove light drawer active border

* Restore light drawer active underline

* Fix designing mobile layout

* Tune designing mobile loop

* Fix designing mobile section gutters

* Keep polish commands on one mobile row

* Fix designing mobile bento gutters

site/content/tutorials/getting-started.md

@@ -11,7 +11,7 @@ You will end this tutorial with Impeccable installed in your project, a `PRODUCT
 
 ## Prerequisites
 
-- An AI coding harness: Claude Code, Cursor, Gemini CLI, Codex CLI, or any of the other supported tools.
+- An AI coding harness: Claude Code, Cursor, GitHub Copilot, Gemini CLI, Codex CLI, or any of the other supported tools.
 - A project with at least one HTML or component file you want to improve. A fresh scaffolded landing page works fine.
 
 ## How Impeccable works
@@ -34,7 +34,7 @@ From the root of your project, run:
 npx impeccable skills install
 ```
 
-This auto-detects your harness and writes the build compiled for it to the right location (e.g., `.claude/skills/`, `.cursor/skills/`). It works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other major harness. Reload your harness and type `/`. You should see `/impeccable` in the autocomplete. Type it and the skill's argument hint will show all available commands.
+This auto-detects your harness and writes the build compiled for it to the right location (e.g., `.claude/skills/`, `.cursor/skills/`). It works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, and every other major harness. Reload your harness and type `/`. You should see `/impeccable` in the autocomplete. Type it and the skill's argument hint will show all available commands.
 
 Prefer a different setup? Claude Code users can install the plugin with `/plugin marketplace add pbakaus/impeccable`, and the general-purpose `npx skills add pbakaus/impeccable` still works (though it installs one shared build for all harnesses rather than the one compiled for yours).
 

site/pages/index.astro

@@ -19,14 +19,14 @@ import '../styles/testimonials.css';
 
 <Base
   title="Impeccable: The missing upgrade to Anthropic's impeccable skill"
-  description="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI."
+  description="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, and Codex CLI."
   activeNav="home"
   canonicalPath="/"
   bodyClass="home-kinpaku kinpaku-chrome"
   mainId="main-content"
   mainClass="site-content"
   ogTitle="Impeccable: Design skills for AI harnesses"
-  ogDescription="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, Gemini CLI, and Codex CLI."
+  ogDescription="1 skill, 23 commands, and curated anti-patterns for impeccable frontend design. Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, and Codex CLI."
   ogImage="https://impeccable.style/og-image-v2.jpg"
   twitterSite="@pbakaus"
   twitterCreator="@pbakaus"
@@ -79,7 +79,7 @@ import '../styles/testimonials.css';
           <span class="hero-rebuild-logo has-tooltip" data-tooltip="Claude Code"><img src="assets/claude-logo.png" alt="Claude Code" width="22" height="22" loading="lazy"></span>
           <span class="hero-rebuild-logo has-tooltip" data-tooltip="Cursor"><img src="assets/cursor-logo.png" alt="Cursor" width="22" height="22" loading="lazy"></span>
           <span class="hero-rebuild-logo has-tooltip" data-tooltip="Gemini CLI"><img src="assets/gemini-logo.png" alt="Gemini CLI" width="20" height="20" loading="lazy"></span>
-          <span class="hero-rebuild-logo has-tooltip" data-tooltip="VS Code Copilot"><img src="assets/github-logo.png" alt="VS Code Copilot" width="20" height="20" loading="lazy"></span>
+          <span class="hero-rebuild-logo has-tooltip" data-tooltip="GitHub Copilot"><img src="assets/github-copilot-logo.svg" alt="GitHub Copilot" width="20" height="20" loading="lazy"></span>
           <span class="hero-rebuild-logo has-tooltip" data-tooltip="Antigravity"><img src="assets/antigravity-logo.png" alt="Antigravity" width="20" height="20" loading="lazy"></span>
           <span class="hero-rebuild-logo has-tooltip" data-tooltip="OpenCode"><img src="assets/opencode-logo.png" alt="OpenCode" width="20" height="20" loading="lazy"></span>
           <span class="hero-rebuild-logo has-tooltip" data-tooltip="Pi"><img src="assets/pi-logo.svg" alt="Pi" width="20" height="20" loading="lazy"></span>
@@ -619,7 +619,7 @@ import '../styles/testimonials.css';
           </div>
         </div>
 
-        <p class="downloads-rebuild-note">Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other major AI coding harness. <code>install</code> sets up the build for your harness; <code>update</code> pulls the latest. Run <code>npx impeccable skills check</code> to see if you're behind. Installed the Claude Code plugin? Update it from the <code>/plugin</code> menu instead.</p>
+        <p class="downloads-rebuild-note">Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, and every other major AI coding harness. <code>install</code> sets up the build for your harness; <code>update</code> pulls the latest. Run <code>npx impeccable skills check</code> to see if you're behind. Installed the Claude Code plugin? Update it from the <code>/plugin</code> menu instead.</p>
 
         <details class="downloads-rebuild-alts">
           <summary class="downloads-rebuild-alts-summary">

site/pages/live-mode/index.astro

@@ -199,7 +199,7 @@ import '../../styles/live-mode-kinpaku.css';
       <a class="live-mode-pathway" href="/#downloads">
         <span class="live-mode-pathway-kind">Install</span>
         <h3 class="live-mode-pathway-title">Get Impeccable set up</h3>
-        <p class="live-mode-pathway-desc">Install the skill and CLI once, then run <code>/impeccable live</code> from your AI harness. Works with Claude Code, Cursor, Codex, Gemini, and more.</p>
+        <p class="live-mode-pathway-desc">Install the skill and CLI once, then run <code>/impeccable live</code> from your AI harness. Works with Claude Code, Cursor, GitHub Copilot, Codex, Gemini, and more.</p>
         <span class="live-mode-pathway-cta">See the install steps &rarr;</span>
       </a>
     </div>

site/public/assets/github-copilot-logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M23.922 16.992c-.861 1.495-5.859 5.023-11.922 5.023-6.063 0-11.061-3.528-11.922-5.023A.641.641 0 0 1 0 16.736v-2.869a.841.841 0 0 1 .053-.22c.372-.935 1.347-2.292 2.605-2.656.167-.429.414-1.055.644-1.517a10.195 10.195 0 0 1-.052-1.086c0-1.331.282-2.499 1.132-3.368.397-.406.89-.717 1.474-.952 1.399-1.136 3.392-2.093 6.122-2.093 2.731 0 4.767.957 6.166 2.093.584.235 1.077.546 1.474.952.85.869 1.132 2.037 1.132 3.368 0 .368-.014.733-.052 1.086.23.462.477 1.088.644 1.517 1.258.364 2.233 1.721 2.605 2.656a.832.832 0 0 1 .053.22v2.869a.641.641 0 0 1-.078.256ZM12.172 11h-.344a4.323 4.323 0 0 1-.355.508C10.703 12.455 9.555 13 7.965 13c-1.725 0-2.989-.359-3.782-1.259a2.005 2.005 0 0 1-.085-.104L4 11.741v6.585c1.435.779 4.514 2.179 8 2.179 3.486 0 6.565-1.4 8-2.179v-6.585l-.098-.104s-.033.045-.085.104c-.793.9-2.057 1.259-3.782 1.259-1.59 0-2.738-.545-3.508-1.492a4.323 4.323 0 0 1-.355-.508h-.016.016Zm.641-2.935c.136 1.057.403 1.913.878 2.497.442.544 1.134.938 2.344.938 1.573 0 2.292-.337 2.657-.751.384-.435.558-1.15.558-2.361 0-1.14-.243-1.847-.705-2.319-.477-.488-1.319-.862-2.824-1.025-1.487-.161-2.192.138-2.533.529-.269.307-.437.808-.438 1.578v.021c0 .265.021.562.063.893Zm-1.626 0c.042-.331.063-.628.063-.894v-.02c-.001-.77-.169-1.271-.438-1.578-.341-.391-1.046-.69-2.533-.529-1.505.163-2.347.537-2.824 1.025-.462.472-.705 1.179-.705 2.319 0 1.211.175 1.926.558 2.361.365.414 1.084.751 2.657.751 1.21 0 1.902-.394 2.344-.938.475-.584.742-1.44.878-2.497Z"/>
+  <path d="M14.5 14.25a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm-5 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Z"/>
+</svg>

site/styles/designing-kinpaku.css

@@ -69,6 +69,19 @@
   color: var(--ks-kinpaku);
 }
 
+@media (max-width: 760px) {
+  .designing-kinpaku [data-site-header] .site-header-right {
+    position: absolute;
+    top: calc(100% + 12px);
+    left: clamp(16px, 4vw, 24px);
+    right: clamp(16px, 4vw, 24px);
+    z-index: 110;
+    width: auto;
+    flex-basis: auto;
+    margin: 0;
+  }
+}
+
 /* Footer chrome moved to kinpaku-kit.css (.kinpaku-chrome .site-footer). */
 
 /* ============================================================================
@@ -303,14 +316,6 @@
 .designing-kinpaku .designing-loop-wheel {
   display: block;
 }
-/* The wheel is a decorative SVG flourish that sits beside the hero.
-   On narrow viewports it overflows the page (~22px past the right edge);
-   hide it on mobile — the hero copy carries the page without it. */
-@media (max-width: 600px) {
-  .designing-kinpaku .designing-loop-wheel {
-    display: none;
-  }
-}
 .designing-kinpaku .designing-loop-wheel-ring {
   fill: none;
   stroke: var(--ks-kinpaku);
@@ -353,6 +358,87 @@
   color: var(--ks-muted);
 }
 
+@media (max-width: 720px) {
+  .designing-kinpaku .designing-page {
+    padding-top: 32px;
+  }
+
+  .designing-kinpaku .designing-hero {
+    padding: 40px clamp(18px, 5vw, 24px) 56px;
+    row-gap: 0;
+  }
+
+  .designing-kinpaku .designing-page-header {
+    max-width: none;
+    margin: 0;
+    text-align: left;
+  }
+
+  .designing-kinpaku .designing-page-title {
+    font-size: clamp(2.1rem, 12vw, 2.8rem);
+    line-height: 1.02;
+    margin-bottom: 18px;
+  }
+
+  .designing-kinpaku .designing-page-lede {
+    max-width: none;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.6;
+    text-wrap: pretty;
+  }
+
+  .designing-kinpaku .designing-loop-wrap {
+    width: 100%;
+    margin-top: 36px;
+  }
+
+  .designing-kinpaku .designing-loop {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: none;
+    row-gap: 0;
+    column-gap: 0;
+    max-width: none;
+    margin: 0;
+    justify-items: stretch;
+  }
+
+  .designing-kinpaku .designing-loop-node,
+  .designing-kinpaku .designing-loop-node--start,
+  .designing-kinpaku .designing-loop-node--iterate,
+  .designing-kinpaku .designing-loop-node--polish,
+  .designing-kinpaku .designing-loop-node--maintain {
+    grid-column: 1;
+    grid-row: auto;
+    align-items: flex-start;
+    width: 100%;
+    padding: 14px 0;
+    text-align: left;
+    border-top: 1px solid var(--ks-rule);
+  }
+
+  .designing-kinpaku .designing-loop-node:first-of-type {
+    border-top: 0;
+  }
+
+  .designing-kinpaku .designing-loop-name {
+    font-size: 1.45rem;
+  }
+
+  .designing-kinpaku .designing-loop-hint {
+    max-width: none;
+    font-size: 0.9rem;
+  }
+
+  .designing-kinpaku .designing-loop-wheel {
+    display: block;
+    grid-column: 1;
+    grid-row: 1;
+    width: min(56vw, 208px);
+    margin: 0 auto 24px;
+  }
+}
+
 /* ============================================================================
    3b. LOOP TRACK + STICKY PHASE NAV
 
@@ -410,6 +496,7 @@
 
 @media (max-width: 600px) {
   .designing-kinpaku .designing-phasenav {
+    top: 70px;
     gap: 0.7rem;
     padding: 12px 14px;
   }
@@ -451,6 +538,13 @@
   color: var(--ks-code-fg);
 }
 
+@media (max-width: 720px) {
+  .designing-kinpaku .ks-section.designing-phase {
+    padding-left: clamp(18px, 5vw, 24px);
+    padding-right: clamp(18px, 5vw, 24px);
+  }
+}
+
 .designing-kinpaku .designing-phase-commands {
   display: flex;
   flex-wrap: wrap;
@@ -1062,6 +1156,18 @@
   display: none; /* cryptic "03 · 04" step counter — removed */
 }
 
+@media (max-width: 720px) {
+  .designing-kinpaku .designing-polish-band {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .designing-kinpaku .designing-polish-band-cmds {
+    flex-wrap: nowrap;
+    gap: clamp(10px, 4vw, 14px);
+  }
+}
+
 .designing-kinpaku .designing-polish-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1122,6 +1228,14 @@
   gap: 8px;
 }
 
+@media (max-width: 720px) {
+  .designing-kinpaku .designing-maintain .ks-bento-tile,
+  .designing-kinpaku .designing-surfaces .ks-bento-tile {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
 /* Surfaces grounding (skill / CLI / extension). Each tile carries a small
    mono identifier line: a terminal command for the CLI, a browser address
    for the extension. */

site/styles/home-rebuild.css

@@ -176,12 +176,12 @@
   filter: none;
 }
 
-/* VS Code Copilot and Codex CLI logos are dark monochrome glyphs. The row's
+/* GitHub Copilot and Codex CLI logos are dark monochrome glyphs. The row's
    default invert filter makes them readable; removing it on hover would put
    them back to dark-on-dark, which is invisible. Keep them inverted on
    hover — they don't have a brand color to restore. */
-.home-kinpaku .hero-rebuild-logo[data-tooltip="VS Code Copilot"]:hover img,
-.home-kinpaku .hero-rebuild-logo[data-tooltip="VS Code Copilot"]:focus-visible img,
+.home-kinpaku .hero-rebuild-logo[data-tooltip="GitHub Copilot"]:hover img,
+.home-kinpaku .hero-rebuild-logo[data-tooltip="GitHub Copilot"]:focus-visible img,
 .home-kinpaku .hero-rebuild-logo[data-tooltip="Codex CLI"]:hover img,
 .home-kinpaku .hero-rebuild-logo[data-tooltip="Codex CLI"]:focus-visible img {
   filter: grayscale(1) saturate(0) invert(1) brightness(1.18);
@@ -655,7 +655,9 @@
   display: grid;
   gap: 22px;
   margin: 0 0 48px;
+  width: 100%;
   max-width: 600px;
+  min-width: 0;
   text-align: left;
 }
 
@@ -663,6 +665,7 @@
 .downloads-rebuild-cmd-group {
   display: grid;
   gap: 9px;
+  min-width: 0;
 }
 
 .downloads-rebuild-cmd-label {
@@ -685,6 +688,9 @@
   display: flex;
   align-items: center;
   gap: 14px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   padding: 15px 14px 15px 22px;
   background: var(--card-cmd-bg);
   border: 1px solid var(--card-cmd-border);
@@ -961,6 +967,30 @@
   .downloads-rebuild-install { grid-template-columns: 1fr; }
 }
 
+@media (max-width: 520px) {
+  .home-kinpaku .downloads-rebuild-cmd {
+    gap: 10px;
+    padding: 13px 12px 13px 16px;
+  }
+
+  .home-kinpaku .downloads-rebuild-cmd > code {
+    overflow-x: visible;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    font-size: 0.96rem;
+    line-height: 1.35;
+  }
+
+  .home-kinpaku .downloads-rebuild-prompt {
+    font-size: 1.05rem;
+  }
+
+  .home-kinpaku .downloads-rebuild-copy {
+    width: 34px;
+    height: 34px;
+  }
+}
+
 /* ============================================================================
    FOUNDATION CARD VISUALIZATIONS (varied per discipline)
    Foundation cards use the original animated SVG icons (foundation-animations.js

site/styles/kinpaku-kit.css

@@ -792,19 +792,23 @@
     order: 3;
     flex-basis: 100%;
     display: none;
+    grid-template-columns: max-content max-content 1fr;
+    column-gap: 10px;
     flex-direction: column;
     align-items: stretch;
-    gap: 0;
-    margin: 12px calc(-1 * clamp(16px, 4vw, 24px)) -16px;
-    padding: 4px 0 6px;
+    row-gap: 0;
+    margin: 12px 0 -16px;
+    padding: 6px;
     background: oklch(4% 0.004 95);
+    border-radius: 4px;
     border-top: 1px solid oklch(78% 0.12 82 / 0.18);
   }
   [data-site-header][data-nav-open="true"] .site-header-right {
-    display: flex;
+    display: grid;
   }
 
   .kinpaku-chrome .site-header-nav {
+    grid-column: 1 / -1;
     flex-direction: column;
     align-items: stretch;
     gap: 0;
@@ -832,9 +836,15 @@
     display: block;
   }
 
+  .kinpaku-chrome .theme-toggle {
+    grid-column: 1;
+    margin: 12px 0 6px;
+  }
+
   .kinpaku-chrome .site-header-github {
+    grid-column: 2;
     align-self: flex-start;
-    margin: 12px clamp(16px, 4vw, 24px) 6px;
+    margin: 12px 0 6px;
   }
 
   /* sub-pages.css hides the github star count label on mobile. The drawer

site/styles/light-mode.css

@@ -111,6 +111,17 @@ html.light .kinpaku-chrome .site-header-github:hover {
   background: oklch(52% 0.11 188 / 0.08);
 }
 
+@media (max-width: 760px) {
+  html.light .kinpaku-chrome [data-site-header] .site-header-right {
+    background: var(--ks-lacquer-raised);
+    border-top-color: var(--ks-rule);
+  }
+
+  html.light .kinpaku-chrome [data-site-header] .site-header-nav a[aria-current="page"] {
+    border-bottom: 0;
+  }
+}
+
 html.light .kinpaku-chrome .site-footer {
   background: var(--ks-lacquer-deep);
 }