add a hover link at section anchor.

masao · masao · commit 0b82563941a3 · 2014-08-11T23:38:26.000+09:00
diff --git a/_includes/themes/twitter/default.html b/_includes/themes/twitter/default.html
@@ -16,6 +16,7 @@
     <link href="{{ ASSET_PATH }}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link href="{{ ASSET_PATH }}/css/style.css?body=1" rel="stylesheet" type="text/css" media="all">
     <link href="{{ ASSET_PATH }}/css/enju.css" rel="stylesheet" type="text/css" media="all">
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 
     <!-- Le fav and touch icons -->
   <!-- Update these with your own images
@@ -24,6 +25,10 @@
     <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
     <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
   -->
+    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
+    <script type="text/javascript">
+    google.load("jquery", "1.5.1");
+    </script>
   </head>
 
   <body>
@@ -53,5 +58,18 @@
     </div> <!-- /container -->
 
     {% include JB/analytics %}
+  <script language="JavaScript" type="application/javascript">
+  $(function() {
+    return $("h2, h3, h4, h5, h6").each(function(i, el) {
+      var $el, icon, id;
+      $el = $(el);
+      id = $el.attr('id');
+      icon = '<span class="fa fa-link"></span>';
+      if (id) {
+        return $el.prepend($("<a />").addClass("header-link").attr("href", "#" + id).html(icon));
+      }
+    });
+  });
+  </script>
   </body>
 </html>
diff --git a/assets/themes/twitter/css/enju.css b/assets/themes/twitter/css/enju.css
@@ -11,3 +11,26 @@ div.memo {
   margin-left: 2em;
   margin-right: 2em;
 }
+
+/* http://ben.balter.com/2014/03/13/pages-anchor-links/ */
+.header-link {
+  position: absolute;
+  left: -1em;
+  opacity: 0;
+
+  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
+  -moz-transition: opacity 0.2s ease-in-out 0.1s;
+  -ms-transition: opacity 0.2s ease-in-out 0.1s;
+}
+
+h2, h3, h4, h5, h6 {
+  position: relative;
+}
+h2:hover .header-link,
+h3:hover .header-link,
+h4:hover .header-link,
+h5:hover .header-link,
+h6:hover .header-link {
+  opacity: 1;
+}
+
