Merge pull request #846 from jimporter/anchor-padding

Fix the padding above header elements so that hovering over them work…

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 {

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();