improve accessibility of text (#539)

css/elements.css

@@ -1,9 +1,102 @@
+/* IBM Plex fonts (Latin subset) have been downloaded from Google Fonts and modified to add support back in for the `zero` substitution (slashed zeroes) */
+
+/* https://fonts.googleapis.com/css2?family=IBM%20Plex%20Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap */
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(IBM Plex Serif Regular), local(IBMPlexSerif-Regular);
+}
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local(IBM Plex Serif Bold), local(IBMPlexSerif-Bold);
+}
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local(IBM Plex Serif Italic), local(IBMPlexSerif-Italic);
+}
+@font-face {
+  font-family: 'IBM Plex Serif';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local(IBM Plex Serif Bold Italic), local(IBMPlexSerif-BoldItalic);
+}
+
+/* https://fonts.googleapis.com/css2?family=IBM%20Plex%20Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap */
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(IBM Plex Sans Regular), local(IBMPlexSans-Regular);
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local(IBM Plex Sans Bold), local(IBMPlexSans-Bold);
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local(IBM Plex Sans Italic), local(IBMPlexSans-Italic);
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local(IBM Plex Sans Bold Italic), local(IBMPlexSans-BoldItalic);
+}
+
+/* https://fonts.googleapis.com/css2?family=IBM%20Plex%20Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap */
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local(IBM Plex Mono Regular), local(IBMPlexMono-Regular);
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local(IBM Plex Mono Bold), local(IBMPlexMono-Bold);
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local(IBM Plex Mono Italic), local(IBMPlexMono-Italic);
+}
+@font-face {
+  font-family: 'IBM Plex Mono';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: local(IBM Plex Mono Bold Italic), local(IBMPlexMono-BoldItalic);
+}
+
 body {
   display: flex;
   word-wrap: break-word;
   font-size: 18px;
   line-height: 1.5;
-  font-family: Cambria, Palatino Linotype, Palatino, Liberation Serif, serif;
+  font-family: IBM Plex Serif, serif;
+  font-variant-numeric: slashed-zero;
   padding: 0;
   margin: 0;
   color: #111;
@@ -49,10 +142,10 @@ span.e-user-code::before {
   border: 2pt solid brown;
   padding: 0.3ex;
   margin: 0 0.25em 0 0;
-  line-height: 1;
-  vertical-align: text-top;
+  line-height: normal;
+  vertical-align: middle;
   text-transform: uppercase;
-  font-family: 'Comic Code', sans-serif;
+  font-family: IBM Plex Sans, sans-serif;
   font-weight: 900;
   font-size: x-small;
 }
@@ -75,7 +168,7 @@ span.e-user-code::before {
 
 code {
   font-weight: bold;
-  font-family: Consolas, Monaco, monospace;
+  font-family: Comic Code, IBM Plex Mono, monospace;
   white-space: pre;
 }
 
@@ -100,53 +193,49 @@ ol.toc ol.toc {
 }
 
 var {
-  color: #2aa198;
-  transition: background-color 0.25s ease;
+  border-radius: 5px;
+  color: #218379;
+  transition: all 0.25s ease-out;
   cursor: pointer;
+  padding: 0 4px;
+  margin: 0 -4px;
+  mix-blend-mode: multiply;
 }
 var.field {
   font: inherit;
   color: inherit;
 }
 
-var.referenced0 {
+var.referenced {
   color: inherit;
-  background-color: #ffff33;
-  box-shadow: 0 0 0 2px #ffff33;
+}
+
+var.referenced0 {
+  background-color: #ffff6c;
 }
 var.referenced1 {
-  color: inherit;
-  background-color: #ff87a2;
-  box-shadow: 0 0 0 2px #ff87a2;
+  background-color: #ffa4a8;
 }
 var.referenced2 {
-  color: inherit;
   background-color: #96e885;
-  box-shadow: 0 0 0 2px #96e885;
 }
 var.referenced3 {
-  color: inherit;
   background-color: #3eeed2;
-  box-shadow: 0 0 0 2px #3eeed2;
 }
 var.referenced4 {
-  color: inherit;
   background-color: #eacfb6;
-  box-shadow: 0 0 0 2px #eacfb6;
 }
 var.referenced5 {
-  color: inherit;
   background-color: #82ddff;
-  box-shadow: 0 0 0 2px #82ddff;
 }
 var.referenced6 {
-  color: inherit;
   background-color: #ffbcf2;
-  box-shadow: 0 0 0 2px #ffbcf2;
 }
 
 emu-const {
-  font-family: sans-serif;
+  font-family: IBM Plex Sans, sans-serif;
+  font-variant: small-caps;
+  text-transform: uppercase;
 }
 
 emu-val {
@@ -347,7 +436,7 @@ emu-rhs emu-nt {
 
 emu-t {
   display: inline-block;
-  font-family: monospace;
+  font-family: IBM Plex Mono, monospace;
   font-weight: bold;
   white-space: nowrap;
   text-indent: 0;
@@ -382,7 +471,7 @@ emu-mods {
 emu-params,
 emu-opt {
   margin-right: 1ex;
-  font-family: monospace;
+  font-family: IBM Plex Mono, monospace;
 }
 
 emu-params,
@@ -396,7 +485,7 @@ emu-opt {
 
 emu-gprose {
   font-size: 0.9em;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: IBM Plex Sans, sans-serif;
 }
 
 emu-production emu-gprose {
@@ -831,12 +920,16 @@ tr.del > td {
 
 #menu-toc .item-toggle {
   display: inline-block;
-  transform: rotate(-45deg) translate(-5px, -5px);
+  transform: rotate(0deg);
   transition: transform 0.1s ease;
+  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMC42MDUiIGhlaWdodD0iMTUuNTU1Ij48cGF0aCBmaWxsPSIjODg5IiBkPSJtMi44MjggMTUuNTU1IDcuNzc3LTcuNzc5TDIuODI4IDAgMCAyLjgyOGw0Ljk0OSA0Ljk0OEwwIDEyLjcyN2wyLjgyOCAyLjgyOHoiLz48L3N2Zz4);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 50%;
   text-align: center;
-  width: 20px;
+  width: 1em;
 
-  color: #aab;
+  color: transparent;
 
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -850,11 +943,12 @@ tr.del > td {
 
 #menu-toc .item-toggle-none {
   display: inline-block;
-  width: 20px;
+  width: 1em;
 }
 
-#menu-toc li.active > .item-toggle {
-  transform: rotate(45deg) translate(-5px, -5px);
+#menu-toc li.active > .item-toggle,
+#menu-toc li.revealed > .item-toggle {
+  transform: rotate(90deg);
 }
 
 #menu-toc li > ol {
@@ -866,24 +960,12 @@ tr.del > td {
 }
 
 #menu-toc li.revealed > a {
-  background-color: #bbb;
+  background-color: #ccc;
   font-weight: bold;
-  /*
-  background-color: #222;
-  color: #c6d8e4;
-  */
 }
 
 #menu-toc li.revealed-leaf > a {
   color: #206ca7;
-  /*
-  background-color: #222;
-  color: #c6d8e4;
-  */
-}
-
-#menu-toc li.revealed > .item-toggle {
-  transform: rotate(45deg) translate(-5px, -5px);
 }
 
 #menu-toc li.revealed > ol {

package.json

@@ -28,6 +28,7 @@
 		"/lib",
 		"/js",
 		"/css",
+		"/fonts",
 		"/boilerplate",
 		"/entities-processed.json"
 	],