diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-10-11 06:29:50 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2021-10-11 06:29:50 +0300 |
| commit | 74a5669042e37849851854736e1cc66ac2177b5a (patch) | |
| tree | ef478920fc235c56ffe8b19eb77bb62ac4024285 | |
| parent | e0763c576b86919c26dbec91811b4a15968b0945 (diff) | |
Add base64 option to icon page, tweak layoutdocs-base64
| -rw-r--r-- | docs/assets/scss/docs.scss | 6 | ||||
| -rw-r--r-- | 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> |