グローバルスタイルのリファクタリング (#205)

* style(typography.scss): adjust text-underline-offset for better visual balance
style(variables.scss): refine color definitions for improved consistency
style(body.scss): add padding-right for body element on larger screens to prevent layout shift
style(wrapper.scss): reduce max-width of container for better responsiveness

* style(heading.module.scss): change background color from dark green to accent color for better visual consistency
style(works-images.module.scss): remove ToDo comment about breakpoint constants and add comment in Japanese for clarity
style(index.module.scss): update grid column min width from 15rem to 320px for improved responsiveness and change border color to accent color for consistency

Author: peaks-and-valleys

client/src/components/scss/heading.module.scss

@@ -1,7 +1,7 @@
 .heading {
   padding-block: var(--spacing-s);
   padding-inline: var(--spacing-m);
-  background-color: var(--color-dark-green-1);
+  background-color: var(--color-accent-1);
   color: var(--color-white-1);
   border-radius: 8px;
 

client/src/components/scss/works-images.module.scss

@@ -8,12 +8,11 @@
     border-radius: 4px;
   }
 
+  /* 標準の CSS ではメディアクエリのブレイクポイントに変数は使えないので、妥協して直接定義した */
   @media screen and (max-width: 639.8px) {
     grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
   }
   @media screen and (min-width: 640px) {
     grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
   }
-  /* ToDo: 画面幅ブレイクポイントの定数の定義 */
-
 }

client/src/pages/scss/index.module.scss

@@ -1,26 +1,21 @@
 .exhibitionList {
   ul {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
     gap: var(--spacing-s);
 
     li {
       padding-block: var(--spacing-s);
       padding-inline: var(--spacing-m);
-      border: 1px solid var(--color-dark-green-2);
+      border: 1px solid var(--color-accent-2);
       border-radius: 8px;
 
-      a {
-        color: var(--color-dark-green-1);
-      }
-
       h3 {
         font-size: var(--font-size-xl);
         margin-block: calc(var(--spacing-s) - var(--half-leading));
       }
 
       p {
-        color: var(--color-dark-green-2);
         font-size: var(--font-size-s);
         margin-block: calc(var(--spacing-xxs) - var(--half-leading));
       }

client/src/scss/foundation/_typography.scss

@@ -6,7 +6,7 @@ html {
   color: var(--color-text);
   background-color: var(--color-background);
   letter-spacing: 0.008em;
-  text-underline-offset: calc(var(--half-leading) / 1.5);
+  text-underline-offset: calc(var(--half-leading) / 2);
 }
 
 h1,
@@ -17,10 +17,6 @@ h4 {
 }
 
 a {
+  color: var(--color-accent-1);
   text-decoration: none;
-  @media (hover) {
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }

client/src/scss/foundation/_variables.scss

@@ -2,13 +2,14 @@
   /* Color palette */
 
   --color-black-1: oklch(0.25 0.005 150);
-  --color-black-2: oklch(0.29 0.005 150);
-  --color-white-1: oklch(0.96 0.005 150);
-  --color-white-2: oklch(0.92 0.005 150);
+  --color-black-2: oklch(0.3 0.005 150);
+  --color-white-1: oklch(0.97 0.005 150);
+  --color-white-2: oklch(0.91 0.005 150);
 
-  --color-light-green-1: oklch(0.95 0.08 150);
-  --color-dark-green-1: oklch(0.35 0.08 150);
-  --color-dark-green-2: oklch(0.4 0.07 150);
+  --color-green-1: oklch(0.35 0.08 150);
+  --color-green-2: oklch(0.5 0.08 150);
+  --color-green-3: oklch(0.6 0.08 150);
+  --color-green-4: oklch(0.8 0.08 150);
 
   --color-light-pink-1: oklch(0.95 0.08 320);
   --color-dark-pink-1: oklch(0.35 0.08 320);
@@ -17,7 +18,8 @@
   /* Color definitions */
   --color-text: var(--color-black-1);
   --color-background: var(--color-white-1);
-  --color-accent-primary: var(--color-dark-green-1);
+  --color-accent-1: var(--color-green-1);
+  --color-accent-2: var(--color-green-2);
 
   /* Font sizes */
   --font-size-base: 18px;

client/src/scss/layout/_body.scss

@@ -1,4 +1,7 @@
-/* Gutter for scrollbar */
-body {
-  padding-inline-start: calc(100vw - 100%);
+/* スクロールバー表示時に body 要素にパディングを設定することにより、レイアウトのズレを防ぐ。
+画面幅が小さいときは、左右に余白がないため不要 */
+@media screen and (min-width: 1024px) {
+  body {
+    padding-right: calc(100vw - 100%);
+  }
 }

client/src/scss/layout/_wrapper.scss

@@ -4,7 +4,7 @@
 
   .container {
     width: 100%;
-    max-width: 1080px;
+    max-width: 1024px;
     padding-inline: var(--spacing-m);
   }
 }