From 74a5669042e37849851854736e1cc66ac2177b5a Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sun, 10 Oct 2021 20:29:50 -0700
Subject: Add base64 option to icon page, tweak layout

---
 docs/assets/scss/docs.scss     |  6 ++++++
 docs/layouts/icons/single.html | 13 ++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index a73cc61a3..496fffdf0 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -12,6 +12,12 @@
   vertical-align: -.125em;
 }
 
+.btn-bd-primary {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  border-radius: .5rem;
+}
+
 .hero-notice {
   background-color: $teal-100;
 
diff --git a/docs/layouts/icons/single.html b/docs/layouts/icons/single.html
index d50081705..ccebad0e9 100644
--- a/docs/layouts/icons/single.html
+++ b/docs/layouts/icons/single.html
@@ -104,9 +104,9 @@
           </div>
         </div>
         <div class="col-lg-4 mb-4">
-          <h2 class="fs-3">Download</h2>
-          <p>Download the SVG to use or edit.</p>
-          <a href="{{ $svgPath }}" class="btn btn-bd-primary mb-4" download>Download SVG</a>
+          <!-- <h2 class="fs-3">Download</h2> -->
+          <!-- <p>Download the SVG to use or edit.</p> -->
+          <a href="{{ $svgPath }}" class="btn btn-bd-primary d-block fs-5 mb-4" download>Download SVG</a>
 
           <h2 class="fs-3">Icon font</h2>
           <p>Using the web font? Copy, paste, and go.</p>
@@ -122,6 +122,13 @@
           <div id="copy-error-callout" class="alert alert-info d-none" role="alert"></div>
 
           {{ highlight $svgHtml "html" "" }}
+
+          <h2 class="fs-3">Copy as CSS</h2>
+          <p>Embed a base64-encoded SVG in your CSS.</p>
+
+          {{ $iconBase64 := $svgHtml | base64Encode }}
+          {{ $iconBase64Snippet := printf `background-image: url("data:image/svg+xml;base64, %s");` $iconBase64 -}}
+          {{- highlight $iconBase64Snippet "html" "" }}
         </div>
       </div>
     </main>
-- 
cgit v1.2.3