Markdown CSS tweaks (#15572)

Update Markdown CSS to more closely match GH rendering. Changes include
better nested list margins and tweaked font sizes.

Co-authored-by: Lauris BH <lauris@nix.lv>
This commit is contained in:
silverwind 2021-05-01 23:32:43 +02:00 committed by GitHub
parent ae6d7860be
commit a64cdfd4fd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -1,7 +1,7 @@
.markdown:not(code) { .markdown:not(code) {
overflow: hidden; overflow: hidden;
font-size: 16px; font-size: 16px;
line-height: 1.6 !important; line-height: 1.5 !important;
word-wrap: break-word; word-wrap: break-word;
&.ui.segment { &.ui.segment {
@ -75,14 +75,10 @@
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 1em; margin-top: 24px;
margin-bottom: 16px; margin-bottom: 16px;
font-weight: 600; font-weight: 600;
line-height: 1.4; line-height: 1.25;
&:first-of-type {
margin-top: 0 !important;
}
} }
h1 tt, h1 tt,
@ -102,38 +98,36 @@
h1 { h1 {
padding-bottom: .3em; padding-bottom: .3em;
font-size: 2.25em; font-size: 2em;
line-height: 1.2;
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
} }
h2 { h2 {
padding-bottom: .3em; padding-bottom: .3em;
font-size: 1.75em; font-size: 1.5em;
line-height: 1.225;
border-bottom: 1px solid var(--color-secondary); border-bottom: 1px solid var(--color-secondary);
} }
h3 { h3 {
font-size: 1.5em;
line-height: 1.43;
}
h4 {
font-size: 1.25em; font-size: 1.25em;
} }
h5 { h4 {
font-size: 1em; font-size: 1em;
} }
h5 {
font-size: .875em;
}
h6 { h6 {
font-size: 1em; font-size: .85em;
color: var(--color-text-light-2); color: var(--color-text-light-2);
} }
p, p,
blockquote, blockquote,
details,
ul, ul,
ol, ol,
dl, dl,
@ -232,7 +226,11 @@
} }
li > p { li > p {
margin-top: 0; margin-top: 16px;
}
li + li {
margin-top: .25em;
} }
dl { dl {
@ -268,10 +266,13 @@
} }
table { table {
width: auto;
overflow: auto;
word-break: keep-all;
display: block; display: block;
width: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
max-width: 100%;
overflow: auto;
} }
table th { table th {
@ -294,11 +295,20 @@
img { img {
max-width: 100%; max-width: 100%;
box-sizing: border-box; box-sizing: initial;
}
img[align="right"] {
padding-left: 20px;
}
img[align="left"] {
padding-right: 20px;
} }
.emoji { .emoji {
max-width: none; max-width: none;
vertical-align: text-top;
} }
span.frame { span.frame {
@ -391,11 +401,11 @@
code, code,
tt { tt {
padding: .2em .3em; padding: .2em .4em;
margin: 0; margin: 0;
font-size: 85%; font-size: 85%;
background-color: var(--color-markdown-code-block); background-color: var(--color-markdown-code-block);
border-radius: 3px; border-radius: 4px;
} }
code br, code br,
@ -428,7 +438,7 @@
font-size: 85%; font-size: 85%;
line-height: 1.45; line-height: 1.45;
background-color: var(--color-markdown-code-block); background-color: var(--color-markdown-code-block);
border-radius: 3px; border-radius: 4px;
} }
.highlight pre { .highlight pre {