Separate out CSS

Author: dbreseman

assets/js/anchor.js

@@ -13,35 +13,23 @@ document.addEventListener('DOMContentLoaded', () => {
         if (heading.id) {
             const a = document.createElement('a');
             a.setAttribute('aria-hidden', 'true');
-            a.style.cssText = 'display: none; visibility: hidden; padding: 0rem .3rem .1rem .3rem; margin-left: .4rem; margin-top: -.5rem; margin-bottom: -.5rem; border-radius: 4px;';
-            a.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" fill="var(--bs-body-color)" width="24" height="24" viewBox="0 0 32 32"><path d="M18.9001 7.22C20.5201 5.6 23.1601 5.6 24.7801 7.22C26.4001 8.84 26.4001 11.48 24.7801 13.1L20.4001 17.48L21.8101 18.89L26.1901 14.51C28.5901 12.11 28.5901 8.2 26.1901 5.8C23.7901 3.4 19.8801 3.4 17.4801 5.8L13.1001 10.18L14.5101 11.59L18.8901 7.21L18.9001 7.22Z"/><path d="M10.16 28C11.74 28 13.32 27.4 14.52 26.2L18.9 21.82L17.49 20.41L13.11 24.79C11.49 26.41 8.85002 26.41 7.23002 24.79C5.61002 23.17 5.61002 20.53 7.23002 18.91L11.61 14.53L10.2 13.12L5.82002 17.5C3.42002 19.9 3.42002 23.81 5.82002 26.21C7.02002 27.41 8.60002 28.01 10.18 28.01L10.16 28Z"/><path d="M9.44971 21.1336L21.124 9.45927L22.5383 10.8735L10.8639 22.5478L9.44971 21.1336Z"/></svg>';
+            a.classList.add('anchor-icon'); // Add anchor-icon class (_styles_project.scss)
+            a.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="var(--bs-body-color)" width="20" height="20" viewBox="0 0 32 32"><path d="M18.9001 7.22C20.5201 5.6 23.1601 5.6 24.7801 7.22C26.4001 8.84 26.4001 11.48 24.7801 13.1L20.4001 17.48L21.8101 18.89L26.1901 14.51C28.5901 12.11 28.5901 8.2 26.1901 5.8C23.7901 3.4 19.8801 3.4 17.4801 5.8L13.1001 10.18L14.5101 11.59L18.8901 7.21L18.9001 7.22Z"/><path d="M10.16 28C11.74 28 13.32 27.4 14.52 26.2L18.9 21.82L17.49 20.41L13.11 24.79C11.49 26.41 8.85002 26.41 7.23002 24.79C5.61002 23.17 5.61002 20.53 7.23002 18.91L11.61 14.53L10.2 13.12L5.82002 17.5C3.42002 19.9 3.42002 23.81 5.82002 26.21C7.02002 27.41 8.60002 28.01 10.18 28.01L10.16 28Z"/><path d="M9.44971 21.1336L21.124 9.45927L22.5383 10.8735L10.8639 22.5478L9.44971 21.1336Z"/></svg>`;
             a.href = '#' + heading.id;
 
             // Append anchor element to heading
             heading.appendChild(a);
 
             // Show icon when hovering over heading
             heading.addEventListener('mouseenter', () => {
-                a.style.visibility = 'initial';
-                a.style.display = 'inline-block'
+                a.style.display = 'inline-block';
             });
 
             // Hide icon when mouse leaves heading
             heading.addEventListener('mouseleave', () => {
-                a.style.visibility = 'hidden';
                 a.style.display = 'none';
             });
 
-            // Show background when hovering over icon
-            a.addEventListener('mouseenter', () => {
-                a.style.background = 'var(--bs-gray-200)';
-            });
-
-            // Hide background when mouse leaves icon
-            a.addEventListener('mouseleave', () => {
-                a.style.background = 'none';
-            });
-
             // Initialize Bootstrap tooltip
             const tooltip = new bootstrap.Tooltip(a, {
                 title: 'Copy link to clipboard',

assets/scss/_styles_project.scss

@@ -100,6 +100,19 @@
     padding-bottom: 0px;
 }
 
+// Anchor icon styling for anchor.js
+
+.anchor-icon {
+    display: none;
+    padding: 0rem .3rem .1rem .3rem;
+    margin: -.5rem 0rem -.5rem .3rem;
+    border-radius: 4px;
+}
+
+.anchor-icon:hover {
+    background: $gray-light;
+}
+
 // _code.scss -  Code formatting
 
 .td-content {