From 68dde60151b750e16af3b50027b97535265d15d4 Mon Sep 17 00:00:00 2001
From: Hare <hare.02.k@gmail.com>
Date: Sat, 7 Sep 2024 02:38:47 +0900
Subject: [PATCH] feat: add codeblock style

---
 src/lib/blog.scss | 88 +++++++++++++++++++++++++++++++++++++----------
 1 file changed, 69 insertions(+), 19 deletions(-)

diff --git a/src/lib/blog.scss b/src/lib/blog.scss
index 4c6cfcc..95a98c9 100644
--- a/src/lib/blog.scss
+++ b/src/lib/blog.scss
@@ -1,30 +1,34 @@
 .document {
     --color-text: #ffffff;
-    --color-concept: hsl(39, 100%, 25%, 0.5);
+    --color-concept: hsla(40, 100%, 90%, 0.5);
     --color-concept-hsl: 39, 100%, 25%;
     --color-outline: #ffffff40;
     width: 100%;
-    * {
-        color: var(--color-text);
-    }
+
+    color: var(--color-text);
+
     h1 {
         position: relative;
         width: auto;
         font-size: 2rem;
         margin-bottom: 0.5rem;
     }
+
     hr {
         padding: 0;
         margin: 0;
         border: none;
         border-top: 1px solid var(--color-outline);
     }
-    > *:not(h1, hr) {
+
+    >*:not(h1, hr) {
         margin-left: 2rem;
     }
+
     h2 {
         font-size: 1.5rem;
         position: relative;
+
         &::before {
             content: '#';
             position: absolute;
@@ -34,30 +38,38 @@
             color: rgb(131, 131, 131);
         }
     }
+
     h3 {
         font-size: 1.25rem;
     }
+
     h4 {
         font-size: 1.05rem;
     }
+
     hr {
         border: none;
         border-top: 1px solid var(--color-outline);
     }
+
     img {
         max-height: 300px;
     }
+
     a {
+        color: var(--color-text);
         position: relative;
         display: inline-block;
         transform: translate(0, 0);
         text-shadow: 0 0 1rem hsl(var(--color-concept-hsl));
         transition: 0.2s ease-out;
         font-weight: normal;
+
         &:hover {
             transform: translate(0, -0.1rem);
         }
     }
+
     blockquote {
         position: relative;
         font-size: 1.1rem;
@@ -65,6 +77,7 @@
         padding: 0;
         padding-left: 1rem;
         color: rgb(162, 162, 162);
+
         &::before {
             content: '“';
             position: absolute;
@@ -74,6 +87,7 @@
             color: rgb(131, 131, 131);
         }
     }
+
     warn {
         position: relative;
         display: block;
@@ -81,9 +95,10 @@
         background-image: linear-gradient(to right, var(--color-outline), transparent 75%);
         background-origin: border-box;
         box-shadow: inset 0 0 0 100vh var(--background-color);
-        text-shadow: 0 0 1rem hsl(var(--color-concept-hsl),1);
+        text-shadow: 0 0 1rem hsl(var(--color-concept-hsl), 1);
         border: 1px solid transparent;
         border-radius: 0.5rem;
+
         &::before {
             content: 'note:warn';
             position: relative;
@@ -95,19 +110,42 @@
             text-shadow: 0 0 1rem red;
         }
     }
+
     pre {
         font-family: monospace;
+        position: relative;
+        display: block;
         margin-top: 0.75rem;
         margin-bottom: 0.75rem;
-        white-space: pre-wrap;
-    }
-    code {
-        display: inline-block;
-        padding: 0.2rem;
-        background: rgba(255, 255, 255, 0.25);
-        border-radius: 0.2rem;
-        font-family: monospace;
+        border: 2px solid #ffffff40;
+        border-radius: 0.5rem;
+        overflow-x: scroll;
+
+        &::-webkit-scrollbar {
+            border-radius: 10px;
+            height: 10px;
+            width: 8px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: #999;
+            border-radius: 10px;
+        }
+
+        &::-webkit-scrollbar-track {
+            border-radius: 10px;
+        }
+
+        >code {
+            display: inline-block;
+            padding: 0.5rem;
+            border-radius: 0.6rem;
+            font-family: monospace;
+            box-sizing: border-box;
+            min-width: 100%;
+        }
     }
+
     details {
         position: relative;
         display: block;
@@ -115,7 +153,8 @@
         transition: 0.2s ease-out;
         transition-property: height;
         padding-inline-start: 0.1rem;
-        > summary {
+
+        >summary {
             position: relative;
             border-radius: 0.5rem;
             list-style: '＋ ' outside;
@@ -123,36 +162,43 @@
             padding: 0.2rem;
             background: linear-gradient(to right, rgba(255, 255, 255, 0.25), transparent 200px);
             cursor: pointer;
+
             &:hover {
                 text-shadow: 0 0 0.25rem rgb(255, 255, 255);
             }
         }
-        > p {
+
+        >p {
             margin-block-start: 0.5rem;
             margin-block-end: 0.5rem;
             margin-left: 1rem;
             display: none;
         }
+
         &[open] {
-            > summary {
+            >summary {
                 list-style: '－ ' outside;
             }
-            > p {
+
+            >p {
                 animation: detailsIn 0.5s ease;
                 display: block;
             }
         }
     }
+
     @keyframes detailsIn {
         0% {
             opacity: 0;
             transform: translateY(-10px);
         }
+
         100% {
             opacity: 1;
             transform: none;
         }
     }
+
     table {
         border-spacing: 0;
         border: none;
@@ -160,22 +206,26 @@
         border-radius: 10px;
         overflow: hidden;
         box-shadow: 0 0 0.5rem hsl(var(--color-concept-hsl), 0.5);
+
         thead {
             background-color: rgba(0, 0, 0, 0.1);
             color: #fff;
         }
+
         tr {
             &:nth-child(2n) {
                 background-color: #ffffff0d;
             }
         }
+
         td,
         th {
             padding: 0.5em;
             border-left: 1px solid var(--color-outline);
+
             &:first-child {
                 border-left: none;
             }
         }
     }
-}
+}
\ No newline at end of file