Improve masthead code snippet

Author: mdo

site/src/components/shortcodes/CodeCopy.astro

@@ -35,36 +35,3 @@ const highlightedCode = await highlightCode(code, lang)
   </button>
 </div>
 
-<style>
-  .code-copy {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    min-height: 2.5rem;
-    margin: 0;
-    padding: 0.75rem 1rem;
-    font-size: var(--font-size-md);
-    background-color: var(--bg-1);
-    border: 1px solid var(--border-color-translucent);
-    border-radius: var(--border-radius-lg);
-  }
-
-  .code-copy :global(pre) {
-    margin: 0;
-    background-color: transparent !important;
-  }
-
-  .code-copy :global([data-bd-clipboard]) {
-    position: static;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    flex-shrink: 0;
-    padding: 0;
-    margin: -0.5rem -0.25rem -0.5rem 1rem;
-  }
-</style>

site/src/scss/_clipboard-js.scss

@@ -46,4 +46,37 @@
     margin-inline-end: .5rem;
     margin-top: .5rem;
   }
+
+  .code-copy {
+    position: relative;
+    display: inline-flex;
+    gap: .5rem;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.5rem;
+    padding: .75rem 1rem;
+    margin: 0;
+    font-size: var(--bs-font-size-md);
+    background-color: var(--bs-bg-1);
+    border: 1px solid var(--bs-border-color-translucent);
+    @include border-radius(var(--bs-radius-7));
+
+    pre {
+      margin: 0;
+      font-size: var(--bs-font-size-md) !important; // stylelint-disable-line declaration-no-important
+      background-color: transparent !important; // stylelint-disable-line declaration-no-important
+    }
+
+    [data-bd-clipboard] {
+      position: static;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      padding: 0;
+      margin: -.5rem -.25rem -.5rem 1rem;
+    }
+  }
 }