From ea3e66b9844fbbdbfdbb55b81d4ec6ec3181234b Mon Sep 17 00:00:00 2001 From: Abdul Wahab <32850166+abdulwahabone@users.noreply.github.com> Date: Mon, 1 Jun 2026 12:20:18 +0900 Subject: [PATCH] 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 | 4 +- site/pages/index.astro | 8 +- site/pages/live-mode/index.astro | 2 +- site/public/assets/github-copilot-logo.svg | 4 + site/styles/designing-kinpaku.css | 130 +++++++++++++++++++-- site/styles/home-rebuild.css | 36 +++++- site/styles/kinpaku-kit.css | 20 +++- site/styles/light-mode.css | 11 ++ 8 files changed, 192 insertions(+), 23 deletions(-) create mode 100644 site/public/assets/github-copilot-logo.svg diff --git a/site/content/tutorials/getting-started.md b/site/content/tutorials/getting-started.md index f7b17f23b..8ad43f14c 100644 --- a/site/content/tutorials/getting-started.md +++ b/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). diff --git a/site/pages/index.astro b/site/pages/index.astro index 182027b25..63c328695 100644 --- a/site/pages/index.astro +++ b/site/pages/index.astro @@ -19,14 +19,14 @@ import '../styles/testimonials.css'; Claude Code - + @@ -619,7 +619,7 @@ import '../styles/testimonials.css'; -

Works with Cursor, Claude Code, Gemini CLI, Codex CLI, and every other major AI coding harness. install sets up the build for your harness; update pulls the latest. Run npx impeccable skills check to see if you're behind. Installed the Claude Code plugin? Update it from the /plugin menu instead.

+

Works with Cursor, Claude Code, GitHub Copilot, Gemini CLI, Codex CLI, and every other major AI coding harness. install sets up the build for your harness; update pulls the latest. Run npx impeccable skills check to see if you're behind. Installed the Claude Code plugin? Update it from the /plugin menu instead.

diff --git a/site/pages/live-mode/index.astro b/site/pages/live-mode/index.astro index 17151da2c..b16360ae7 100644 --- a/site/pages/live-mode/index.astro +++ b/site/pages/live-mode/index.astro @@ -199,7 +199,7 @@ import '../../styles/live-mode-kinpaku.css'; Install

Get Impeccable set up

-

Install the skill and CLI once, then run /impeccable live from your AI harness. Works with Claude Code, Cursor, Codex, Gemini, and more.

+

Install the skill and CLI once, then run /impeccable live from your AI harness. Works with Claude Code, Cursor, GitHub Copilot, Codex, Gemini, and more.

See the install steps → diff --git a/site/public/assets/github-copilot-logo.svg b/site/public/assets/github-copilot-logo.svg new file mode 100644 index 000000000..94829d8a1 --- /dev/null +++ b/site/public/assets/github-copilot-logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/site/styles/designing-kinpaku.css b/site/styles/designing-kinpaku.css index 602356fb8..b0e40e461 100644 --- a/site/styles/designing-kinpaku.css +++ b/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. */ diff --git a/site/styles/home-rebuild.css b/site/styles/home-rebuild.css index 55d7624d7..0d0dd4519 100644 --- a/site/styles/home-rebuild.css +++ b/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 diff --git a/site/styles/kinpaku-kit.css b/site/styles/kinpaku-kit.css index e86734276..194f8d58e 100644 --- a/site/styles/kinpaku-kit.css +++ b/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 diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css index 0be289bf2..b83c1d603 100644 --- a/site/styles/light-mode.css +++ b/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); }