Fix cross-browser monospace font rendering (Firefox CSS).

Syntax tables rely on precise monospace font rendering
with regard to font-size and especially line-height.
This applies more specific selectors, in an attempt to
have Firefox render identically to Chrome.
This commit is contained in:
Lou Quillio 2017-08-03 12:04:54 -07:00
parent 4503028fb7
commit 55a704b61b

View File

@ -5,7 +5,7 @@
*/
@import url('https://fonts.googleapis.com/css?family=Inconsolata')
$monofont: 'Inconsolata', monospace
$monofont: 'Inconsolata'
$gridcolor: #ddd
$gridweight: 2px
@ -28,19 +28,24 @@ table.terms th
div.draco-syntax pre
background-color: #fff
background-image: linear-gradient(90deg, transparent 660px, #abced4 660px, #abced4 662px, transparent 582px), linear-gradient($gridcolor .1em, transparent .1em)
background-image: linear-gradient(90deg, transparent 600px, #abced4 600px, #abced4 602px, transparent 602px), linear-gradient($gridcolor .1em, transparent .1em)
background-size: 100% 1.3em
border-left: $gridweight solid $gridcolor
border-right: $gridweight solid $gridcolor
border-bottom: $gridweight solid $gridcolor
white-space: pre
font-family: $monofont
font-size: 14px
padding: 0 14px
line-height: 18px
font-size: 1em
padding: 0 1em
line-height: 1.3
margin-left: 1em
width: 840px
//overflow: auto
width: 740px
// Specifically override Bootstrap defaults
code, kbd, pre, samp
font-family: $monofont
font-size: 1em
line-height: 1.3
ol.breadcrumb
background-color: #fff