Update to support octicon and change header anchor styles

This commit is contained in:
Cheng-Han, Wu 2016-04-20 18:22:18 +08:00
parent 7e69bfc40b
commit b40bf3aef7
8 changed files with 35 additions and 44 deletions

View file

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

View file

@ -81,30 +81,6 @@
height: 100%; 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 { .ui-infobar {
max-width: 758px; max-width: 758px;
margin-top: 25px; margin-top: 25px;

View file

@ -14,38 +14,29 @@
color: #c00; color: #c00;
} }
.markdown-body .anchor { .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 { .markdown-body .anchor:focus {
outline: none; outline: none;
} }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 { .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
position: relative;
margin-top: 1em; margin-top: 1em;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: bold; font-weight: bold;
line-height: 1.4; 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 { .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; color: #000;
vertical-align: middle; 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 { .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; 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 { .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 { .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; font-size: inherit;
@ -56,26 +47,44 @@
line-height: 1.2; line-height: 1.2;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.markdown-body h1 .anchor {
line-height: 1;
}
.markdown-body h2 { .markdown-body h2 {
padding-bottom: 0.3em; padding-bottom: 0.3em;
font-size: 1.75em; font-size: 1.75em;
line-height: 1.225; line-height: 1.225;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
} }
.markdown-body h2 .anchor {
line-height: 1;
}
.markdown-body h3 { .markdown-body h3 {
font-size: 1.5em; font-size: 1.5em;
line-height: 1.43; line-height: 1.43;
} }
.markdown-body h3 .anchor {
line-height: 1.2;
}
.markdown-body h4 { .markdown-body h4 {
font-size: 1.25em; font-size: 1.25em;
} }
.markdown-body h4 .anchor {
line-height: 1.2;
}
.markdown-body h5 { .markdown-body h5 {
font-size: 1em; font-size: 1em;
} }
.markdown-body h5 .anchor {
line-height: 1.1;
}
.markdown-body h6 { .markdown-body h6 {
font-size: 1em; font-size: 1em;
color: #777; 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 { .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-top: 0;
margin-bottom: 16px; margin-bottom: 16px;

File diff suppressed because one or more lines are too long

View file

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

View file

@ -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/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="//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="//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"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.9.0/bootstrap-social.min.css">
<% } else { %> <% } else { %>
<link rel="stylesheet" href="<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css"> <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/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.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 %>/css/bootstrap-social.css">
<% } %> <% } %>
<link rel="stylesheet" href="<%- url %>/vendor/jquery-ui/jquery-ui.min.css"> <link rel="stylesheet" href="<%- url %>/vendor/jquery-ui/jquery-ui.min.css">

View file

@ -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/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://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://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"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/8.8.0/styles/github-gist.min.css">
<style> <style>
{{{css}}} {{{css}}}

View file

@ -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/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://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://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 { %> <% } else { %>
<link rel="stylesheet" href='<%- url %>/vendor/bootstrap/dist/css/bootstrap.min.css'> <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/font-awesome/css/font-awesome.min.css'>
<link rel="stylesheet" href="<%- url %>/vendor/Ionicons/css/ionicons.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/github-extract.css'>
<link rel="stylesheet" href='<%- url %>/css/gist.css'> <link rel="stylesheet" href='<%- url %>/css/gist.css'>