chore: udpate code blocks style

1 files changed, 135 insertions, 139 deletions

diff --git a/src/components/molecules/layout/code.module.scss b/src/components/molecules/layout/code.module.scss
index 19d1d70..2855fc2 100644
--- a/src/components/molecules/layout/code.module.scss
+++ b/src/components/molecules/layout/code.module.scss
@@ -4,11 +4,10 @@
 .wrapper {
   :global {
     .code-toolbar {
-      --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)});
-      --toolbar-height: #{fun.convert-px(90)};
+      --toolbar-height: #{fun.convert-px(100)};
 
       position: relative;
-      margin-top: calc(var(--toolbar-height) + var(--spacing-md));
+      margin-top: calc(var(--toolbar-height) + var(--spacing-sm));
 
       @include mix.media("screen") {
         @include mix.dimensions("2xs") {
@@ -17,9 +16,9 @@
       }
 
       .toolbar {
-        display: grid;
-        grid-template-columns: max-content minmax(0, 1fr);
-        justify-items: end;
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
         width: 100%;
         height: var(--toolbar-height);
         position: absolute;
@@ -28,72 +27,168 @@
         right: 0;
         background: var(--color-bg-tertiary);
         border: fun.convert-px(1) solid var(--color-border);
-
-        @include mix.media("screen") {
-          @include mix.dimensions("2xs") {
-            display: flex;
-            flex-flow: row wrap;
-          }
-        }
       }
 
       .toolbar-item {
         display: flex;
         align-items: center;
+        margin: 0 var(--spacing-2xs);
       }
 
       .toolbar-item:nth-child(1) {
-        grid-column: 1;
-        grid-row: 1 / 3;
-        margin-right: auto;
+        flex: 0 0 100%;
+        justify-content: center;
+        margin: 0 auto 0 0;
         padding: 0 var(--spacing-sm);
         background: var(--color-bg-code);
-        border-right: fun.convert-px(1) solid var(--color-border);
+        border-bottom: fun.convert-px(1) solid var(--color-border);
         color: var(--color-primary-darker);
         font-size: var(--font-size-sm);
         font-weight: 600;
+
+        @include mix.media("screen") {
+          @include mix.dimensions("2xs") {
+            flex: 0 0 auto;
+            justify-content: left;
+            border-bottom: none;
+            border-right: fun.convert-px(1) solid var(--color-border);
+          }
+        }
       }
+    }
 
-      .toolbar-item:nth-child(2) {
-        grid-column: 2;
-        grid-row: 1;
-        margin: 0 var(--spacing-2xs);
+    .copy-to-clipboard-button,
+    .prism-color-scheme-button {
+      display: block;
+      padding: fun.convert-px(3) var(--spacing-xs);
+      background: var(--color-bg);
+      border: 0.4ex solid var(--color-primary);
+      border-radius: fun.convert-px(30);
+      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+          var(--color-shadow),
+        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
+          var(--color-shadow),
+        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
+          var(--color-shadow);
+      color: var(--color-primary);
+      font-size: var(--font-size-sm);
+      font-weight: 600;
+      transition: all 0.35s ease-in-out 0s;
+
+      &:hover,
+      &:focus {
+        transform: translateX(#{fun.convert-px(-2)})
+          translateY(#{fun.convert-px(-2)});
+        box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
+            var(--color-shadow-light),
+          fun.convert-px(1) fun.convert-px(2) fun.convert-px(2)
+            fun.convert-px(-2) var(--color-shadow-light),
+          fun.convert-px(3) fun.convert-px(4) fun.convert-px(5)
+            fun.convert-px(-4) var(--color-shadow-light),
+          fun.convert-px(4) fun.convert-px(7) fun.convert-px(8)
+            fun.convert-px(-3) var(--color-shadow-light);
       }
 
-      .toolbar-item:nth-child(3) {
-        grid-column: 2;
-        grid-row: 2;
-        margin: 0 var(--spacing-2xs);
+      &:focus {
+        text-decoration: underline var(--color-primary) fun.convert-px(3);
+      }
+
+      &:active {
+        text-decoration: none;
+        transform: translateY(#{fun.convert-px(2)});
+        box-shadow: 0 0 0 0 var(--color-shadow);
       }
     }
 
     pre[class*="language-"] {
-      max-height: max(30vw, fun.convert-px(300));
-      margin: var(--spacing-md) 0;
-      padding: 0;
+      --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs));
+
       position: relative;
-      background: var(--color-bg-secondary);
-      color: var(--color-fg);
-      border: fun.convert-px(1) solid var(--color-border);
+      overflow: auto;
+      border: fun.convert-px(1) solid var(--color-border-light);
+      hyphens: none;
+      tab-size: 4;
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+
+      &.command-line {
+        --gutter-size: 19ch;
+        padding-left: var(--gutter-size-with-spacing);
+      }
+
+      &.line-numbers {
+        --gutter-size: 6ch;
 
-      > code {
+        counter-reset: lineNumber;
+        padding-left: var(--gutter-size-with-spacing);
+      }
+
+      code {
         display: block;
-        padding: var(--spacing-xs) 0 var(--spacing-xs)
-          calc(var(--gutter-size) + var(--spacing-xs));
+        padding: var(--spacing-xs) 0;
+        position: relative;
       }
 
       .line-numbers-rows,
       .command-line-prompt {
+        display: block;
         width: var(--gutter-size);
-        min-height: 100%;
-        padding: var(--spacing-xs) var(--spacing-2xs);
+        padding: var(--spacing-xs) 0;
         position: absolute;
         top: 0;
-        left: 0;
-        pointer-events: none;
-        user-select: none;
+        left: calc(var(--gutter-size-with-spacing) * -1);
         background: var(--color-bg);
         border-right: fun.convert-px(1) solid var(--color-border);
+        font-size: 100%;
+        letter-spacing: -1px;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+
+        > span {
+          &::before {
+            display: block;
+            padding-right: var(--spacing-xs);
+            color: var(--color-fg-light);
+          }
+        }
+      }
+
+      .command-line-prompt {
+        > span {
+          &::before {
+            content: " ";
+          }
+
+          &[data-user]::before {
+            content: "[" attr(data-user) "@" attr(data-host) "] $";
+          }
+
+          &[data-user="root"]::before {
+            content: "[" attr(data-user) "@" attr(data-host) "] #";
+          }
+
+          &[data-prompt]::before {
+            content: attr(data-prompt);
+          }
+
+          &[data-continuation-prompt]::before {
+            content: attr(data-continuation-prompt);
+          }
+        }
+      }
+
+      .line-numbers-rows {
+        > span {
+          counter-increment: lineNumber;
+
+          &::before {
+            content: counter(lineNumber);
+          }
+        }
       }
 
       .token {
@@ -183,7 +278,7 @@
           '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="gray" d="M0 0h2v2H0z"/><path fill="white" d="M0 0h1v1H0zM1 1h1v1H1z"/></svg>'
         ));
 
-        /* Prevent glitches where 1px from the repeating pattern could be seen. */
+        // Prevent repeating pattern to be seen.
         background-position: center;
         background-size: 110%;
 
@@ -204,104 +299,5 @@
         width: 120%;
       }
     }
-
-    pre.line-numbers {
-      counter-reset: lineNumber;
-
-      .line-numbers-rows {
-        > span {
-          counter-increment: lineNumber;
-
-          &::before {
-            display: block;
-            padding: 0 var(--spacing-xs);
-            content: counter(lineNumber);
-            color: var(--color-primary-darker);
-            text-align: right;
-            line-height: var(--line-height);
-          }
-        }
-      }
-    }
-
-    pre.command-line {
-      --gutter-size: clamp(
-        #{fun.convert-px(195)},
-        48vw,
-        #{fun.convert-px(235)}
-      );
-
-      ~ .toolbar {
-        --gutter-size: clamp(
-          #{fun.convert-px(195)},
-          48vw,
-          #{fun.convert-px(235)}
-        );
-      }
-
-      .command-line-prompt {
-        > span {
-          &::before {
-            display: block;
-            content: "";
-          }
-
-          &[data-user]::before {
-            content: "[" attr(data-user) "@" attr(data-host) "] $";
-          }
-
-          &[data-user="root"]::before {
-            content: "[" attr(data-user) "@" attr(data-host) "] #";
-          }
-
-          &[data-prompt]::before {
-            content: attr(data-prompt);
-          }
-        }
-      }
-    }
-
-    .copy-to-clipboard-button,
-    .prism-color-scheme-button {
-      display: block;
-      padding: fun.convert-px(3) var(--spacing-xs);
-      background: var(--color-bg);
-      border: 0.4ex solid var(--color-primary);
-      border-radius: fun.convert-px(30);
-      box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-          var(--color-shadow),
-        fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2)
-          var(--color-shadow),
-        fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4)
-          var(--color-shadow);
-      color: var(--color-primary);
-      font-size: var(--font-size-sm);
-      font-weight: 600;
-      transition: all 0.35s ease-in-out 0s;
-
-      &:hover,
-      &:focus {
-        transform: translateX(#{fun.convert-px(-2)})
-          translateY(#{fun.convert-px(-2)});
-        box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-            var(--color-shadow-light),
-          fun.convert-px(1) fun.convert-px(2) fun.convert-px(2)
-            fun.convert-px(-2) var(--color-shadow-light),
-          fun.convert-px(3) fun.convert-px(4) fun.convert-px(5)
-            fun.convert-px(-4) var(--color-shadow-light),
-          fun.convert-px(4) fun.convert-px(7) fun.convert-px(8)
-            fun.convert-px(-3) var(--color-shadow-light);
-      }
-
-      &:focus {
-        text-decoration: underline var(--color-primary) fun.convert-px(3);
-      }
-
-      &:active {
-        text-decoration: none;
-        transform: translateY(#{fun.convert-px(2)});
-        box-shadow: 0 0 0 0 var(--color-shadow);
-      }
-    }
   }
 }