diff --git a/lib/GUI/css/main.less b/lib/GUI/css/main.less index ce1f3acca..4ca38a788 100644 --- a/lib/GUI/css/main.less +++ b/lib/GUI/css/main.less @@ -34,6 +34,11 @@ header { #header-inner { max-width: @contentWidth + @headerPadding*2; margin: 0 auto; + + .logo-container { + width: 400px; // width of npm logo + margin: 0 auto; + } } } @@ -67,7 +72,7 @@ h1 { text-align: left; color: #FFF; margin-top: 20px; - + code { font-family: Consolas, monaco, monospace; } @@ -197,4 +202,4 @@ h2 { code { font-size: 1.2em; } -} \ No newline at end of file +} diff --git a/lib/GUI/css/markdown.less b/lib/GUI/css/markdown.less index a62cb55bb..9bfc80c47 100644 --- a/lib/GUI/css/markdown.less +++ b/lib/GUI/css/markdown.less @@ -1,268 +1,700 @@ -/*** Sourced from this Gist: https://gist.github.com/andyferra/2554919 ***/ +/*** Sourced from this Gist: https://github.com/sindresorhus/github-markdown-css ***/ +@font-face { + font-family: octicons-anchor; + src: url(data:font/woff;charset=utf-8;base64,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) format('woff'); +} .readme { + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + color: #333; + overflow: hidden; + font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; + font-size: 16px; + line-height: 1.6; + word-wrap: break-word; + + a { - color: #4183C4; } - a.absent { - color: #cc0000; } - a.anchor { - display: block; - padding-left: 30px; - margin-left: -30px; - cursor: pointer; - position: absolute; - top: 0; - left: 0; - bottom: 0; } + background: transparent; - h1, h2, h3, h4, h5, h6 { - margin: 20px 0 10px; - padding: 0; + &:active, + &:hover { + outline: 0; + } + } + + strong { font-weight: bold; - -webkit-font-smoothing: antialiased; - cursor: text; - position: relative; } - - h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { - background: url("../../images/modules/styleguide/para.png") no-repeat 10px center; - text-decoration: none; } - - h1 tt, h1 code { - font-size: inherit; } - - h2 tt, h2 code { - font-size: inherit; } - - h3 tt, h3 code { - font-size: inherit; } - - h4 tt, h4 code { - font-size: inherit; } - - h5 tt, h5 code { - font-size: inherit; } - - h6 tt, h6 code { - font-size: inherit; } + } h1 { - font-size: 28px; - color: black; } - - h2 { - font-size: 24px; - border-bottom: 1px solid #cccccc; - color: black; } - - h3 { - font-size: 18px; } - - h4 { - font-size: 16px; } - - h5 { - font-size: 14px; } - - h6 { - color: #777777; - font-size: 14px; } - - p, blockquote, ul, ol, dl, li, table, pre { - margin: 15px 0; } - - hr { - background: transparent url("../../images/modules/pulls/dirty-shade.png") repeat-x 0 0; - border: 0 none; - color: #cccccc; - height: 4px; - padding: 0; } - - body > h2:first-child { - margin-top: 0; - padding-top: 0; } - body > h1:first-child { - margin-top: 0; - padding-top: 0; } - body > h1:first-child + h2 { - margin-top: 0; - padding-top: 0; } - body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { - margin-top: 0; - padding-top: 0; } - - a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { - margin-top: 0; - padding-top: 0; } - - h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { - margin-top: 0; } - - li p.first { - display: inline-block; } - - ul, ol { - padding-left: 30px; } - - ul :first-child, ol :first-child { - margin-top: 0; } - - ul :last-child, ol :last-child { - margin-bottom: 0; } - - dl { - padding: 0; } - dl dt { - font-size: 14px; - font-weight: bold; - font-style: italic; - padding: 0; - margin: 15px 0 5px; } - dl dt:first-child { - padding: 0; } - dl dt > :first-child { - margin-top: 0; } - dl dt > :last-child { - margin-bottom: 0; } - dl dd { - margin: 0 0 15px; - padding: 0 15px; } - dl dd > :first-child { - margin-top: 0; } - dl dd > :last-child { - margin-bottom: 0; } - - blockquote { - border-left: 4px solid #dddddd; - padding: 0 15px; - color: #777777; } - blockquote > :first-child { - margin-top: 0; } - blockquote > :last-child { - margin-bottom: 0; } - - table { - padding: 0; } - table tr { - border-top: 1px solid #cccccc; - background-color: white; - margin: 0; - padding: 0; } - table tr:nth-child(2n) { - background-color: #f8f8f8; } - table tr th { - font-weight: bold; - border: 1px solid #cccccc; - text-align: left; - margin: 0; - padding: 6px 13px; } - table tr td { - border: 1px solid #cccccc; - text-align: left; - margin: 0; - padding: 6px 13px; } - table tr th :first-child, table tr td :first-child { - margin-top: 0; } - table tr th :last-child, table tr td :last-child { - margin-bottom: 0; } + text-align: left; + font-size: 2em; + margin: 0.67em 0; + } img { - margin: 10px 0; - max-width: 100%; } + border: 0; + } - span.frame { - display: block; - overflow: hidden; } - span.frame > span { - border: 1px solid #dddddd; - display: block; - float: left; - overflow: hidden; - margin: 13px 0 0; - padding: 7px; - width: auto; } - span.frame span img { - display: block; - float: left; } - span.frame span span { - clear: both; - color: #333333; - display: block; - padding: 5px 0 0; } - span.align-center { - display: block; - overflow: hidden; - clear: both; } - span.align-center > span { - display: block; - overflow: hidden; - margin: 13px auto 0; - text-align: center; } - span.align-center span img { - margin: 0 auto; - text-align: center; } - span.align-right { - display: block; - overflow: hidden; - clear: both; } - span.align-right > span { - display: block; - overflow: hidden; - margin: 13px 0 0; - text-align: right; } - span.align-right span img { - margin: 0; - text-align: right; } - span.float-left { - display: block; - margin-right: 13px; - overflow: hidden; - float: left; } - span.float-left span { - margin: 13px 0 0; } - span.float-right { - display: block; - margin-left: 13px; - overflow: hidden; - float: right; } - span.float-right > span { - display: block; - overflow: hidden; - margin: 13px auto 0; - text-align: right; } - - code, tt { - margin: 0 2px; - padding: 0 5px; - white-space: nowrap; - border: 1px solid #eaeaea; - background-color: #f8f8f8; - border-radius: 3px; } - - pre code { - margin: 0; - padding: 0; - white-space: pre; - border: none; - background: transparent; } - - .highlight pre { - background-color: #f8f8f8; - border: 1px solid #cccccc; - font-size: 13px; - line-height: 19px; - overflow: auto; - padding: 6px 10px; - border-radius: 3px; } + hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; + } pre { - background-color: #f8f8f8; - border: 1px solid #cccccc; - font-size: 13px; - line-height: 19px; overflow: auto; - padding: 6px 10px; - border-radius: 3px; } - pre code, pre tt { + } + + code, + kbd, + pre { + font-family: monospace, monospace; + font-size: 1em; + } + + input { + color: inherit; + font: inherit; + margin: 0; + } + + html input[disabled] { + cursor: default; + } + + input { + line-height: normal; + } + + input[type="checkbox"] { + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + td, + th { + padding: 0; + } + + * { + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + input { + font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; + } + + a { + color: #4183c4; + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + } + } + + hr { + height: 0; + margin: 15px 0; + overflow: hidden; + background: transparent; + border: 0; + border-bottom: 1px solid #ddd; + + &:before { + display: table; + content: ""; + } + + &:after { + display: table; + clear: both; + content: ""; + } + } + + h1, + h2, + h3, + h4, + h5, + h6 { + margin-top: 15px; + margin-bottom: 15px; + line-height: 1.1; + } + + h1 { + font-size: 30px; + } + + h2 { + font-size: 21px; + } + + h3 { + font-size: 16px; + } + + h4 { + font-size: 14px; + } + + h5 { + font-size: 12px; + } + + h6 { + font-size: 11px; + } + + blockquote { + margin: 0; + } + + ul, + ol { + padding: 0; + margin-top: 0; + margin-bottom: 0; + + ol { + list-style-type: lower-roman; + + ol { + list-style-type: lower-alpha; + } + } + } + + ul { + ul { + ol { + list-style-type: lower-alpha; + } + } + } + + ol { + ul { + ol { + list-style-type: lower-alpha; + } + } + } + + + dd { + margin-left: 0; + } + + code { + font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; + } + + pre { + margin-top: 0; + margin-bottom: 0; + font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; + } + + kbd { + background-color: #e7e7e7; + background-image: -webkit-linear-gradient(#fefefe, #e7e7e7); + background-image: linear-gradient(#fefefe, #e7e7e7); + background-repeat: repeat-x; + border-radius: 2px; + border: 1px solid #cfcfcf; + color: #000; + padding: 3px 5px; + line-height: 10px; + font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; + display: inline-block; + } + + >*:first-child { + margin-top: 0 !important; + } + + >*:last-child { + margin-bottom: 0 !important; + } + + .anchor { + position: absolute; + top: 0; + bottom: 0; + left: 0; + display: block; + padding-right: 6px; + padding-left: 30px; + margin-left: -30px; + } + + .anchor:focus { + outline: none; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + position: relative; + margin-top: 1em; + margin-bottom: 16px; + font-weight: bold; + line-height: 1.4; + + .octicon-link { + display: none; + color: #000; + vertical-align: middle; + } + + &:hover { + .anchor { + height: 1em; + padding-left: 8px; + margin-left: -30px; + line-height: 1; + text-decoration: none; + + .octicon-link { + display: inline-block; + } + } + } + } + + h1 { + padding-bottom: 0.3em; + font-size: 2.25em; + line-height: 1.2; + border-bottom: 1px solid #eee; + } + + h2 { + padding-bottom: 0.3em; + font-size: 1.75em; + line-height: 1.225; + border-bottom: 1px solid #eee; + } + + h3 { + font-size: 1.5em; + line-height: 1.43; + } + + h4 { + font-size: 1.25em; + } + + h5 { + font-size: 1em; + } + + h6 { + font-size: 1em; + color: #777; + } + + p, + blockquote, + ul, + ol, + dl, + table, + pre { + margin-top: 0; + margin-bottom: 16px; + } + + hr { + height: 4px; + padding: 0; + margin: 16px 0; + background-color: #e7e7e7; + border: 0 none; + } + + ul, + ol { + padding-left: 2em; + + ul, ol { + margin-top: 0; + margin-bottom: 0; + } + } + + li { + >p { + margin-top: 16px; + } + } + + dl { + padding: 0; + + dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: bold; + } + + dd { + padding: 0 16px; + margin-bottom: 16px; + } + } + + blockquote { + padding: 0 15px; + color: #777; + border-left: 4px solid #ddd; + + >:first-child { + margin-top: 0; + } + + >:last-child { + margin-bottom: 0; + } + } + + table { + display: block; + width: 100%; + overflow: auto; + word-break: normal; + word-break: keep-all; + + th { + font-weight: bold; + } + + th, + td { + padding: 6px 13px; + border: 1px solid #ddd; + } + + tr { + background-color: #fff; + border-top: 1px solid #ccc; + + &:nth-child(2n) { + background-color: #f8f8f8; + } + } + + + } + + img { + max-width: 100%; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + code { + padding: 0; + padding-top: 0.2em; + padding-bottom: 0.2em; + margin: 0; + font-size: 85%; + background-color: rgba(0,0,0,0.04); + border-radius: 3px; + + &:before, + &:after { + letter-spacing: -0.2em; + content: "\00a0"; + } + } + + pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: #f7f7f7; + border-radius: 3px; + word-wrap: normal; + + >code { + padding: 0; + margin: 0; + font-size: 100%; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; + display: inline; + max-width: initial; + padding: 0; + margin: 0; + overflow: initial; + line-height: inherit; + word-wrap: normal; background-color: transparent; - border: none; } -} \ No newline at end of file + border: 0; + + &:before, + &:after { + content: normal; + } + } + } + + .highlight { + margin-bottom: 16px; + background: #fff; + + pre { + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + background-color: #f7f7f7; + border-radius: 3px; + margin-bottom: 0; + word-break: normal; + } + } + + .highlight{ + .mf, + .mh, + .mi, + .mo, + .il, + .m { + color: #945277; + } + + .s, + .sb, + .sc, + .sd, + .s2, + .se, + .sh, + .si, + .sx, + .s1 { + color: #df5000; + } + + .kc, + .kd, + .kn, + .kp, + .kr, + .kt, + .k, + .o { + font-weight: bold; + } + + .kt { + color: #458; + } + + .c, + .cm, + .c1 { + color: #998; + font-style: italic; + } + + .cp, + .cs { + color: #999; + font-weight: bold; + } + + .cs { + font-style: italic; + } + + .n { + color: #333; + } + + .na, + .nv, + .vc, + .vg, + .vi { + color: #008080; + } + + .nb { + color: #0086B3; + } + + .nc { + color: #458; + font-weight: bold; + } + + .no { + color: #094e99; + } + + .ni { + color: #800080; + } + + .ne { + color: #990000; + font-weight: bold; + } + + .nf { + color: #945277; + font-weight: bold; + } + + .nn { + color: #555; + } + + .nt { + color: #000080; + } + + .err { + color: #a61717; + background-color: #e3d2d2; + } + + .gd { + color: #000; + background-color: #fdd; + + .x { + color: #000; + background-color: #faa; + } + } + + .ge { + font-style: italic; + } + + .gr { + color: #aa0000; + } + + .gh { + color: #999; + } + + .gi { + color: #000; + background-color: #dfd; + + .x { + color: #000; + background-color: #afa; + } + } + + .go { + color: #888; + } + + .gp { + color: #555; + } + + .gs { + font-weight: bold; + } + + .gu { + color: #800080; + font-weight: bold; + } + + .gt { + color: #aa0000; + } + + .ow { + font-weight: bold; + } + + .w { + color: #bbb; + } + + .sr { + color: #017936; + } + + .ss { + color: #8b467f; + } + + .bp { + color: #999; + } + + .gc { + color: #999; + background-color: #EAF2F5; + } + } + + .octicon { + font: normal normal 16px octicons-anchor; + line-height: 1; + display: inline-block; + text-decoration: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .octicon-link { + &:before { + content: '\f05c'; + } + } + + .task-list-item { + list-style-type: none; + + +.task-list-item { + margin-top: 3px; + } + + input { + float: left; + margin: 0.3em 0 0.25em -1.6em; + vertical-align: middle; + } + } +} diff --git a/lib/GUI/index.hbs b/lib/GUI/index.hbs index ff47af2f0..b2a7aef63 100644 --- a/lib/GUI/index.hbs +++ b/lib/GUI/index.hbs @@ -11,7 +11,9 @@