fix lighthouse suggestions: syntax color contrast & crossorigin preloads

assets/sass/abstracts/_variables.scss

@@ -23,7 +23,6 @@ $link-underline-size: 2px;
 
 // Global Colors
 $color-background:   #ffffff;
-$color-gray-background: #fbfbfb;
 $color-text:         #202020;
 $color-medium-dark:  #494949;
 $color-medium:       #5e5e5e;
@@ -31,6 +30,7 @@ $color-medium-light: #757575;
 $color-light:        #d2d2d2;
 $color-kinda-light:  #e3e3e3;
 $color-super-light:  #f4f4f4;
+$color-super-duper-light: #fbfbfb;
 $color-links:        #0e6dc2;
 
 // For nifty color swapping on svg logo hover in components/_header.scss

assets/sass/components/_global.scss

@@ -5,7 +5,7 @@ body {
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  background-color: $color-gray-background;   // really just the color of header & footer
+  background-color: $color-super-duper-light;   // really just the color of header & footer
   color: $color-text;
   font-family: $webfont-sans;
   font-kerning: normal;
@@ -54,7 +54,7 @@ hr {
 // all code
 code {
   font-family: $webfont-mono;
-  background: $color-super-light;
+  background: $color-super-duper-light;
   font-size: 0.95em;
   letter-spacing: 0;
   page-break-inside: avoid;
@@ -66,7 +66,7 @@ code {
 
 // code fences
 div.highlight {
-  background: $color-super-light;
+  background: $color-super-duper-light;
   border: 1px solid $color-light;
   border-left: 3px solid $color-links;
   line-height: 1.6;

assets/sass/components/_syntax.scss

@@ -9,7 +9,7 @@ div.highlight span {
     color: #111111;
   }
   &.na, &.nc, &.nd, &.ne, &.nf, &.nx {
-    color: #489c44;
+    color: #068200;
   }
   &.err, &.nt, &.o, &.ow, &.kn {
     color: #e8003d;
@@ -18,7 +18,7 @@ div.highlight span {
     color: #8145ec;
   }
   &.ld, &.s, &.sa, &.sb, &.sc, &.dl, &.sd, &.s2, &.sh, &.si, &.sx, &.sr, &.s1, &.ss {
-    color: #c17005;
+    color: #b35c00;
   }
   &.c, &.ch, &.cm, &.c1, &.cs, &.cp, &.cpf {
     color: #6b6859;