place symbols on canvas to prevent them from being optimized away; change ID prefix; tweak layout of source toolbox

Author: mojavelinux

gulp.d/tasks/build.js

@@ -114,8 +114,7 @@ module.exports = (src, dest, preview) => () => {
             imagemin.optipng(),
             imagemin.svgo({
               plugins: [
-                { cleanupIDs: { preservePrefixes: ['icon-'] } },
-                { removeUselessDefs: false },
+                { cleanupIDs: { preservePrefixes: ['symbol-', 'view-'] } },
                 { removeViewBox: false },
                 { removeDesc: false },
               ],

src/css/doc.css

@@ -114,7 +114,6 @@
 
 .doc a:hover {
   color: var(--link_hover-font-color);
-  /* -webkit-text-stroke-width: 0.01em; */
 }
 
 .doc a.bare {
@@ -663,17 +662,14 @@
   position: relative;
 }
 
-.doc .language-console .hljs-meta {
-  user-select: none;
-}
-
 .doc .source-toolbox {
   display: flex;
   visibility: hidden;
   position: absolute;
   top: 0.25rem;
   right: 0.5rem;
   color: var(--pre-annotation-font-color);
+  font-family: var(--body-font-family);
   font-size: calc(13.5 / var(--rem-base) * 1rem);
   line-height: 1;
 }
@@ -684,11 +680,15 @@
 
 .doc .source-toolbox .source-lang {
   text-transform: uppercase;
-  line-height: 1.05;
+  letter-spacing: 0.075em;
+  font-size: 0.96em;
+  line-height: 1.0425;
 }
 
 .doc .source-toolbox > :not(:last-child)::after {
-  content: " | ";
+  content: "|";
+  letter-spacing: 0;
+  padding: 0 1ch;
 }
 
 .doc .source-toolbox .copy-button {
@@ -702,8 +702,8 @@
   padding: 0;
   font-size: inherit;
   line-height: inherit;
-  width: 1.1em;
-  height: 1.1em;
+  width: 1em;
+  height: 1em;
 }
 
 .source-toolbox .copy-button * {
@@ -725,7 +725,6 @@
   border-radius: 0.25em;
   padding: 0.5em;
   color: var(--color-white);
-  font-family: var(--body-font-family);
   cursor: auto;
   opacity: 0;
   transition: opacity 0.5s ease 0.75s;
@@ -748,6 +747,10 @@
   transition: none;
 }
 
+.doc .language-console .hljs-meta {
+  user-select: none;
+}
+
 .doc .hdlist1,
 .doc .hdlist2 {
   padding: 0;

src/img/octicons.svg

@@ -29,9 +29,8 @@
       var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
       svg.setAttribute('aria-hidden', 'true')
       svg.setAttribute('class', 'copy-icon')
-      svg.setAttribute('viewBox', '0 0 16 16')
       var use = document.createElementNS('http://www.w3.org/2000/svg', 'use')
-      use.setAttribute('href', window.uiRootPath + '/img/octicons.svg#icon-clippy-16')
+      use.setAttribute('href', window.uiRootPath + '/img/octicons.svg#symbol-clippy-16')
       svg.appendChild(use)
       copy.appendChild(svg)
       ;(toast = document.createElement('span')).className = 'copy-toast'

src/js/06-copy-to-clipboard.js

@@ -83,7 +83,7 @@
           --}}
           <a class="navbar-item" href="https://github.com/asciidoctor" target="_blank" rel="noopener">
             <span class="icon">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><use href="{{{uiRootPath}}}/img/octicons.svg#icon-mark-github"></use></svg>
+              <svg xmlns="http://www.w3.org/2000/svg"><use href="{{{uiRootPath}}}/img/octicons.svg#symbol-mark-github"></use></svg>
             </span>
           </a>
         </div>