diff --git a/website/src/pages/docs/[...slug].astro b/website/src/pages/docs/[...slug].astro index 7ac0853..3723f3e 100644 --- a/website/src/pages/docs/[...slug].astro +++ b/website/src/pages/docs/[...slug].astro @@ -147,7 +147,7 @@ const sections = [ }); }); } - document.addEventListener('DOMContentLoaded', init); + init(); document.addEventListener('astro:after-swap', init); })(); diff --git a/website/src/styles/global.css b/website/src/styles/global.css index b385cc5..b087bd1 100644 --- a/website/src/styles/global.css +++ b/website/src/styles/global.css @@ -184,6 +184,7 @@ border-radius: 0.5rem; padding: 1rem 1.25rem; overflow-x: auto; + overflow-y: visible; margin-bottom: 1.25rem; font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace; font-size: 0.875rem; @@ -192,6 +193,12 @@ color: var(--card-foreground); } +.prose .astro-code { + position: relative !important; + background-color: var(--card) !important; + color: var(--card-foreground) !important; +} + .prose pre code { background: none !important; border: none; @@ -214,7 +221,7 @@ border-radius: 0.25rem; color: var(--muted-foreground); background: var(--background); - opacity: 0; + opacity: 0.6; transition: opacity 0.15s, color 0.15s; cursor: pointer; pointer-events: auto; @@ -224,6 +231,35 @@ opacity: 1; } +.prose .astro-code .copy-code { + position: absolute; + top: 0.75rem; + right: 0.75rem; + z-index: 10; + display: grid; + place-items: center; + width: 28px; + height: 28px; + padding: 0; + margin: 0; + border: 1px solid var(--border); + border-radius: 0.25rem; + color: var(--muted-foreground); + background: var(--background); + opacity: 0.6; + transition: opacity 0.15s, color 0.15s; + cursor: pointer; + pointer-events: auto; +} + +.prose .astro-code:hover .copy-code { + opacity: 1; +} + +.prose .astro-code .copy-code:hover { + color: var(--primary); +} + .prose pre .copy-code:hover { color: var(--primary); }