code frame tweaks

kremalicious · Sep 19, 2023 · ca96ae9 · ca96ae9 · vercel · Sep 19, 2023
1 parent e6f6e4c
commit ca96ae9
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/.config/astro.config.ts b/.config/astro.config.ts
@@ -37,11 +37,16 @@ export default defineConfig({
       // https://github.com/expressive-code/expressive-code/blob/ad08cf74095b30055e841d59497990fade634c86/packages/%40expressive-code/core/src/common/core-styles.ts
       styleOverrides: {
         borderRadius: 'var(--border-radius)',
-        borderWidth: 'var(--border-width)',
         uiFontFamily: 'var(--font-family-monospace)',
         uiFontSize: 'var(--font-size-mini)',
         codeFontFamily: 'var(--font-family-monospace)',
         codeFontSize: '0.8rem'
+      },
+      frames: {
+        // https://github.com/expressive-code/expressive-code/blob/main/packages/%40expressive-code/plugin-frames/README.md#available-plugin-options
+        styleOverrides: {
+          frameBoxShadowCssValue: 'var(--box-shadow)'
+        }
       }
     }),
     sitemap({

diff --git a/src/styles/_code.css b/src/styles/_code.css
@@ -88,8 +88,23 @@ pre::-webkit-scrollbar-track {
   margin: var(--spacer) 0;
 }
 
+div.expressive-code .frame .copy {
+  top: 0.1rem;
+  right: 0.3rem;
+}
+
+div.expressive-code .frame .copy button {
+  width: 1.7rem;
+  height: 1.7rem;
+  border: none;
+  border-radius: var(--border-radius);
+  opacity: 0.6 !important;
+  background: none;
+}
+
 div.expressive-code .frame.has-title:not(.is-terminal) .header .title {
   border: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: var(--border-radius);
+  padding: 0.3rem 1rem;
 }