From 6d5a278941739413645b1ab15cdb1358e85f61db Mon Sep 17 00:00:00 2001
From: Thibaut Courouble <thibaut@me.com>
Date: Mon, 8 Oct 2018 18:20:28 -0400
Subject: [PATCH] Make sure the "browser unsupported" message is styled
 properly

---
 assets/stylesheets/components/_fail.scss  | 4 ++--
 assets/stylesheets/global/_base.scss      | 4 +++-
 assets/stylesheets/global/_variables.scss | 6 +++++-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/assets/stylesheets/components/_fail.scss b/assets/stylesheets/components/_fail.scss
index 7fb8d192..535100ac 100644
--- a/assets/stylesheets/components/_fail.scss
+++ b/assets/stylesheets/components/_fail.scss
@@ -1,4 +1,4 @@
-._fail {
+._fail { // Don't use CSS variables, in case the browser doesn't support them.
   display: block;
   position: relative;
   top: 1.5rem;
@@ -23,7 +23,7 @@
 ._fail-title {
   margin: 0 0 1rem;
   font-size: 1rem;
-  font-weight: var(--boldFontWeight);
+  font-weight: bold;
 }
 
 ._fail-text, ._fail-list {
diff --git a/assets/stylesheets/global/_base.scss b/assets/stylesheets/global/_base.scss
index bcf01467..b81d5a93 100644
--- a/assets/stylesheets/global/_base.scss
+++ b/assets/stylesheets/global/_base.scss
@@ -1,6 +1,7 @@
 html {
   height: 100%;
   font-size: 100%;
+  background: #fff; // fallback to show the error message to browsers that don't support CSS variables.
   background: var(--documentBackground);
 
   @include mobile { font-size: 93.75%; }
@@ -15,8 +16,9 @@ body {
   overflow: auto;
   font-size: 1em;
   font-weight: normal;
-  font-family: var(--baseFont);
+  font-family: $baseFont;
   line-height: 1.7;
+  color: $textColor; // fallback to show the error message to browsers that don't support CSS variables.
   color: var(--textColor);
   word-wrap: break-word;
   overflow-wrap: break-word;
diff --git a/assets/stylesheets/global/_variables.scss b/assets/stylesheets/global/_variables.scss
index a857d1cd..c4d8235d 100644
--- a/assets/stylesheets/global/_variables.scss
+++ b/assets/stylesheets/global/_variables.scss
@@ -1,5 +1,9 @@
+// Variables needed to style the error message for browsers that don't support CSS variables.
+$baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+$textColor: #333;
+
 html {
-  --baseFont: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
+  --baseFont: #{$baseFont};
   --monoFont: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   --boldFontWeight: 500;
   --bolderFontWeight: 600;