From 8c3143a220e69752c9434b15309c75145b99b896 Mon Sep 17 00:00:00 2001
From: Patrick Kollitsch <davidsneighbourdev+gh@gmail.com>
Date: Sat, 06 Jun 2026 12:27:13 +0000
Subject: [PATCH] feat: copy-to-clipboard buttons for code blocks (#986)
---
assets/ananke/css/_code.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 58 insertions(+), 2 deletions(-)
diff --git a/assets/ananke/css/_code.css b/assets/ananke/css/_code.css
index 11fd170..a41ef5d 100644
--- a/assets/ananke/css/_code.css
+++ b/assets/ananke/css/_code.css
@@ -19,6 +19,62 @@
}
p code {
-
font-size: 0.9em;
- }
\ No newline at end of file
+}
+
+/* ------------------------------------------------------------------ *
+ * Code block copy button (see layouts/_markup/render-codeblock.html) *
+ * Progressive enhancement: the button is hidden until site-scripts.html
+ * reveals it, so no inert button appears when JavaScript is disabled. *
+ * ------------------------------------------------------------------ */
+
+.code-block {
+ position: relative;
+}
+
+.code-block .code-copy {
+ position: absolute;
+ top: 0.5rem;
+ right: 0.5rem;
+ z-index: 2;
+ padding: 0.25rem 0.6rem;
+ font-family: inherit;
+ font-size: 0.75rem;
+ line-height: 1.4;
+ color: #ddd;
+ background-color: rgba(255, 255, 255, 0.12);
+ border: 1px solid rgba(255, 255, 255, 0.25);
+ border-radius: 4px;
+ cursor: pointer;
+ opacity: 0;
+ transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
+}
+
+/* Reveal on hover and when focused for keyboard users. */
+.code-block:hover .code-copy,
+.code-block .code-copy:focus-visible {
+ opacity: 1;
+}
+
+.code-block .code-copy:hover {
+ background-color: rgba(255, 255, 255, 0.22);
+}
+
+.code-block .code-copy.is-copied {
+ color: #fff;
+ background-color: #19a974;
+ border-color: #19a974;
+}
+
+/* Touch devices have no hover; keep the button visible but subtle. */
+@media (hover: none) {
+ .code-block .code-copy {
+ opacity: 0.7;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .code-block .code-copy {
+ transition: none;
+ }
+}
\ No newline at end of file
--
Gitblit v1.10.0