From c8c021b527b4b93af0f127d83db72623bb4f3155 Mon Sep 17 00:00:00 2001
From: Daniel Flanagan <daniel@lyte.dev>
Date: Thu, 11 May 2023 14:40:11 -0500
Subject: [PATCH] Better maybe

---
 src/stylus/core.styl                | 29 +++++++++++++++++++++++------
 src/stylus/syntax-highlighting.styl |  7 +++++--
 static/global.js                    | 25 ++++++++++++++++++++-----
 3 files changed, 48 insertions(+), 13 deletions(-)

diff --git a/src/stylus/core.styl b/src/stylus/core.styl
index 09dfffa..e8bfbda 100644
--- a/src/stylus/core.styl
+++ b/src/stylus/core.styl
@@ -12,17 +12,33 @@ a
 a > svg
 	margin-right: 0.5em
 
-button.copy-code-button
-	display none
+.copy-code-button-container
 	position absolute
-	top 0.5em
+	// top 1em
 	right 0.5em
+	overflow visible
+	padding 0
+	margin 0
+	max-width 100%
+	width 100%
+	display flex
+
+button.copy-code-button
 	color var(--link-fg)
 	text-decoration underline
 	z-index 10
+	position relative
+	margin-left auto
 
-pre.chroma:hover > button.copy-code-button
-	display block
+	@media (max-width: 600px)
+		opacity 0.75
+
+		&:hover
+			opacity 1.0
+
+@media (max-width: 600px)
+	pre.chroma:hover > button.copy-code-button
+		opacity 0.9
 
 img, embed, frame, iframe { max-width: 100vw }
 
@@ -204,6 +220,7 @@ form
 				text-align left
 
 			h1, h2, h3, h4, h5, h6, form, ul, ol, p
+				position relative
 				max-width 600px
 				margin-left auto
 				margin-right auto
@@ -212,9 +229,9 @@ form
 				border-left 0
 
 				pre.chroma
-					position relative
 					padding 0
 					display flex
+					flex-direction column
 					width auto
 					flex 1
 					justify-content center
diff --git a/src/stylus/syntax-highlighting.styl b/src/stylus/syntax-highlighting.styl
index 1b81567..9268a93 100644
--- a/src/stylus/syntax-highlighting.styl
+++ b/src/stylus/syntax-highlighting.styl
@@ -1,14 +1,17 @@
-main > .highlight .chroma-highlight,
-main > .highlight pre.chroma
+main > .highlight > pre.chroma
 	border 0
 	padding 0.25em 0.5em
 	border-left solid 0.25em var(--syntax-left-edge)
+	overflow-y visible
 	overflow-x auto
 	background-color var(--syntax-bg)
 	-moz-tab-size 2
 	tab-size 2
 	color var(--fg)
 
+main > .highlight > pre.chroma > code > .line
+	margin-right 5em
+
 .chroma
 	.err
 		color var(--syntax-err)
diff --git a/static/global.js b/static/global.js
index 168d030..97e85ae 100644
--- a/static/global.js
+++ b/static/global.js
@@ -77,15 +77,30 @@ function initCodeCopyButtons() {
   const codeBlocks = document.querySelectorAll("pre.chroma");
   codeBlocks.forEach((block) => {
     const code = block.querySelectorAll("code")[0];
+    const buttonContainer = document.createElement("p");
+    buttonContainer.classList.add("copy-code-button-container");
     const button = document.createElement("button");
+    buttonContainer.appendChild(button);
     button.classList.add("copy-code-button");
-    block.appendChild(button);
+    block.parentNode.parentNode.insertBefore(buttonContainer, block.parentNode);
     button.textContent = "Copy";
     button.addEventListener("click", (_ev) => {
-      navigator.clipboard.writeText(code.textContent);
-      const lastText = button.textContent;
-      button.textContent = "Copied to clipbooard!";
-      setTimeout(() => button.textContent = lastText, 3000);
+      button.disabled = true;
+      navigator.clipboard.writeText(code.textContent).catch(() => {
+        const lastText = button.textContent;
+        button.textContent = "Error Copying";
+        setTimeout(() => {
+          button.disabled = false;
+          button.textContent = lastText;
+        }, 500);
+      }).then(() => {
+        const lastText = button.textContent;
+        button.textContent = "Copied to clipbooard!";
+        setTimeout(() => {
+          button.disabled = false;
+          button.textContent = lastText;
+        }, 3000);
+      });
     });
   });
 }