Update to support octicon and change header anchor styles

bower.json

@@ -47,6 +47,7 @@
     "markdown-it-sup": "^1.0.0",
     "markdown-it-container": "^2.0.0",
     "mermaid": "^0.5.8",
-    "MathJax": "^2.6.1"
+    "MathJax": "^2.6.1",
+    "octicons": "^3.5.0"
   }
 }

public/css/extra.css

@@ -81,30 +81,6 @@
     height: 100%;
 }
 
-h1:hover .header-link,
-h2:hover .header-link,
-h3:hover .header-link,
-h4:hover .header-link,
-h5:hover .header-link,
-h6:hover .header-link {
-    opacity: 1;
-    -webkit-transition: opacity 0.2s ease-in-out 0.1s;
-    -moz-transition: opacity 0.2s ease-in-out 0.1s;
-    -o-transition: opacity 0.2s ease-in-out 0.1s;
-    transition: opacity 0.2s ease-in-out 0.1s;
-}
-.header-link {
-    position: relative;
-    left: 0.5em;
-    right: 0.5em;
-    opacity: 0;
-    font-size: 0.8em;
-    -webkit-transition: opacity 0.2s ease-in-out 0.1s;
-    -moz-transition: opacity 0.2s ease-in-out 0.1s;
-    -o-transition: opacity 0.2s ease-in-out 0.1s;
-    transition: opacity 0.2s ease-in-out 0.1s;
-}
-
 .ui-infobar {
     max-width: 758px;
     margin-top: 25px;

public/css/github-extract.css

@@ -14,38 +14,29 @@
     color: #c00;
 }
 .markdown-body .anchor {
-    position: absolute;
+    display: inline-block;
-    top: 0;
+    padding-right: 2px;
-    bottom: 0;
+    margin-left: -18.36px;
-    left: 0;
-    display: block;
-    padding-right: 6px;
-    padding-left: 30px;
-    margin-left: -30px;
 }
 .markdown-body .anchor:focus {
     outline: none;
 }
 .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
-    position: relative;
     margin-top: 1em;
     margin-bottom: 16px;
     font-weight: bold;
     line-height: 1.4;
 }
 .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link {
-    display: none;
     color: #000;
     vertical-align: middle;
+    visibility: hidden;
 }
 .markdown-body h1:hover .anchor, .markdown-body h2:hover .anchor, .markdown-body h3:hover .anchor, .markdown-body h4:hover .anchor, .markdown-body h5:hover .anchor, .markdown-body h6:hover .anchor {
-    padding-left: 8px;
-    margin-left: -30px;
-    line-height: 1;
     text-decoration: none;
 }
 .markdown-body h1:hover .anchor .octicon-link, .markdown-body h2:hover .anchor .octicon-link, .markdown-body h3:hover .anchor .octicon-link, .markdown-body h4:hover .anchor .octicon-link, .markdown-body h5:hover .anchor .octicon-link, .markdown-body h6:hover .anchor .octicon-link {
-    display: inline-block;
+    visibility: visible;
 }
 .markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code {
     font-size: inherit;
@@ -56,26 +47,44 @@
     line-height: 1.2;
     border-bottom: 1px solid #eee;
 }
+.markdown-body h1 .anchor {
+    line-height: 1;
+}
 .markdown-body h2 {
     padding-bottom: 0.3em;
     font-size: 1.75em;
     line-height: 1.225;
     border-bottom: 1px solid #eee;
 }
+.markdown-body h2 .anchor {
+    line-height: 1;
+}
 .markdown-body h3 {
     font-size: 1.5em;
     line-height: 1.43;
 }
+.markdown-body h3 .anchor {
+    line-height: 1.2;
+}
 .markdown-body h4 {
     font-size: 1.25em;
 }
+.markdown-body h4 .anchor {
+    line-height: 1.2;
+}
 .markdown-body h5 {
     font-size: 1em;
 }
+.markdown-body h5 .anchor {
+    line-height: 1.1;
+}
 .markdown-body h6 {
     font-size: 1em;
     color: #777;
 }
+.markdown-body h6 .anchor {
+    line-height: 1.1;
+}
 .markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre {
     margin-top: 0;
     margin-bottom: 16px;

public/js/extra.js

@@ -613,9 +613,9 @@ function imgPlayiframe(element, src) {
 
 var anchorForId = function (id) {
     var anchor = document.createElement("a");
-    anchor.className = "header-link hidden-xs";
+    anchor.className = "anchor hidden-xs";
     anchor.href = "#" + id;
-    anchor.innerHTML = "<span class=\"sr-only\"></span><i class=\"fa fa-link\"></i>";
+    anchor.innerHTML = "<span class=\"octicon octicon-link\"></span>";
     anchor.title = id;
     return anchor;
 };
@@ -624,13 +624,13 @@ var linkifyAnchors = function (level, containingElement) {
     var headers = containingElement.getElementsByTagName("h" + level);
     for (var h = 0; h < headers.length; h++) {
         var header = headers[h];
-        if (header.getElementsByClassName("header-link").length == 0) {
+        if (header.getElementsByClassName("anchor").length == 0) {
             if (typeof header.id == "undefined" || header.id == "") {
                 //to escape characters not allow in css and humanize
                 var id = slugifyWithUTF8(header.innerHTML);
                 header.id = id;
             }
-            header.appendChild(anchorForId(header.id));
+            header.insertBefore(anchorForId(header.id), header.firstChild);
         }
     }
 };

public/views/head.ejs

@@ -14,11 +14,13 @@
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="//cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
+<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.0/bootstrap-social.min.css">
 <% } else { %>
 <link rel="stylesheet" href="<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/font-awesome/css/font-awesome.min.css">
 <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
+<link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
 <link rel="stylesheet" href="<%- url %>/css/bootstrap-social.css">
 <% } %>
 <link rel="stylesheet" href="<%- url %>/vendor/jquery-ui/jquery-ui.min.css">

public/views/html.hbs

@@ -19,6 +19,7 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/8.8.0/styles/github-gist.min.css">
     <style>
         {{{css}}}

public/views/pretty.ejs

@@ -18,10 +18,12 @@
 	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/ionicons/2.0.1/css/ionicons.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">
 	<% } else { %>
 	<link rel="stylesheet" href='<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css'>
     <link rel="stylesheet" href='<%- url %>/vendor/font-awesome/css/font-awesome.min.css'>
     <link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.min.css">
+    <link rel="stylesheet" href="<%- url %>/vendor/octicons/octicons/octicons.css">
 	<% } %>
     <link rel="stylesheet" href='<%- url %>/css/github-extract.css'>
     <link rel="stylesheet" href='<%- url %>/css/gist.css'>