From f3a5e69694e5daa6677c29ac680c500ca78854ce Mon Sep 17 00:00:00 2001
From: enumura1 <akirayuto0718@gmail.com>
Date: Sun, 24 May 2026 15:13:16 +0900
Subject: [PATCH] Tighten homepage hero preview

---
 website/src/pages/index.module.css | 55 ++++++++++++++++--------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css
index a177e7c..fa0d22c 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -3,7 +3,7 @@
   min-height: calc(100vh - var(--ifm-navbar-height));
   display: grid;
   align-items: center;
-  padding: clamp(2.6rem, 6vh, 4.5rem) 0;
+  padding: clamp(2.1rem, 4.8vh, 3.6rem) 0;
   overflow: hidden;
   background:
     radial-gradient(ellipse 60% 50% at 85% 10%, var(--py-sql-cleaner-hero-accent), transparent 65%),
@@ -29,7 +29,7 @@
 .heroGrid {
   position: relative;
   display: grid;
-  gap: 6.4rem;
+  gap: 5.2rem;
   grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
   align-items: center;
 }
@@ -87,7 +87,7 @@
 
 .preview {
   position: relative;
-  padding: 1.1rem 1.15rem 1.2rem 1.45rem;
+  padding: 0.95rem 1rem 1rem 1.15rem;
   overflow: hidden;
   box-shadow:
     0 36px 70px -28px var(--py-sql-cleaner-shadow),
@@ -103,9 +103,9 @@
 .workflowNode {
   position: relative;
   display: grid;
-  gap: 0.7rem;
+  gap: 0.55rem;
   min-width: 0;
-  padding: 1rem 1.1rem 1.1rem 1.35rem;
+  padding: 0.82rem 0.95rem 0.9rem 1rem;
   border: 1px solid var(--py-sql-cleaner-code-border);
   border-radius: 10px;
   background:
@@ -137,7 +137,7 @@
   display: flex;
   gap: 0.4rem;
   align-items: center;
-  padding: 0.5rem 0.7rem;
+  padding: 0.42rem 0.62rem;
   border-bottom: 1px solid var(--py-sql-cleaner-code-border);
   background: rgb(255 255 255 / 3%);
 }
@@ -178,13 +178,13 @@
 }
 
 .runTerminal .heroPrompt {
-  padding: 0.7rem 0.85rem;
+  padding: 0.58rem 0.72rem;
   margin: 0;
 }
 
 .workflowNodeHeader {
   display: flex;
-  gap: 0.7rem;
+  gap: 0.62rem;
   align-items: center;
   min-width: 0;
 }
@@ -198,7 +198,7 @@
 .workflowNodeHeader span {
   color: var(--py-sql-cleaner-terminal-prompt);
   font-family: var(--ifm-font-family-monospace);
-  font-size: 0.7rem;
+  font-size: 0.66rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
@@ -210,7 +210,7 @@
   color: var(--py-sql-cleaner-code-text);
   font-family: var(--py-sql-cleaner-font-display);
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   letter-spacing: -0.005em;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -219,9 +219,9 @@
 .workflowConnector {
   position: relative;
   width: 2px;
-  height: 2.2rem;
+  height: 1.55rem;
   justify-self: center;
-  margin: 0.3rem 0 0.5rem;
+  margin: 0.22rem 0 0.38rem;
   background-image: linear-gradient(180deg, var(--py-sql-cleaner-terminal-prompt) 50%, transparent 0);
   background-position: 0 0;
   background-size: 2px 0.5rem;
@@ -251,8 +251,8 @@
   display: inline-grid;
   flex: 0 0 auto;
   place-items: center;
-  width: 2.1rem;
-  height: 2.1rem;
+  width: 1.9rem;
+  height: 1.9rem;
   border: 1px solid var(--py-sql-cleaner-code-border);
   border-radius: 8px;
   color: var(--py-sql-cleaner-code-text);
@@ -280,7 +280,8 @@
 
 .heroAfterGrid {
   display: grid;
-  gap: 0.7rem;
+  grid-template-columns: minmax(10rem, 0.68fr) minmax(0, 1.32fr);
+  gap: 0.65rem;
 }
 
 .heroAfterPane {
@@ -292,9 +293,9 @@
 
 .heroAfterPaneLabel {
   display: flex;
-  gap: 0.55rem;
+  gap: 0.5rem;
   align-items: center;
-  padding: 0.45rem 0.7rem;
+  padding: 0.38rem 0.58rem;
   border-bottom: 1px solid var(--py-sql-cleaner-code-border);
   background: rgb(255 255 255 / 3%);
   font-size: 0.7rem;
@@ -302,8 +303,8 @@
 }
 
 .heroAfterPaneLabel .fileTypeIcon {
-  width: 1.45rem;
-  height: 1.45rem;
+  width: 1.32rem;
+  height: 1.32rem;
   font-size: 0.5rem;
 }
 
@@ -316,13 +317,13 @@
   border: 0;
   padding: 0;
   color: inherit;
-  font-size: 0.72rem;
+  font-size: 0.68rem;
 }
 
 .heroPrompt {
   margin: 0.1rem 0;
-  font-size: 0.86rem;
-  line-height: 1.55;
+  font-size: 0.8rem;
+  line-height: 1.48;
 }
 
 .heroPrompt code {
@@ -354,12 +355,12 @@
 
 .syntaxBlock pre {
   margin: 0;
-  padding: 0.78rem 0.9rem;
+  padding: 0.64rem 0.75rem;
   border-radius: 8px;
   background: transparent;
   font-family: var(--ifm-font-family-monospace);
-  font-size: 0.74rem;
-  line-height: 1.55;
+  font-size: 0.7rem;
+  line-height: 1.48;
   overflow-x: auto;
   color: var(--py-sql-cleaner-code-text);
   white-space: pre;
@@ -1003,6 +1004,10 @@
     grid-template-columns: 1fr;
   }
 
+  .heroAfterGrid {
+    grid-template-columns: 1fr;
+  }
+
   .previewSplit::before {
     display: none;
   }