diff options
| author | Louise Crow <louise.crow@gmail.com> | 2014-06-19 16:38:17 +0100 |
|---|---|---|
| committer | Louise Crow <louise.crow@gmail.com> | 2014-06-25 11:18:19 +0100 |
| commit | 449af9e0692b034f2779c4c0105cca695a854d3d (patch) | |
| tree | 74c7b31a3dbcae929619bccdaa738b95c0bb19dd | |
| parent | b0323a34de6c421c526fd2aa086c46b61020fcfe (diff) | |
Add anchor links to the headings.
| -rw-r--r-- | _layouts/default.html | 11 | ||||
| -rw-r--r-- | assets/css/alaveteli-org.css | 19 | ||||
| -rw-r--r-- | assets/sass/alaveteli-org.scss | 15 |
3 files changed, 45 insertions, 0 deletions
diff --git a/_layouts/default.html b/_layouts/default.html index 8b65d334f..3c4a9db0f 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -157,6 +157,17 @@ }); $('.reveal-all').trigger('click'); }); + // Anchor links for the headings + $(function() { + return $("h1, h2, h3, h4, h5, h6").each(function(i, el) { + var $el, icon, id; + $el = $(el); + id = $el.attr('id'); + if (id) { + return $el.append($("<a />").addClass("header-link").attr("href", "#" + id).html('#')); + } + }); + }); </script> <script src="{{ site.baseurl }}assets/scripts/how-it-works-slides.js"></script> </body> diff --git a/assets/css/alaveteli-org.css b/assets/css/alaveteli-org.css index 8cbae7021..47f870b20 100644 --- a/assets/css/alaveteli-org.css +++ b/assets/css/alaveteli-org.css @@ -703,3 +703,22 @@ h3 { clear: both; } .clearfix { *zoom: 1; } + +.header-link { + padding-left: 0.2em; + opacity: 0; + + -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; +} + +h1:hover .header-link, +h2:hover .header-link, +h3:hover .header-link, +h4:hover .header-link, +h5:hover .header-link, +h6:hover .header-link { + opacity: 1; +} + diff --git a/assets/sass/alaveteli-org.scss b/assets/sass/alaveteli-org.scss index ae591a2b7..e7aa6a2a9 100644 --- a/assets/sass/alaveteli-org.scss +++ b/assets/sass/alaveteli-org.scss @@ -867,4 +867,19 @@ h3 { .clearfix { @include clearfix; +.header-link { + padding-left: 0.2em; + opacity: 0; + + -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 .header-link, +h3:hover .header-link, +h4:hover .header-link, +h5:hover .header-link, +h6:hover .header-link { + opacity: 1; } |