From e94ebee15e07ef3997c9cdff4dc06773b82372eb Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Thu, 14 Nov 2013 00:28:29 -0800
Subject: [PATCH] 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.
---
 docs/_css/react.scss          | 24 +++++++++++-------------
 docs/_plugins/header_links.rb |  2 +-
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/docs/_css/react.scss b/docs/_css/react.scss
index e0046b3e69..c502b06b79 100644
--- a/docs/_css/react.scss
+++ b/docs/_css/react.scss
@@ -77,20 +77,18 @@ li {
 // Make header navigation linkable and on the screen. Used in documentation and
 // blog posts.
 h1, h2, h3, h4, h5, h6 {
-  &.anchor {
-    position: relative;
-    top: -$navHeight;
-    z-index: -1;
-    > a {
-      color: $darkTextColor;
-      position: relative;
-      top: $navHeight;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
+  .anchor {
+    margin-top: -$navHeight;
+    position: absolute;
   }
+
+  &:hover .hash-link {
+    display: inline;
+  }
+}
+.hash-link {
+  color: $mediumTextColor;
+  display: none;
 }
 
 // Main Nav
diff --git a/docs/_plugins/header_links.rb b/docs/_plugins/header_links.rb
index 93971d968d..1172bde484 100644
--- a/docs/_plugins/header_links.rb
+++ b/docs/_plugins/header_links.rb
@@ -11,7 +11,7 @@ class Redcarpet::Render::HTML
       .gsub(/\s+/, "-")
       .gsub(/[^A-Za-z0-9\-_.]/, "")
 
-    return "<h#{level} id=\"#{clean_title}\" class=\"anchor\"><a href=\"##{clean_title}\">#{title}</a></h#{level}>"
+    return "<h#{level}><a class=\"anchor\" name=\"#{clean_title}\"></a>#{title} <a class=\"hash-link\" href=\"##{clean_title}\">#</a></h#{level}>"
   end
 end