From cec76bb681226edc18a4661be2bf2362abc4a7e6 Mon Sep 17 00:00:00 2001
From: Abdul Wahab <32850166+abdulwahabone@users.noreply.github.com>
Date: Wed, 8 Jul 2026 05:21:15 +0500
Subject: [PATCH] Polish website spacing and control alignment (#331)

* Fix designing live context alignment

* Center dark theme toggle icon

* Tighten designing avoid list spacing

* Tighten remaining site marker spacing
---
 site/pages/tutorials/index.astro  |  2 +-
 site/styles/designing-kinpaku.css | 26 +++++++++++++++++++-------
 site/styles/docs-kinpaku.css      |  4 ++--
 site/styles/docs-visuals.css      | 15 ++++++++++++++-
 site/styles/light-mode.css        |  4 ++++
 5 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/site/pages/tutorials/index.astro b/site/pages/tutorials/index.astro
index 63e3f73ab..bc7f1cc3d 100644
--- a/site/pages/tutorials/index.astro
+++ b/site/pages/tutorials/index.astro
@@ -38,7 +38,7 @@ const tutorials = (await getCollection('tutorials'))
     .tutorials-index-header { margin-bottom: 2rem; }
     .tutorials-list { display: flex; flex-direction: column; gap: 1rem; }
     .tutorial-card {
-      display: flex; gap: 1.25rem; align-items: flex-start;
+      display: flex; gap: 0.75rem; align-items: flex-start;
       padding: 1.25rem; border-radius: 8px; border: 1px solid var(--color-mist);
       text-decoration: none; color: inherit;
       transition: border-color 0.15s ease;
diff --git a/site/styles/designing-kinpaku.css b/site/styles/designing-kinpaku.css
index 8ca679ba4..aa984259c 100644
--- a/site/styles/designing-kinpaku.css
+++ b/site/styles/designing-kinpaku.css
@@ -990,8 +990,13 @@
   cursor: pointer;
 }
 .designing-kinpaku .docs-viz-live-ctx-discard {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 28px;
   color: var(--ks-muted);
-  padding: 4px 6px;
+  padding: 0;
+  line-height: 1;
 }
 .designing-kinpaku .docs-viz-live-ctx-accept {
   background: var(--ks-kinpaku);
@@ -1009,7 +1014,7 @@
   width: 1px;
   height: 14px;
   background: var(--ks-rule);
-  margin: 0 4px;
+  margin: 0 0 0 4px;
 }
 /* Global picker bar — mirrors the real Impeccable live bar: carved-tile mark,
    Pick/Insert/Detect/DESIGN.md controls, exit. Lacquer-deep fill + 1.5px gold
@@ -1541,8 +1546,8 @@
 }
 .designing-kinpaku .designing-avoid li {
   display: grid;
-  grid-template-columns: 28px 1fr;
-  gap: 14px;
+  grid-template-columns: 20px 1fr;
+  gap: 12px;
   padding: 22px 0;
   background: transparent;
   border: 0;
@@ -1553,11 +1558,18 @@
   border-bottom: 0;
 }
 .designing-kinpaku .designing-avoid-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background: oklch(58% 0.15 35 / 0.1);
+  border-radius: 50%;
   color: var(--ks-vermilion);
   font-family: var(--ks-mono);
-  font-size: 1.2rem;
-  line-height: 1.4;
-  text-align: center;
+  font-size: 0.8rem;
+  font-weight: 700;
+  line-height: 1;
 }
 .designing-kinpaku .designing-avoid-title {
   display: block;
diff --git a/site/styles/docs-kinpaku.css b/site/styles/docs-kinpaku.css
index d734f8763..f31b66572 100644
--- a/site/styles/docs-kinpaku.css
+++ b/site/styles/docs-kinpaku.css
@@ -429,9 +429,9 @@ html.light .docs-kinpaku {
 }
 
 .docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-step {
-  grid-template-columns: minmax(34px, auto) minmax(0, 1fr);
+  grid-template-columns: minmax(28px, auto) minmax(0, 1fr);
   grid-template-rows: auto auto auto;
-  column-gap: 16px;
+  column-gap: 12px;
   row-gap: 9px;
   padding: 18px 20px 20px;
 }
diff --git a/site/styles/docs-visuals.css b/site/styles/docs-visuals.css
index 231b687f6..985391a3e 100644
--- a/site/styles/docs-visuals.css
+++ b/site/styles/docs-visuals.css
@@ -221,7 +221,20 @@
   width: 1px;
   height: 14px;
   background: var(--color-mist);
-  margin: 0 2px;
+  margin: 0 0 0 2px;
+}
+
+.docs-viz-live-ctx-discard {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: var(--color-ash);
+  font-size: 12px;
+  line-height: 1;
 }
 
 .docs-viz-live-ctx-accept {
diff --git a/site/styles/light-mode.css b/site/styles/light-mode.css
index 62d43208c..b7372d74a 100644
--- a/site/styles/light-mode.css
+++ b/site/styles/light-mode.css
@@ -44,6 +44,10 @@
   display: block;
 }
 
+.theme-toggle .theme-toggle-icon--dark {
+  transform: translate(-1.5px, 1.5px);
+}
+
 /* Three-way switcher: show the icon for the active preference (auto / light /
    dark), not the resolved theme. Keyed on data-theme-pref so the icon reflects
    that "auto" is its own state rather than collapsing into whatever the OS picked. */