From f86bea13cd30ead1c5c026224100328edb71bf71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=BE=90=E6=B6=9B?= <midnite@outlook.com>
Date: Wed, 1 Jan 2025 08:37:12 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=95=99=E7=99=BD=E7=9A=84?=
 =?UTF-8?q?=E5=B0=BA=E5=AF=B8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ColorPicker.module.css                  |  2 +-
 .../harmonies/HarmonyPreview.module.css                |  1 +
 src/pages/Harmonies.module.css                         |  4 +++-
 src/variables.css                                      | 10 +++++-----
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/ColorPicker.module.css b/src/components/ColorPicker.module.css
index 61f0678..e9d553d 100644
--- a/src/components/ColorPicker.module.css
+++ b/src/components/ColorPicker.module.css
@@ -4,7 +4,7 @@
     display: flex;
     flex-direction: column;
     align-items: stretch;
-    gap: var(--spacing-m);
+    gap: var(--spacing-xs);
     .color_preview {
       aspect-ratio: 4 / 1;
     }
diff --git a/src/page-components/harmonies/HarmonyPreview.module.css b/src/page-components/harmonies/HarmonyPreview.module.css
index 6bee54a..80b5873 100644
--- a/src/page-components/harmonies/HarmonyPreview.module.css
+++ b/src/page-components/harmonies/HarmonyPreview.module.css
@@ -5,6 +5,7 @@
     display: flex;
     flex-direction: column;
     h5 {
+      padding-block: var(--spacing-m);
       font-size: var(--font-size-m);
     }
     .color_blocks {
diff --git a/src/pages/Harmonies.module.css b/src/pages/Harmonies.module.css
index fba500b..941e88a 100644
--- a/src/pages/Harmonies.module.css
+++ b/src/pages/Harmonies.module.css
@@ -8,6 +8,7 @@
     display: flex;
     flex-direction: row;
     align-items: stretch;
+    gap: var(--spacing-m);
   }
   .function_side {
     display: flex;
@@ -18,9 +19,10 @@
       display: flex;
       flex-direction: column;
       align-items: stretch;
-      gap: var(--spacing-xs);
+      gap: var(--spacing-s);
     }
     h5 {
+      padding-block: var(--spacing-m);
       font-size: var(--font-size-m);
     }
   }
diff --git a/src/variables.css b/src/variables.css
index 9bbe29b..6d44a4a 100644
--- a/src/variables.css
+++ b/src/variables.css
@@ -75,11 +75,11 @@
     --spacing-n: calc(var(--spacing) * 0);
     --spacing-xxs: calc(var(--spacing) * 1);
     --spacing-xs: calc(var(--spacing) * 2);
-    --spacing-s: calc(var(--spacing) * 3);
-    --spacing-m: calc(var(--spacing) * 4);
-    --spacing-l: calc(var(--spacing) * 6);
-    --spacing-xl: calc(var(--spacing) * 8);
-    --spacing-xxl: calc(var(--spacing) * 12);
+    --spacing-s: calc(var(--spacing) * 4);
+    --spacing-m: calc(var(--spacing) * 8);
+    --spacing-l: calc(var(--spacing) * 12);
+    --spacing-xl: calc(var(--spacing) * 16);
+    --spacing-xxl: calc(var(--spacing) * 20);
 
     --border-radius: 2px;
     --border-radius-n: calc(var(--border-radius) * 0);