depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update to support octicon and change header anchor styles

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
bower.json
View file

@ -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"
}
}

24
public/css/extra.css
View file

@ -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;

37
public/css/github-extract.css
View file

@ -14,38 +14,29 @@
color: #c00;
}
.markdown-body .anchor {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
padding-right: 6px;
padding-left: 30px;
margin-left: -30px;
display: inline-block;
padding-right: 2px;
margin-left: -18.36px;
}
.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;

2
public/css/html.min.css vendored
View file

File diff suppressed because one or more lines are too long

8
public/js/extra.js
View file

@ -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);
}
}
};

2
public/views/head.ejs
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/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">

1
public/views/html.hbs
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/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}}}

2
public/views/pretty.ejs
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/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'>