.markup-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; @spacing-lg: @md-line-height * 3 * @scale * 1em; display: block; word-wrap: break-word; overflow: hidden; color: @md-color; line-height: @md-line-height; * { .box-sizing(border-box); } & > *:first-child { margin-top: 0 !important; } & > *:last-child { margin-bottom: 0 !important; } /* Printing */ pre, code, blockquote, tr, img, table, figure { page-break-inside: avoid; } p, h2, h3, h4, h5 { orphans: 3; widows: 3; } h1, h2, h3, h4, h5 { page-break-after: avoid; } /* Typography */ strong, b { font-weight: bold; } em { font-style: italic; } /* 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; } } /* Images */ img { border: 0; max-width: 100%; } /* Horizontal lines */ hr { height: 4px; padding: 0; margin: @md-line-height * 1em 0; overflow: hidden; background-color: #e7e7e7; border: none; &:before, &:after { display: table; content: " "; } &:after { clear: both; } } /* Headings */ h1, h2, h3, h4, h5, h6 { margin-top: @spacing-lg; margin-bottom: @spacing; font-weight: bold; } h1 { font-size: (4 * @scale) + 1em; } h2 { font-size: (3 * @scale) + 1em; } h3 { font-size: (2 * @scale) + 1em; } h4 { font-size: @scale + 1em; } h5 { font-size: 1em; } h6 { font-size: 1em; } /* Code blocks */ code, pre { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; direction: ltr; margin: 0px; padding: 0px; border: none; } pre { overflow: auto; word-wrap: normal; margin: 0px; padding: 0.85em 1em; margin-bottom: @spacing-lg; 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; } } } code { padding: 0.2em; margin: 0; font-size: @md-code-fontsize * 1em; background-color: @md-code-background; &:before, &:after { letter-spacing: -0.2em; content: "\00a0"; } } /* Tables */ table { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; overflow: auto; td, th { padding: 6px 13px; border: 1px solid #ddd; } tr { background-color: #fff; border-top: 1px solid #ccc; &:nth-child(2n) { background-color: #f8f8f8; } } th { font-weight: bold; } } /* Lists */ ul, ol { padding: 0; margin-top: 0; margin-bottom: 0; padding-left: 2em; ol, ul { margin-top: 0; margin-bottom: 0; } } ol ol { list-style-type: lower-roman; } /* Blockquote */ blockquote { margin: 0; padding: 0 15px; color: @md-blockquote-color; border-left: 4px solid @md-blockquote-border; &:first-child { margin-top: 0; } &:last-child { margin-bottom: 0; } } /* Description Lists */ dl { padding: 0; dt { padding: 0; margin-top: @spacing; font-style: italic; font-weight: bold; } dd { padding: 0 @spacing; margin-bottom: @spacing; } } dd { margin-left: 0; } }