From 55a704b61b1d4aa37cd12c452d80f6328c490f42 Mon Sep 17 00:00:00 2001
From: Lou Quillio <quillio@gmail.com>
Date: Thu, 3 Aug 2017 12:04:54 -0700
Subject: [PATCH] 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.
---
 docs/assets/css/spec-style.sass | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/docs/assets/css/spec-style.sass b/docs/assets/css/spec-style.sass
index 6e20d44..5b9a229 100644
--- a/docs/assets/css/spec-style.sass
+++ b/docs/assets/css/spec-style.sass
@@ -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