thang/notes
1
0
Fork 0
mirror of https://github.com/thangisme/notes.git synced 2025-01-18 03:26:31 -05:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
Deduplicated anchor heading svg,
Anchor heading svg is now centered for heading
This commit is contained in:
Silvio Giebl 2019-08-15 14:18:40 +02:00
parent 418cf1d640
commit fdf4726320
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
_layouts/default.html
View File

@ -7,6 +7,12 @@ layout: table_wrappers
<html lang="{{ site.lang | default: "en-US" }}"> <html lang="{{ site.lang | default: "en-US" }}">
{% include head.html %} {% include head.html %}
<body> <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="page-wrap">
<div class="side-bar"> <div class="side-bar">
@ -60,7 +66,7 @@ layout: table_wrappers
{% endunless %} {% endunless %}
<div id="main-content" class="page-content" role="main"> <div id="main-content" class="page-content" role="main">
{% if site.heading_anchors != false %} {% 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 %} {% else %}
{{ content }} {{ content }}
{% endif %} {% endif %}

19
_sass/content.scss
View File

@ -116,26 +116,37 @@
.anchor-heading { .anchor-heading {
position: absolute; position: absolute;
right: -$sp-3; right: -$sp-4;
width: $sp-5; width: $sp-5;
height: 100%; height: 100%;
padding-right: $sp-1;
padding-left: $sp-1;
overflow: visible; overflow: visible;
fill: $link-color;
visibility: hidden;
@include mq(md) { @include mq(md) {
right: auto; right: auto;
left: -$sp-5; left: -$sp-5;
} }
svg {
display: inline-block;
width: 100%;
height: 100%;
fill: $link-color;
visibility: hidden;
}
} }
.anchor-heading:hover,
h1:hover > .anchor-heading, h1:hover > .anchor-heading,
h2:hover > .anchor-heading, h2:hover > .anchor-heading,
h3:hover > .anchor-heading, h3:hover > .anchor-heading,
h4:hover > .anchor-heading, h4:hover > .anchor-heading,
h5:hover > .anchor-heading, h5:hover > .anchor-heading,
h6:hover > .anchor-heading { h6:hover > .anchor-heading {
visibility: visible; svg {
visibility: visible;
}
} }
h1, h1,