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:
		
							parent
							
								
									ae6d7860be
								
							
						
					
					
						commit
						a64cdfd4fd
					
				|  | @ -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 { | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue