diff options
Diffstat (limited to 'theme/stylesheets/base/markdown.less')
-rw-r--r-- | theme/stylesheets/base/markdown.less | 455 |
1 files changed, 161 insertions, 294 deletions
diff --git a/theme/stylesheets/base/markdown.less b/theme/stylesheets/base/markdown.less index 1e235a8..6b3a656 100644 --- a/theme/stylesheets/base/markdown.less +++ b/theme/stylesheets/base/markdown.less @@ -1,12 +1,21 @@ -.markdown-content(@md-color: #000, @md-line-height: 1.6, @md-link-color: #4183c4) { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - line-height: 1.4; - color: @md-color; +.markdown-content(@md-color: #000, @md-line-height: 1.7, @md-link-color: #4183c4, @md-code-background: #f7f7f7, @md-code-fontsize: 0.85, @md-blockquote-color: #858585, @md-blockquote-border: #e5e5e5) { + // Rate of growth for headings + @scale: 0.25; + + // Spacing between blocks + @spacing: @md-line-height * 2 * @scale * 1em; + + + display: block; + word-wrap: break-word; overflow: hidden; + + color: @md-color; line-height: @md-line-height; - word-wrap: break-word; - display: block; + + * { + .box-sizing(border-box); + } & > *:first-child { margin-top: 0 !important; @@ -15,372 +24,230 @@ margin-bottom: 0 !important; } - a { - background: transparent; - } - - a:active, - a:hover { - outline: 0; - } - - strong { - font-weight: bold; - } - - h1 { - font-size: 2em; - margin: 0.67em 0; - } - - img { - border: 0; - } - - hr { - -moz-box-sizing: content-box; - box-sizing: content-box; - height: 0; + /* Printing */ + pre, code, blockquote, tr, img, table, figure { + page-break-inside: avoid; } - pre { - overflow: auto; + p, h2, h3, h4, h5 { + orphans: 3; + widows: 3; } - code, - pre { - font-family: monospace, monospace; - font-size: 1em; - direction: ltr; + h1, h2, h3, h4, h5 { + page-break-after: avoid; } - table { - border-collapse: collapse; - border-spacing: 0; + /* Typography */ + strong, b { + font-weight: bold; } - td, - th { - padding: 0; + em { + font-style: italic; } - * { - -moz-box-sizing: border-box; - box-sizing: border-box; + /* Spacing */ + p, blockquote, ul, ol, dl, table { + margin-top: 0; + margin-bottom: @spacing; } + /* Links */ a { color: @md-link-color; text-decoration: none; + background: transparent; + + &:hover, + &:focus, + &:active { + outline: 0; + text-decoration: underline; + } } - a:hover, - a:focus, - a:active { - text-decoration: underline; + /* Images */ + img { + border: 0; + max-width: 100%; } + /* Horizontal lines */ hr { - height: 0; - margin: 15px 0; + height: 4px; + padding: 0; + margin: @md-line-height * 1em 0; overflow: hidden; - background: transparent; - border: 0; - border-bottom: 1px solid #ddd; - } + background-color: #e7e7e7; + border: none; - hr:before, - hr:after { - display: table; - content: " "; - } + &:before, &:after { + display: table; + content: " "; + } - hr:after { - clear: both; + &:after { + clear: both; + } } - h1, - h2, - h3, - h4, - h5, - h6 { - margin-top: 15px; - margin-bottom: 15px; - line-height: 1.1; + /* Headings */ + h1, h2, h3, h4, h5, h6 { + margin-top: 2 * @spacing; + margin-bottom: @spacing; + font-weight: bold; } h1 { - font-size: 30px; + font-size: (4 * @scale) + 1em; } h2 { - font-size: 21px; + font-size: (3 * @scale) + 1em; } h3 { - font-size: 16px; + font-size: (2 * @scale) + 1em; } h4 { - font-size: 14px; + font-size: @scale + 1em; } h5 { - font-size: 12px; + font-size: 1em; } h6 { - font-size: 11px; - } - - blockquote { - margin: 0; - } - - ul, - ol { - padding: 0; - margin-top: 0; - margin-bottom: 0; - } - - ol ol { - list-style-type: lower-roman; - } - - dd { - margin-left: 0; + font-size: 1em; } - code, - pre { + /* Code blocks */ + code, pre { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; - font-size: 12px; + direction: ltr; + margin: 0px; + padding: 0px; + border: none; } pre { - margin-top: 0; - margin-bottom: 0; - } - - .markdown-body>*:first-child { - margin-top: 0 !important; - } - - .markdown-body>*: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; + overflow: auto; + word-wrap: normal; + margin: 0px; + padding: 0.85em 1em; + margin-bottom: 2 * @spacing; + background: @md-code-background; + + > code { + display: inline; + max-width: initial; + padding: 0; + margin: 0; + overflow: initial; + line-height: inherit; + font-size: @md-code-fontsize * 1em; + white-space: pre; + background: transparent; + + &:before, &:after { + content: normal; + } + } } - h1 { - padding-bottom: 0.3em; - font-size: 2.25em; - line-height: 1.2; - } + code { + padding: 0.2em; + margin: 0; + font-size: @md-code-fontsize * 1em; + background-color: @md-code-background; - h2 { - padding-bottom: 0.3em; - font-size: 1.75em; - line-height: 1.225; + &:before, &:after { + letter-spacing: -0.2em; + content: "\00a0"; + } } - h3 { - font-size: 1.5em; - line-height: 1.43; - } + /* Tables */ + table { + display: table; + width: 100%; + border-collapse: collapse; + border-spacing: 0; + overflow: auto; - h4 { - font-size: 1.25em; - } + td, th { + padding: 6px 13px; + border: 1px solid #ddd; + } - h5 { - font-size: 1em; - } + tr { + background-color: #fff; + border-top: 1px solid #ccc; - h6 { - font-size: 1em; - color: #777; - } + &:nth-child(2n) { + background-color: #f8f8f8; + } + } - p, - blockquote, - ul, - ol, - dl, - table, - pre { - margin-top: 0; - margin-bottom: 16px; + th { + font-weight: bold; + } } - hr { - height: 4px; + /* Lists */ + ul, ol { padding: 0; - margin: 16px 0; - background-color: #e7e7e7; - border: 0 none; - } - - ul, - ol { - padding-left: 2em; - } - - ol ol, - ol ul, - ul ul { margin-top: 0; margin-bottom: 0; - } + padding-left: 2em; - dl { - padding: 0; + ol, ul { + margin-top: 0; + margin-bottom: 0; + } } - dl dt { - padding: 0; - margin-top: 16px; - font-size: 1em; - font-style: italic; - font-weight: bold; + ol ol { + list-style-type: lower-roman; } - dl dd { - padding: 0 16px; - margin-bottom: 16px; - } + /* Blockquote */ blockquote { + margin: 0; padding: 0 15px; - color: #777; - border-left: 4px solid #ddd; - } - - blockquote>:first-child { - margin-top: 0; - } - - blockquote>:last-child { - margin-bottom: 0; - } - - table { - display: block; - width: 100%; - overflow: auto; - } - - table th { - font-weight: bold; - } - - table th, - table td { - padding: 6px 13px; - border: 1px solid #ddd; - } - - table tr { - background-color: #fff; - border-top: 1px solid #ccc; - } - - table tr:nth-child(2n) { - background-color: #f8f8f8; - } - - img { - max-width: 100%; - -moz-box-sizing: border-box; - box-sizing: border-box; - } + color: @md-blockquote-color; + border-left: 4px solid @md-blockquote-border; - code { - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; - margin: 0; - font-size: 85%; - background-color: #f7f7f7; - border-radius: 3px; - } + &:first-child { + margin-top: 0; + } - code:before, - code:after { - letter-spacing: -0.2em; - content: "\00a0"; + &:last-child { + margin-bottom: 0; + } } - pre>code { + /* Description Lists */ + dl { padding: 0; - margin: 0; - font-size: 100%; - white-space: pre; - background: transparent; - border: 0; - } - - .highlight pre, - pre { - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - background-color: #f7f7f7; - border: none; - border-radius: 3px; - } - - pre { - word-wrap: normal; - } - pre code { - display: inline; - max-width: initial; - padding: 0; - margin: 0; - overflow: initial; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; - } + dt { + padding: 0; + margin-top: @spacing; + font-style: italic; + font-weight: bold; + } - pre code:before, - pre code:after { - content: normal; + dd { + padding: 0 @spacing; + margin-bottom: @spacing; + } } - .highlight { - background: #ffffff; + dd { + margin-left: 0; } } |