_sass/addon/syntax.scss in jekyll-theme-chirpy-5.6.1 vs _sass/addon/syntax.scss in jekyll-theme-chirpy-6.0.0

@@ -30,22 +30,19 @@
 }
 
 /* -- code snippets -- */
 
 %code-snippet-bg {
-  background: var(--highlight-bg-color);
+  background-color: var(--highlight-bg-color);
 }
 
 %code-snippet-padding {
   padding-left: 1rem;
   padding-right: 1.5rem;
 }
 
 .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 */
 }
 
@@ -118,14 +115,10 @@
   }
 
   blockquote & {
     color: inherit;
   }
-
-  .highlight > & {
-    color: transparent;
-  }
 }
 
 td.rouge-code {
   @extend %code-snippet-padding;
 
@@ -138,17 +131,29 @@
     border-bottom: none !important;
     pointer-events: none;
   }
 }
 
+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;
     }
 
     td.rouge-code {
@@ -164,32 +169,19 @@
 
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: $code-header-height;
+  margin-left: 1rem;
+  margin-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);
-  }
-
   /* 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 {
         font-size: 70%;
       }
@@ -246,24 +238,33 @@
       }
     }
   }
 }
 
-@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);
       }
     }
   }
 }