chore: udpate code blocks style

3 files changed, 134 insertions, 431 deletions

diff --git a/src/styles/pages/partials/_article-prism.scss b/src/styles/pages/partials/_article-prism.scss
index 5412bbd..a714eb6 100644
--- a/src/styles/pages/partials/_article-prism.scss
+++ b/src/styles/pages/partials/_article-prism.scss
@@ -3,11 +3,10 @@
 
 @mixin styles {
   .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") {
@@ -16,9 +15,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;
@@ -27,72 +26,169 @@
       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;
+    --gutter-size-with-spacing: calc(var(--gutter-size) + var(--spacing-xs));
+
     padding: 0;
     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 {
@@ -203,99 +299,4 @@
       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);
-    }
-  }
 }
diff --git a/src/styles/pages/partials/_article-wp-blocks.scss b/src/styles/pages/partials/_article-wp-blocks.scss
index d4fed5a..f75a4d5 100644
--- a/src/styles/pages/partials/_article-wp-blocks.scss
+++ b/src/styles/pages/partials/_article-wp-blocks.scss
@@ -29,7 +29,6 @@
 
   .wp-block-code,
   .wp-block-preformatted {
-    margin: 0 auto var(--spacing-md);
     padding: var(--spacing-xs) var(--spacing-sm);
     background: var(--color-bg-secondary);
     border: fun.convert-px(1) solid var(--color-border-light);
diff --git a/src/styles/vendors/_prism.scss b/src/styles/vendors/_prism.scss
deleted file mode 100644
index 7c05c9f..0000000
--- a/src/styles/vendors/_prism.scss
+++ /dev/null
@@ -1,297 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-/// Custom theme for Prism
-
-.code-toolbar {
-  --gutter-size: clamp(#{fun.convert-px(75)}, 20vw, #{fun.convert-px(90)});
-  --toolbar-height: #{fun.convert-px(90)};
-
-  position: relative;
-  margin-top: calc(var(--toolbar-height) + var(--spacing-md));
-
-  @include mix.media("screen") {
-    @include mix.dimensions("2xs") {
-      --toolbar-height: #{fun.convert-px(60)};
-    }
-  }
-
-  .toolbar {
-    display: grid;
-    grid-template-columns: max-content minmax(0, 1fr);
-    justify-items: end;
-    width: 100%;
-    height: var(--toolbar-height);
-    position: absolute;
-    top: calc(var(--toolbar-height) * -1);
-    left: 0;
-    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;
-  }
-
-  .toolbar-item:nth-child(1) {
-    grid-column: 1;
-    grid-row: 1 / 3;
-    margin-right: auto;
-    padding: 0 var(--spacing-sm);
-    background: var(--color-bg-code);
-    border-right: fun.convert-px(1) solid var(--color-border);
-    color: var(--color-primary-darker);
-    font-size: var(--font-size-sm);
-    font-weight: 600;
-  }
-
-  .toolbar-item:nth-child(2) {
-    grid-column: 2;
-    grid-row: 1;
-    margin: 0 var(--spacing-2xs);
-  }
-
-  .toolbar-item:nth-child(3) {
-    grid-column: 2;
-    grid-row: 2;
-    margin: 0 var(--spacing-2xs);
-  }
-}
-
-pre[class*="language-"] {
-  max-height: max(30vw, fun.convert-px(300));
-  margin: var(--spacing-md) 0;
-  padding: 0;
-  position: relative;
-  background: var(--color-bg-secondary);
-  color: var(--color-fg);
-  border: fun.convert-px(1) solid var(--color-border);
-
-  > code {
-    display: block;
-    padding: var(--spacing-xs) 0 var(--spacing-xs)
-      calc(var(--gutter-size) + var(--spacing-xs));
-  }
-
-  .line-numbers-rows,
-  .command-line-prompt {
-    width: var(--gutter-size);
-    min-height: 100%;
-    padding: var(--spacing-xs) var(--spacing-2xs);
-    position: absolute;
-    top: 0;
-    left: 0;
-    pointer-events: none;
-    user-select: none;
-    background: var(--color-bg);
-    border-right: fun.convert-px(1) solid var(--color-border);
-  }
-
-  .token {
-    &.comment,
-    &.doc-comment {
-      color: var(--color-fg-light);
-    }
-
-    &.punctuation {
-      color: var(--color-fg);
-    }
-
-    &.attr-name,
-    &.hexcode,
-    &.inserted,
-    &.string {
-      color: var(--color-token-green);
-    }
-
-    &.class,
-    &.coord,
-    &.id,
-    &.function {
-      color: var(--color-token-purple);
-    }
-
-    &.builtin,
-    &.builtin.class-name,
-    &.property-access,
-    &.regex,
-    &.scope {
-      color: var(--color-token-magenta);
-    }
-
-    &.class-name,
-    &.constant,
-    &.global,
-    &.interpolation,
-    &.key,
-    &.package,
-    &.this,
-    &.title,
-    &.variable {
-      color: var(--color-token-blue);
-    }
-
-    &.combinator,
-    &.keyword,
-    &.operator,
-    &.pseudo-class,
-    &.pseudo-element,
-    &.rule,
-    &.selector,
-    &.unit {
-      color: var(--color-token-orange);
-    }
-
-    &.attr-value,
-    &.boolean,
-    &.number {
-      color: var(--color-token-yellow);
-    }
-
-    &.delimiter,
-    &.doctype,
-    &.parameter,
-    &.parent,
-    &.property,
-    &.shebang,
-    &.tag {
-      color: var(--color-token-cyan);
-    }
-
-    &.deleted {
-      color: var(--color-token-red);
-    }
-
-    &.punctuation.brace-hover,
-    &.punctuation.brace-selected {
-      background: var(--color-bg);
-      outline: solid fun.convert-px(1) var(--color-primary-light);
-    }
-  }
-
-  span.inline-color-wrapper {
-    background: url(fun.encode-svg(
-      '<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. */
-    background-position: center;
-    background-size: 110%;
-
-    display: inline-block;
-    height: 1.1ch;
-    width: 1.1ch;
-    margin: 0 0.5ch 0 0;
-    border: fun.convert-px(1) solid var(--color-bg);
-    outline: fun.convert-px(1) solid var(--color-border-dark);
-    overflow: hidden;
-  }
-
-  span.inline-color {
-    display: block;
-
-    /* To prevent visual glitches again */
-    height: 120%;
-    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);
-  }
-}