From cbb2eb24600c6d5a13168fc175bd9829cd183249 Mon Sep 17 00:00:00 2001
From: Jim Porter <jporter@mozilla.com>
Date: Fri, 26 Feb 2016 17:23:05 -0600
Subject: [PATCH] Fix the padding above header elements so that hovering over
 them works correctly; resolves #843

---
 mkdocs/themes/mkdocs/css/base.css | 32 ++++++++++++++++++++++++++++++-
 mkdocs/themes/mkdocs/js/base.js   |  6 ++++++
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/mkdocs/themes/mkdocs/css/base.css b/mkdocs/themes/mkdocs/css/base.css
index 0800cceb..8867b4eb 100644
--- a/mkdocs/themes/mkdocs/css/base.css
+++ b/mkdocs/themes/mkdocs/css/base.css
@@ -40,12 +40,42 @@ h1, h2, h3 {
     color: #444;
 }
 
-h1[id]:before, h2[id]:before, h3[id]:before, h4[id]:before, h5[id]:before, h6[id]:before {
+/*
+ * The code below adds some padding to the top of the current anchor target so
+ * that, when navigating to it, the header isn't hidden by the navbar at the
+ * top. This is especially complicated because we want to *remove* the padding
+ * after navigation so that hovering over the header shows the permalink icon
+ * correctly. Thus, we create a CSS animation to remove the extra padding after
+ * a second. We have two animations so that navigating to an anchor within the
+ * page always restarts the animation.
+ *
+ * See <https://github.com/mkdocs/mkdocs/issues/843> for more details.
+ */
+:target::before {
     content: "";
     display: block;
     margin-top: -75px;
     height: 75px;
     pointer-events: none;
+    animation: 0s 1s forwards collapse-anchor-padding-1;
+}
+
+body.clicky :target::before {
+  animation-name: collapse-anchor-padding-2;
+}
+
+@keyframes collapse-anchor-padding-1 {
+    to {
+        margin-top: 0;
+        height: 0;
+    }
+}
+
+@keyframes collapse-anchor-padding-2 {
+    to {
+        margin-top: 0;
+        height: 0;
+    }
 }
 
 h1 {
diff --git a/mkdocs/themes/mkdocs/js/base.js b/mkdocs/themes/mkdocs/js/base.js
index 081650cf..d98859c7 100644
--- a/mkdocs/themes/mkdocs/js/base.js
+++ b/mkdocs/themes/mkdocs/js/base.js
@@ -36,6 +36,12 @@ $('body').scrollspy({
     target: '.bs-sidebar',
 });
 
+/* Toggle the `clicky` class on the body when clicking links to let us
+   retrigger CSS animations. See ../css/base.css for more details. */
+$('a').click(function(e) {
+    $('body').toggleClass('clicky');
+});
+
 /* Prevent disabled links from causing a page reload */
 $("li.disabled a").click(function() {
     event.preventDefault();