diff --git a/README.md b/README.md index eab20a788..4d0a706f5 100644 --- a/README.md +++ b/README.md @@ -3,5 +3,7 @@ The Sass website is open source. See a typo? Have a UX improvement? Check out the [Contributing guide][contrib]! Also, check out the [Style Guide][sg]. +Thanks! + [contrib]: https://github.com/sass/sass-site/blob/master/CONTRIBUTING.md [sg]: http://sass-lang.com/styleguide diff --git a/config.rb b/config.rb index 290c59cd8..e40e32049 100644 --- a/config.rb +++ b/config.rb @@ -76,3 +76,15 @@ body end end + +after_render do |content, path, locs| + # Only modify the original page's rendering. + next if path.include?("source/layouts/") + + content.gsub(%r{^<(h[0-6])(.*?)}m) do |header_text| + header = Nokogiri::HTML::DocumentFragment.parse(header_text).children.first + id = header.attr(:id) + header.children.before("") if id + header.to_html + end +end diff --git a/source/assets/css/components/_link-header.scss b/source/assets/css/components/_link-header.scss index f804c1763..e29812378 100644 --- a/source/assets/css/components/_link-header.scss +++ b/source/assets/css/components/_link-header.scss @@ -1,26 +1,42 @@ -.sl-c-link-header { - - a { +h1, h2, h3, h4, h5, h6 { + a.anchor { + display: block; + float: left; + vertical-align: middle; + margin: { + left: -1.5rem; + top: -3px; + } + width: 1.5rem; + background: none; border: 0; - display: flex; - justify-content: space-between; - align-items: center; - &:after { - margin: { - right: .5rem; - left: 1rem; - }; - font-size: 1rem; - content: "\1F517"; + &::after { visibility: hidden; + font: { + size: 1rem; + weight: normal; + } + content: "\1F517"; } + } + + &:hover a.anchor::after { + visibility: visible; + } + + &:target { + animation-name: highlight-header; + animation-duration: 5s; + } +} - &:hover, - &:focus { - background: none; +@keyframes highlight-header { + from { + background-color: $sl-color--dawn-pink; + } - &:after { visibility: visible; } - } + to { + background-color: unset; } } diff --git a/source/styleguide/components.html.haml b/source/styleguide/components.html.haml index c4d02de95..f6e785333 100644 --- a/source/styleguide/components.html.haml +++ b/source/styleguide/components.html.haml @@ -37,17 +37,14 @@ title: Components .sl-c-introduction %p= lorem.paragraph -%h2.sl-c-link-header - = link_to '#' do - %span Link Header 2 +%h2#link-header-2 + Link Header 2 -%h3.sl-c-link-header - = link_to '#' do - %span Link Header 3 +%h3#link-header-3 + Link Header 3 -%h4.sl-c-link-header - = link_to '#' do - %span Link Header 4 +%h4#link-header-4 + Link Header 4 .sl-c-list-navigation-wrapper :markdown