From 6ffd7064bf7d988a49f1cdf582b4b1bcba0dd9b1 Mon Sep 17 00:00:00 2001
From: EmptyWork <22065214+EmptyWork@users.noreply.github.com>
Date: Sat, 5 Jul 2025 19:48:32 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20`=5Farticle.scss`=20=E2=80=94=20adjust?=
 =?UTF-8?q?=20non-scrolling=20code=20block?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/pages/_article.scss | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/assets/scss/pages/_article.scss b/src/assets/scss/pages/_article.scss
index b14fdfd..c924c57 100644
--- a/src/assets/scss/pages/_article.scss
+++ b/src/assets/scss/pages/_article.scss
@@ -185,12 +185,26 @@
     samp {
       display: inline-block;
       align-items: center;
-      background-color: var(--clr-black);
+      background-color: hsl(var(--_hs) 10%);
       color: var(--clr-white);
       padding: 0.2em 0.4em;
       border-radius: 0.3em;
     }
 
+    pre {
+      @include mix.breakpoint-down("small") {
+        &::after {
+          content: "";
+          position: absolute;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          background: linear-gradient(90deg, transparent, hsl(var(--_hs) 6%));
+          width: 2em;
+        }
+      }
+    }
+
     a {
       --_normal-color: var(--clr-accent-light);
       --_hover-color: var(--clr-white);
@@ -236,7 +250,7 @@
 
   pre {
     border: 0.1rem solid var(--_background);
-    background-color: hsl(0, 3%, 12%);
+    background-color: hsl(var(--_hs) 10%);
     border-radius: 0.5rem;
     padding: 1rem;
     white-space: pre;
@@ -319,12 +333,16 @@
     code {
       color: var(--clr-white);
       box-shadow: none;
-      background-color: transparent;
+      width: 100%;
 
       .hljs-comment,
       .hljs-meta {
         color: hsl(230, 100%, 89%, 0.9)
       }
+
+      @include mix.breakpoint-down('small') {
+        overflow-x: auto;
+      }
     }
   }