From 6d99f5cc36a69e5ccff51f81ba448c798d92e12e Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Fri, 24 Mar 2023 02:46:48 +0800
Subject: [PATCH] feat(ui): improve code snippet design

---
 _includes/refactor-content.html |  4 +-
 _sass/addon/syntax.scss         | 77 ++++++++++++++++++---------------
 _sass/colors/dark-syntax.scss   |  1 +
 _sass/colors/light-syntax.scss  |  1 +
 4 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 2dfddbd..e3ee11d 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -219,11 +219,11 @@
 
       {% if _left contains 'file="' %}
         {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
-        {% assign _label_icon = 'far fa-file-code' %}
+        {% assign _label_icon = 'far fa-file-code fa-fw' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
         {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
-        {% assign _label_icon = 'fas fa-code small' %}
+        {% assign _label_icon = 'fas fa-code fa-fw small' %}
       {% endif %}
 
       {% capture _label %}
diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss
index e3a93bb..21d0b7c 100644
--- a/_sass/addon/syntax.scss
+++ b/_sass/addon/syntax.scss
@@ -32,7 +32,7 @@ html {
 /* -- code snippets -- */
 
 %code-snippet-bg {
-  background: var(--highlight-bg-color);
+  background-color: var(--highlight-bg-color);
 }
 
 %code-snippet-padding {
@@ -41,9 +41,6 @@ html {
 }
 
 .highlighter-rouge {
-  @extend %code-snippet-bg;
-  @extend %rounded;
-
   color: var(--highlighter-rouge-color);
   margin-top: 0.5rem;
   margin-bottom: 1.2em; /* Override BS Inline-code style */
@@ -140,13 +137,25 @@ td.rouge-code {
   }
 }
 
+div[class^='language-'] {
+  @extend %rounded;
+  @extend %code-snippet-bg;
+
+  box-shadow: var(--language-border-color) 0 0 0 1px;
+
+  .post-content > & {
+    @include ml-mr(-1.25rem);
+
+    border-radius: 0;
+  }
+}
+
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
-  &[class^='highlighter-rouge'],
   &.nolineno,
-  &.language-plaintext.highlighter-rouge,
-  &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-plaintext,
+  &.language-console,
+  &.language-terminal {
     pre.lineno {
       display: none;
     }
@@ -166,28 +175,15 @@ div {
   justify-content: space-between;
   align-items: center;
   height: $code-header-height;
-
-  &::before {
-    $dot-size: 0.75rem;
-    $dot-margin: 0.5rem;
-
-    content: '';
-    display: inline-block;
-    margin-left: 1rem;
-    width: $dot-size;
-    height: $dot-size;
-    border-radius: 50%;
-    background-color: var(--code-header-muted-color);
-    box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
-      ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
-  }
+  margin-left: 1rem;
+  margin-right: 0.25rem;
 
   /* the label block */
   span {
     /* label icon */
     i {
       font-size: 1rem;
-      margin-right: 0.4rem;
+      margin-right: 0.5rem;
       color: var(--code-header-icon-color);
 
       &.small {
@@ -248,21 +244,30 @@ div {
   }
 }
 
-@media all and (max-width: 576px) {
-  .post-content {
-    > div[class^='language-'] {
-      @include ml-mr(-1.25rem);
+@media all and (min-width: 576px) {
+  div[class^='language-'] {
+    .post-content > & {
+      @include ml-mr(0);
 
-      border-radius: 0;
+      border-radius: $base-radius;
+    }
 
-      .highlight {
-        padding-left: 0.25rem;
-      }
+    .code-header {
+      @include ml-mr(0);
 
-      .code-header {
-        border-radius: 0;
-        padding-left: 0.4rem;
-        padding-right: 0.5rem;
+      &::before {
+        $dot-size: 0.75rem;
+        $dot-margin: 0.5rem;
+
+        content: '';
+        display: inline-block;
+        margin-left: 1rem;
+        width: $dot-size;
+        height: $dot-size;
+        border-radius: 50%;
+        background-color: var(--code-header-muted-color);
+        box-shadow: ($dot-size + $dot-margin) 0 0 var(--code-header-muted-color),
+          ($dot-size + $dot-margin) * 2 0 0 var(--code-header-muted-color);
       }
     }
   }
diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss
index 8c22d24..36e9651 100644
--- a/_sass/colors/dark-syntax.scss
+++ b/_sass/colors/dark-syntax.scss
@@ -3,6 +3,7 @@
  */
 
 @mixin dark-syntax {
+  --language-border-color: rgba(84, 83, 83, 0.27);
   --highlight-bg-color: #252525;
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss
index b4b30c8..040a5f5 100644
--- a/_sass/colors/light-syntax.scss
+++ b/_sass/colors/light-syntax.scss
@@ -67,6 +67,7 @@
   .highlight .il { color: #009999; } /* Literal.Number.Integer.Long */
 
   /* --- custom light colors --- */
+  --language-border-color: rgba(172, 169, 169, 0.2);
   --highlight-bg-color: #f7f7f7;
   --highlighter-rouge-color: #3f596f;
   --highlight-lineno-color: #c2c6cc;