Skip to content

Instantly share code, notes, and snippets.

@daniellmb

daniellmb/anchor-style.css

Last active February 19, 2016 19:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save daniellmb/53e3f75d142980e44c2f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save daniellmb/53e3f75d142980e44c2f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. daniellmb revised this gist Feb 19, 2016. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions anchor-style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,9 +5,9 @@
    margin-left: -1rem;
    opacity: 0;
    padding-right: 0.1rem;
    -webkit-transition: opacity 0.2s ease-in-out 0.1s;
    -moz-transition: opacity 0.2s ease-in-out 0.1s;
    -ms-transition: opacity 0.2s ease-in-out 0.1s;
    -webkit-transition: opacity cubic-bezier(0,1,.35,.96) 1s;
    -moz-transition: opacity cubic-bezier(0,1,.35,.96) 1s;
    -ms-transition: opacity cubic-bezier(0,1,.35,.96) 1s;
    }
    h2:hover .anchor,
    h3:hover .anchor,
  2. daniellmb created this gist Feb 19, 2016.
    19 changes: 19 additions & 0 deletions anchor-style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    /* unobtrusively style deep-linking heading anchors */
    .anchor {
    color: gray;
    display: inline-block;
    margin-left: -1rem;
    opacity: 0;
    padding-right: 0.1rem;
    -webkit-transition: opacity 0.2s ease-in-out 0.1s;
    -moz-transition: opacity 0.2s ease-in-out 0.1s;
    -ms-transition: opacity 0.2s ease-in-out 0.1s;
    }
    h2:hover .anchor,
    h3:hover .anchor,
    h4:hover .anchor,
    h5:hover .anchor,
    h6:hover .anchor {
    opacity: 1;
    text-decoration: none;
    }
    4 changes: 4 additions & 0 deletions auto-anchor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    // auto-link page headings 0.1 KB minified
    [].forEach.call(document.querySelectorAll('h2,h3,h4,h5,h6'), function(tag) {
    tag.id && (tag.innerHTML = '<a href="#' + tag.id + '"class="anchor">¶</a>' + tag.innerHTML)
    });