use icon instead of "quote"
All checks were successful
Build and publish CMBA rulebooks (Gitea) / build-release (push) Successful in 12s

This commit is contained in:
Tony
2026-01-14 15:03:26 -06:00
parent b9603e70e0
commit a1dcd70043
3 changed files with 18 additions and 2 deletions

View File

@@ -33,7 +33,6 @@ jobs:
cat src/quote.js cat src/quote.js
echo '</script>' echo '</script>'
echo '<style>' echo '<style>'
echo '.quote-btn{margin-left:.5rem;font-size:.8em;vertical-align:middle;}'
echo '</style>' echo '</style>'
} > build/after-body.html } > build/after-body.html

View File

@@ -25,7 +25,11 @@
const btn = document.createElement("button"); const btn = document.createElement("button");
btn.type = "button"; btn.type = "button";
btn.className = "quote-btn"; btn.className = "quote-btn";
btn.textContent = "Quote"; btn.textContent = "";
btn.innerHTML = `
<span class="quote-icon" aria-hidden="true"></span>
<span class="sr-only">Quote</span>
`;
btn.addEventListener("click", (e) => { btn.addEventListener("click", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

View File

@@ -231,6 +231,19 @@ pre code{
padding: 0; padding: 0;
} }
.quote-icon {
display: inline-block;
width: 0.9em;
height: 0.9em;
vertical-align: middle;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'>\
<path fill='currentColor' d='M96 224c0-35.3 28.7-64 64-64h32V64H160C71.6 64 0 135.6 0 224v64c0 70.7 57.3 128 128 128h32V288h-32c-17.7 0-32-14.3-32-32v-32zm256 0c0-35.3 28.7-64 64-64h32V64h-32c-88.4 0-160 71.6-160 160v64c0 70.7 57.3 128 128 128h32V288h-32c-17.7 0-32-14.3-32-32v-32z'/>\
</svg>");
}
/* Small-screen polish */ /* Small-screen polish */
@media (max-width: 520px){ @media (max-width: 520px){
header#title-block-header .title{ font-size: 1.45rem; } header#title-block-header .title{ font-size: 1.45rem; }