New design for code snippet header

_includes/refactor-content.html

@@ -118,16 +118,16 @@
       {% assign _left = _snippet | split: '><' | last%}
 
       {% if _left contains 'file="' %}
-        {% assign _text = _left | split: 'file="' | last | split: '"' | first %}
+        {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
         {% assign _label_icon = 'far fa-file-code' %}
       {% else %}
         {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
-        {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
+        {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
         {% assign _label_icon = 'fas fa-code small' %}
       {% endif %}
 
       {% capture _label %}
-        <span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
+        <span label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
       {% endcapture %}
 
       {% assign _new_content = _new_content | append: _snippet

_sass/addon/syntax.scss

@@ -38,13 +38,8 @@ $code-radius: 6px;
 }
 
 %code-snippet-padding {
-  padding: 1.2rem;
+  padding-left: 1rem;
-}
+  padding-right: 1.5rem;
-
-div > pre {
-  @extend %code-snippet-bg;
-  @extend %code-snippet-radius;
-  @extend %code-snippet-padding;
 }
 
 .highlighter-rouge {
@@ -65,6 +60,8 @@ div > pre {
   }
 
   overflow: auto;
+  padding-top: 0.5rem;
+  padding-bottom: 1rem;
 
   pre {
     margin-bottom: 0;
@@ -74,20 +71,12 @@ div > pre {
   }
 
   table {
-    padding: 0;
-    border: 0;
-
     td pre {
       overflow: visible;  /* Fixed iOS safari overflow-x */
       word-break: normal; /* Fixed iOS safari linenos code break */
     }
   }
 
-  td {
-    padding: 0;
-    border: 0;
-  }
-
   .lineno {
     padding-right: 0.5rem;
     min-width: 2.2rem;
@@ -140,7 +129,7 @@ code {
 }
 
 td.rouge-code {
-  padding: 1.2rem 1.5rem 1.2rem 1rem;
+  @extend %code-snippet-padding;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
@@ -164,62 +153,80 @@ div {
     }
 
     td.rouge-code {
-      @extend %code-snippet-padding;
+      padding-left: 1.5rem;
     }
   }
 }
 
 .code-header {
-  background: var(--code-header-bg);
+  @extend %no-cursor;
+
+  $code-header-height: 2.25rem;
+
   border-top-left-radius: $code-radius;
   border-top-right-radius: $code-radius;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  line-height: 1.85rem;
+  height: $code-header-height;
 
-  // icons
+  &::before {
-  i {
+    $dot-size: 0.75rem;
-    font-size: 1rem;
+    $dot-margin: 0.5rem;
-    color: var(--lang-badge-muted-color);
 
-    &.small {
+    content: "";
-      font-size: 70%;
+    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);
   }
 
   // the label block
   span {
-    padding-left: 0.35rem;
+    // label icon
-
-    &::after {
-      content: attr(text-data);
-      font-size: 0.85rem;
-      font-weight: 600;
-      color: var(--lang-badge-color);
-    }
-
     i {
-      margin: 0 0.5rem;
+      font-size: 1rem;
+      margin-right: 0.4rem;
+      color: var(--code-header-icon-color);
+
+      &.small {
+        font-size: 70%;
+      }
     }
 
     @at-root [file] #{&} > i {
       position: relative;
       top: 1px; // center the file icon
-      margin-left: 0.25rem;
     }
 
+    // label text
+    &::after {
+      content: attr(label-text);
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--code-header-text-color);
+    }
   }
 
   // clipboard
   button {
-    border: 1px solid var(--code-header-bg);
+    @extend %cursor-pointer;
+
+    border: 1px solid transparent;
     border-radius: $code-radius;
+    height: $code-header-height;
+    width: $code-header-height;
     padding: 0;
-    width: 1.95rem;
     background-color: inherit;
 
-    @extend %cursor-pointer;
+    i {
+      color: var(--code-header-icon-color);
+    }
 
     &[timeout] {
       &:hover {

_sass/colors/dark-syntax.scss

@@ -74,9 +74,9 @@
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
   --inline-code-bg: #272822;
-  --code-header-bg: #353535;
+  --code-header-text-color: #6a6a6a;
-  --lang-badge-color: #858586;
+  --code-header-muted-color: rgb(60 60 60);
-  --lang-badge-muted-color: #6c6c6d;
+  --code-header-icon-color: rgb(86 86 86);
   --clipboard-checked-color: #2bcc2b;
 
   .highlight {

_sass/colors/light-syntax.scss

@@ -71,9 +71,9 @@
   --highlighter-rouge-color: #2f2f2f;
   --highlight-lineno-color: #c2c6cc;
   --inline-code-bg: #f3f3f3;
-  --code-header-bg: #eaeaea;
+  --code-header-text-color: #a3a3b1;
-  --lang-badge-color: rgb(128 128 128 / 87%);
+  --code-header-muted-color: #ebebeb;
-  --lang-badge-muted-color: rgb(128 128 128 / 36%);
+  --code-header-icon-color: #d1d1d1;
   --clipboard-checked-color: #43c743;
 
 } // light-syntax