_sass/addon/syntax.scss in jekyll-theme-chirpy-4.1.1 vs _sass/addon/syntax.scss in jekyll-theme-chirpy-4.2.0

@@ -25,20 +25,22 @@
   }
 }
 
 /* -- Codes Snippet -- */
 
+$code-radius: 6px;
+
 %code-snippet-bg {
   background: var(--highlight-bg-color);
 }
 
 %code-snippet-radius {
-  border-radius: 6px;
+  border-radius: $code-radius;
 }
 
 %code-snippet-padding {
-  padding: 1.5rem;
+  padding: 1.2rem;
 }
 
 div > pre {
   @extend %code-snippet-bg;
   @extend %code-snippet-radius;
@@ -84,16 +86,14 @@
     padding: 0;
     border: 0;
   }
 
   .lineno {
-    margin-left: 0.2rem;
     padding-right: 0.5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
-    border-right: 1px solid var(--highlight-lineno-border-color);
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
@@ -133,11 +133,11 @@
     color: inherit;
   }
 }
 
 td.rouge-code {
-  padding: 1.5rem 1.5rem 1.5rem 1rem;
+  padding: 1.2rem 1.5rem 1.2rem 1rem;
 
   // Prevent some browser extends from
   // changing the URL string of code block.
   a {
     color: inherit !important;
@@ -150,37 +150,89 @@
 /* Hide line numbers for default, console, and terminal code snippets */
 div {
   &[class^='highlighter-rouge'],
   &.language-plaintext.highlighter-rouge,
   &.language-console.highlighter-rouge,
-  &.language-terminal.highlighter-rouge {
+  &.language-terminal.highlighter-rouge,
+  &.nolineno {
     pre.lineno {
       display: none;
     }
     td.rouge-code {
       @extend %code-snippet-padding;
     }
   }
 }
 
-div[class^='language-']::before {
-  content: attr(lang);
-  position: absolute;
-  right: 2rem;
-  margin-top: 3px;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--highlight-lineno-color);
-  text-transform: uppercase;
-}
+.code-header {
+  background: var(--code-header-bg);
+  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;
 
-@media (min-width: 768px) {
-  div[class^='language-']::before {
-    right: 3.1rem;
+  // text data
+  &::before {
+    content: attr(text-data);
+    color: var(--lang-badge-color);
+    padding-left: 1em;
+
+    // language
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+
+    // file name
+    @at-root [file] #{&} {
+      font-size: 0.85rem;
+      text-transform: none;
+    }
   }
+
+  // clipboard
+  button {
+    border: 1px solid var(--code-header-bg);
+    border-radius: $code-radius;
+    padding: 0;
+    width: 1.95rem;
+    background-color: inherit;
+    color: var(--highlight-lineno-color);
+
+    &[locked=true] {
+      color: var(--clipboard-checked-color);
+      border-color: var(--clipboard-checked-color);
+    }
+
+    &:not([locked]):hover {
+      background-color: gray;
+      color: white;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    i {
+      font-size: 0.9rem;
+    }
+
+  }
+
 }
 
-@media (min-width: 1650px) {
-  div[class^='language-']::before {
-    right: 3.5rem;
+@media all and (max-width: 576px) {
+  .post-content {
+    > div[class^='language-'] {
+      @include ml-mr(-1.25rem);
+
+      border-radius: 0;
+
+      .code-header {
+        border-radius: 0;
+        padding-left: 0.4rem;
+        padding-right: 0.5rem;
+      }
+    }
   }
 }