From 87ab29fad4bd177051569231918fa6b922a0e140 Mon Sep 17 00:00:00 2001
From: Stephen Waits <steve@waits.net>
Date: Wed, 8 Oct 2025 17:18:26 -0600
Subject: [PATCH] feat: improve button style and functionality

---
 layouts/_default/baseof.html | 62 ++++++++++++++++++++++++++++++++++--
 layouts/_default/single.html |  4 ++-
 layouts/index.html           |  4 ++-
 static/markdown-icon.svg     |  4 +++
 4 files changed, 70 insertions(+), 4 deletions(-)
 create mode 100644 static/markdown-icon.svg

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 58492b7..d40ddcb 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -94,6 +94,9 @@
             font-size: 1.2rem;
             color: #3d3027;
         }
+        .theme-toggle:hover {
+            background: #eee8dc;
+        }
         .copy-btn {
             position: absolute;
             top: 1rem;
@@ -111,6 +114,12 @@
         .copy-btn:hover {
             background: #eee8dc;
         }
+        .copy-icon {
+            width: 3rem;
+            height: 3rem;
+            display: block;
+            filter: brightness(0) saturate(100%) invert(20%) sepia(15%) saturate(500%) hue-rotate(350deg) brightness(95%) contrast(90%);
+        }
         .version-link, .back-link {
             font-size: 0.9rem;
             color: #6d5d4b;
@@ -130,6 +139,28 @@
             border-top: 1px solid #d9cfbb;
             text-align: center;
         }
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #3d3027;
+            color: #faf7f2;
+            padding: 0.75rem 1.5rem;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+            z-index: 1000;
+        }
+        .toast.show {
+            opacity: 1;
+        }
+        .toast.fade-out {
+            opacity: 0;
+        }
         @media (prefers-color-scheme: dark) {
             body {
                 background: #252b37;
@@ -148,9 +179,15 @@
                 border-color: #3d4a5c;
                 color: #cbd5e1;
             }
+            .theme-toggle:hover {
+                background: #2d3748;
+            }
             .copy-btn:hover {
                 background: #2d3748;
             }
+            .copy-icon {
+                filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(110%) contrast(100%);
+            }
             a {
                 color: #74c7ec;
             }
@@ -161,6 +198,10 @@
                 border-top-color: #3d4a5c;
                 color: #7a8a9a;
             }
+            .toast {
+                background: #cbd5e1;
+                color: #252b37;
+            }
         }
         body[data-theme="dark"] {
             background: #252b37;
@@ -181,9 +222,15 @@
             border-color: #3d4a5c;
             color: #cbd5e1;
         }
+        body[data-theme="dark"] .theme-toggle:hover {
+            background: #2d3748;
+        }
         body[data-theme="dark"] .copy-btn:hover {
             background: #2d3748;
         }
+        body[data-theme="dark"] .copy-icon {
+            filter: brightness(0) saturate(100%) invert(95%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(110%) contrast(100%);
+        }
         body[data-theme="dark"] a {
             color: #74c7ec;
         }
@@ -195,6 +242,10 @@
             border-top-color: #3d4a5c;
             color: #7a8a9a;
         }
+        body[data-theme="dark"] .toast {
+            background: #cbd5e1;
+            color: #252b37;
+        }
         body[data-theme="light"] {
             background: #faf7f2;
             color: #3d3027;
@@ -214,9 +265,15 @@
             border-color: #d9cfbb;
             color: #3d3027;
         }
+        body[data-theme="light"] .theme-toggle:hover {
+            background: #eee8dc;
+        }
         body[data-theme="light"] .copy-btn:hover {
             background: #eee8dc;
         }
+        body[data-theme="light"] .copy-icon {
+            filter: brightness(0) saturate(100%) invert(20%) sepia(15%) saturate(500%) hue-rotate(350deg) brightness(95%) contrast(90%);
+        }
         body[data-theme="light"] a {
             color: #4a8d8f;
         }
@@ -227,11 +284,12 @@
     </style>
 </head>
 <body>
-    <button class="theme-toggle" id="theme-btn" onclick="toggleTheme()">☀︎</button>
+    <button class="theme-toggle" id="theme-btn" onclick="toggleTheme()" title="Toggle theme">☀︎</button>
     {{ block "main" . }}{{ end }}
+    <div class="toast" id="toast">Copied!</div>
     <p class="license">Licensed under <a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0</a> • Copyright © 2025 Stephen Waits</p>
     <script>
-    function copyCoC(){var t=document.querySelector('.coc-box').getAttribute('data-raw-content');navigator.clipboard.writeText(t).then(function(){alert('Copied!')});}
+    function copyCoC(){var t=document.querySelector('.coc-box').getAttribute('data-raw-content');navigator.clipboard.writeText(t).then(function(){var toast=document.getElementById('toast');toast.classList.add('show');setTimeout(function(){toast.classList.remove('show');toast.classList.add('fade-out');setTimeout(function(){toast.classList.remove('fade-out');},300);},2000);});}
     function updateThemeBtn(){var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var t=document.body.dataset.theme;var dark=t=='dark'||(t==''&&d)||(!t&&d);document.getElementById('theme-btn').textContent=dark?'☀︎':'☾';}
     function toggleTheme(){var d=window.matchMedia('(prefers-color-scheme: dark)').matches;var t=document.body.dataset.theme;var dark=t=='dark'||(t==''&&d)||(!t&&d);document.body.dataset.theme=dark?'light':'dark';updateThemeBtn();}
     updateThemeBtn();
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 6f97159..2c014f2 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,7 +2,9 @@
 
 {{ define "main" }}
     <div class="coc-box" data-raw-content="{{ .RawContent }}">
-        <button class="copy-btn" onclick="copyCoC()">[copy]</button>
+        <button class="copy-btn" onclick="copyCoC()" title="Copy to clipboard">
+            <img src="/markdown-icon.svg" alt="Copy" class="copy-icon">
+        </button>
         {{ .Content }}
     </div>
     <p class="back-link"><a href="/">← Back to latest version</a> | <a href="/versions/">All versions</a></p>
diff --git a/layouts/index.html b/layouts/index.html
index 3f3d720..63f7e7d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,7 +3,9 @@
 {{ define "main" }}
     {{ $latest := index (where .Site.RegularPages "Section" "versions").ByDate.Reverse 0 }}
     <div class="coc-box" data-raw-content="{{ $latest.RawContent }}">
-        <button class="copy-btn" onclick="copyCoC()">[copy]</button>
+        <button class="copy-btn" onclick="copyCoC()" title="Copy to clipboard">
+            <img src="/markdown-icon.svg" alt="Copy" class="copy-icon">
+        </button>
         {{ $latest.Content }}
     </div>
     <p class="version-link"><a href="/versions/">Previous versions</a></p>
diff --git a/static/markdown-icon.svg b/static/markdown-icon.svg
new file mode 100644
index 0000000..1e9817c
--- /dev/null
+++ b/static/markdown-icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 5.79086 1.79086 4 4 4H20C22.2091 4 24 5.79086 24 8V16C24 18.2091 22.2091 20 20 20H4C1.79086 20 0 18.2091 0 16V8ZM4 6C2.89543 6 2 6.89543 2 8V16C2 17.1046 2.89543 18 4 18H20C21.1046 18 22 17.1046 22 16V8C22 6.89543 21.1046 6 20 6H4ZM5.68377 8.05132C6.09211 7.9152 6.54174 8.05566 6.8 8.4L9 11.3333L11.2 8.4C11.4583 8.05566 11.9079 7.9152 12.3162 8.05132C12.7246 8.18743 13 8.56957 13 9V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V12L9.8 13.6C9.61115 13.8518 9.31476 14 9 14C8.68524 14 8.38885 13.8518 8.2 13.6L7 12V15C7 15.5523 6.55228 16 6 16C5.44772 16 5 15.5523 5 15V9C5 8.56957 5.27543 8.18743 5.68377 8.05132ZM18 9C18 8.44772 17.5523 8 17 8C16.4477 8 16 8.44772 16 9V12.5858L15.7071 12.2929C15.3166 11.9024 14.6834 11.9024 14.2929 12.2929C13.9024 12.6834 13.9024 13.3166 14.2929 13.7071L16.2929 15.7071C16.6834 16.0976 17.3166 16.0976 17.7071 15.7071L19.7071 13.7071C20.0976 13.3166 20.0976 12.6834 19.7071 12.2929C19.3166 11.9024 18.6834 11.9024 18.2929 12.2929L18 12.5858V9Z" fill="#000000"/>
+</svg>
\ No newline at end of file