Make doc headers clickable again
...without preventing clicks on other things. Just use an `<a name="...">` tag that doesn't take up any space to make sure that we're not covering up something else. For whatever reason, doing `position: relative; top: -$navHeight;` doesn't work and causes the anchor target not to be moved up. This solution works in both Chrome and Firefox.
Ben Alpert committed
Nov 14, 2013 at 00:28 UTC
e94ebee15e07ef3997c9cdff4dc06773b82372eb
2 files changed
+11
-13
docs/_css/react.scss
+10
-12
@@ -77,21 +77,19 @@ li {
77
// Make header navigation linkable and on the screen. Used in documentation and
78
// blog posts.
79
h1, h2, h3, h4, h5, h6 {
80
- &.anchor {
81
- position: relative;
82
- top: -$navHeight;
83
- z-index: -1;
84
- > a {
85
- color: $darkTextColor;
86
- position: relative;
87
- top: $navHeight;
80
+ .anchor {
81
+ margin-top: -$navHeight;
82
+ position: absolute;
83
+ }
84
89
- &:hover {
90
- text-decoration: underline;
91
- }
92
- }
85
+ &:hover .hash-link {
86
+ display: inline;
87
}
88
}
89
+.hash-link {
90
+ color: $mediumTextColor;
91
+ display: none;
92
+}
93
94
// Main Nav
95
docs/_plugins/header_links.rb
+1
-1
@@ -11,7 +11,7 @@ class Redcarpet::Render::HTML
11
.gsub(/\s+/, "-")
12
.gsub(/[^A-Za-z0-9\-_.]/, "")
13
14
- return "<h#{level} id=\"#{clean_title}\" class=\"anchor\"><a href=\"##{clean_title}\">#{title}</a></h#{level}>"
14
+ return "<h#{level}><a class=\"anchor\" name=\"#{clean_title}\"></a>#{title} <a class=\"hash-link\" href=\"##{clean_title}\">#</a></h#{level}>"
15
end
16
end
17