swaits/builderscode
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve button style and functionality

Browse Source
This commit is contained in:
swaits committed 2025-10-08 17:18:59 -06:00
1 parent 1fe0dd4f66
commit 87ab29fad4
4 files changed
+70 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

layouts/_default/baseof.html
+60 -2
View File
@@ -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();
layouts/_default/single.html
+3 -1
View File
@@ -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>
layouts/index.html
+3 -1
View File
@@ -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>