From: Mark Otto <markdotto@gmail.com>
Date: Fri, 1 May 2026 17:48:07 +0000 (-0700)
Subject: Improve masthead code snippet
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=c5b4d9350428ddc0518d2d1b6481fb38e3c842b4;p=thirdparty%2Fbootstrap.git

Improve masthead code snippet
---

diff --git a/site/src/components/shortcodes/CodeCopy.astro b/site/src/components/shortcodes/CodeCopy.astro
index 210f6d32a0..7980e042a4 100644
--- a/site/src/components/shortcodes/CodeCopy.astro
+++ b/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>
diff --git a/site/src/scss/_clipboard-js.scss b/site/src/scss/_clipboard-js.scss
index 6399887f1c..0f4c0914c5 100644
--- a/site/src/scss/_clipboard-js.scss
+++ b/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;
+    }
+  }
 }