adjust anchor transition to make it feel more responsive (reduce transition time so icon doesn't linger after cursor is removed, use color transitions to give fade/highlight effect, retain visibility transition for screen readers)

Author: gracegrimwood

_sass/kroxylicious.scss

@@ -136,13 +136,16 @@ div.highlighter-rouge {
 
 h2>a.anchor, h3>a.anchor, h4>a.anchor, h5>a.anchor, h6>a.anchor {
   font-family: bootstrap-icons!important;
+  color: rgba($primary, 0);
   display: block;
   margin-left: -1.5ex;
   position: absolute;
   text-decoration: none !important;
   visibility: hidden;
   z-index: 2;
-  transition: visibility 1s;
+  transition:
+          visibility 1ms linear,
+          color 200ms ease-in-out;
 }
 
 h2>a.anchor::before, h3>a.anchor::before, h4>a.anchor::before, h5>a.anchor::before, h6>a.anchor::before {
@@ -151,4 +154,9 @@ h2>a.anchor::before, h3>a.anchor::before, h4>a.anchor::before, h5>a.anchor::befo
 
 h2:hover>a.anchor, h3:hover>a.anchor, h4:hover>a.anchor, h5:hover>a.anchor, h6:hover>a.anchor {
   visibility: visible;
+  color: rgba($primary, 1);
+}
+
+h2:hover>a.anchor:hover, h3:hover>a.anchor:hover, h4:hover>a.anchor:hover, h5:hover>a.anchor:hover, h6:hover>a.anchor:hover {
+  color: rgba($secondary, 1);
 }