Anchor headings are now displayed on hover, not only on heading hover,

Deduplicated anchor heading svg, Anchor heading svg is now centered for heading

Anchor headings are now displayed on hover, not only on heading hover,
Deduplicated anchor heading svg, Anchor heading svg is now centered for heading
fdf47263 · Silvio Giebl · 418cf1d6 · fdf47263 · fdf47263
Commit fdf47263 authored 5 years ago by Silvio Giebl
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -7,6 +7,12 @@ layout: table_wrappers
 <html lang="{{ site.lang | default: "en-US" }}">
 {% include head.html %}
 <body>
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="link" viewBox="0 0 16 16">
+      <title>Link</title>
+      <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
+    </symbol>
+  </svg>

  <div class="page-wrap">
    <div class="side-bar">
@@ -60,7 +66,7 @@ layout: table_wrappers
          {% endunless %}
          <div id="main-content" class="page-content" role="main">
            {% if site.heading_anchors != false %}
-              {% include vendor/anchor_headings.html html=content  beforeHeading = "true" anchorBody="<svg class=\"d-inline-block v-align-middle\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"18\" height=\"18\" aria-hidden=\"true\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg>" anchorClass="anchor-heading" %}
+              {% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
            {% else %}
              {{ content }}
            {% endif %}

--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -116,26 +116,37 @@

  .anchor-heading {
    position: absolute;
-    right: -$sp-3;
+    right: -$sp-4;
    width: $sp-5;
    height: 100%;
+    padding-right: $sp-1;
+    padding-left: $sp-1;
    overflow: visible;
-    fill: $link-color;
-    visibility: hidden;

    @include mq(md) {
      right: auto;
      left: -$sp-5;
    }
+
+    svg {
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      fill: $link-color;
+      visibility: hidden;
+    }
  }

+  .anchor-heading:hover,
  h1:hover > .anchor-heading,
  h2:hover > .anchor-heading,
  h3:hover > .anchor-heading,
  h4:hover > .anchor-heading,
  h5:hover > .anchor-heading,
  h6:hover > .anchor-heading {
-    visibility: visible;
+    svg {
+      visibility: visible;
+    }
  }

  h1,