Fix font handling, colors and doc-width

package.json

@@ -54,5 +54,9 @@
     "typeface-roboto-mono": "0.0.75",
     "vinyl-buffer": "~1.0",
     "vinyl-fs": "~3.0"
+  },
+  "dependencies": {
+    "typeface-inconsolata": "^1.1.13",
+    "typeface-open-sans": "^1.1.13"
   }
 }

src/css/doc.css

@@ -188,6 +188,7 @@
 
 .doc table.tableblock thead th {
   border-bottom: 2.5px solid var(--table-border-color);
+  font-weight: var(--table-header-font-weight);
   padding: 0.5rem;
 }
 

src/css/site.css

@@ -1,12 +1,13 @@
 @import "typeface-open-sans.css";
+@import "typeface-inconsolata.css";
+@import "rfc2119.css";
 @import "typeface-roboto.css";
 @import "typeface-roboto-mono.css";
 @import "vars.css";
 @import "base.css";
 @import "body.css";
 @import "nav.css";
 @import "main.css";
-@import "rfc2119.css";
 @import "toolbar.css";
 @import "breadcrumbs.css";
 @import "page-versions.css";

src/css/typeface-inconsolata.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: "Inconsolata";
+  font-style: normal;
+  font-weight: 400;
+  src:
+    local("Inconsolata"),
+    local("Inconsolata-Regular"),
+    url(~typeface-inconsolata/files/inconsolata-latin-400.woff2) format("woff2"),
+    url(~typeface-inconsolata/files/inconsolata-latin-400.woff) format("woff");
+}
+
+@font-face {
+  font-family: "Inconsolata";
+  font-style: normal;
+  font-weight: 500;
+  src:
+    local("Inconsolata Medium"),
+    local("Inconsolata-Medium"),
+    url(~typeface-inconsolata/files/inconsolata-latin-500.woff2) format("woff2"),
+    url(~typeface-inconsolata/files/inconsolata-latin-500.woff) format("woff");
+}

src/css/typeface-open-sans.css

@@ -5,148 +5,108 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 300;
-  src: url('../font/open-sans-v17-latin-300.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans Light'),
     local('OpenSans-Light'),
-    url('../font/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-300.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-300.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-300italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 300;
-  src: url('../font/open-sans-v17-latin-300italic.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans Light Italic'),
     local('OpenSans-LightItalic'),
-    url('../font/open-sans-v17-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-300italic.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-300italic.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-300italic.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 400;
-  src: url('../font/open-sans-v17-latin-italic.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans Italic'),
     local('OpenSans-Italic'),
-    url('../font/open-sans-v17-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-italic.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-400italic.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-400italic.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-regular - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: url('../font/open-sans-v17-latin-regular.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans Regular'),
     local('OpenSans-Regular'),
-    url('../font/open-sans-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-400.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-400.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-600 - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: url('../font/open-sans-v17-latin-600.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans SemiBold'),
     local('OpenSans-SemiBold'),
-    url('../font/open-sans-v17-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-600.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-600.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-600.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-600italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 600;
-  src: url('../font/open-sans-v17-latin-600italic.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans SemiBold Italic'),
     local('OpenSans-SemiBoldItalic'),
-    url('../font/open-sans-v17-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-600italic.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-600italic.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-600italic.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-700 - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
-  src: url('../font/open-sans-v17-latin-700.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans Bold'),
     local('OpenSans-Bold'),
-    url('../font/open-sans-v17-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-700.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-700.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-700italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 700;
-  src: url('../font/open-sans-v17-latin-700italic.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans Bold Italic'),
     local('OpenSans-BoldItalic'),
-    url('../font/open-sans-v17-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-700italic.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-700italic.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-700italic.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-800 - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 800;
-  src: url('../font/open-sans-v17-latin-800.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans ExtraBold'),
     local('OpenSans-ExtraBold'),
-    url('../font/open-sans-v17-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-800.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-800.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-800.woff) format("woff"), /* Modern Browsers */
 }
 /* open-sans-800italic - latin */
 @font-face {
   font-family: 'Open Sans';
   font-style: italic;
   font-weight: 800;
-  src: url('../font/open-sans-v17-latin-800italic.eot'); /* IE9 Compat Modes */
   src:
     local('Open Sans ExtraBold Italic'),
     local('OpenSans-ExtraBoldItalic'),
-    url('../font/open-sans-v17-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-    url('../font/open-sans-v17-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
-    url('../font/open-sans-v17-latin-800italic.woff') format('woff'), /* Modern Browsers */
-    url('../font/open-sans-v17-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
-    url('../font/open-sans-v17-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
+    url(~typeface-open-sans/files/open-sans-latin-800italic.woff2) format("woff2"), /* Super Modern Browsers */
+    url(~typeface-open-sans/files/open-sans-latin-800italic.woff) format("woff"), /* Modern Browsers */
 }

src/css/vars.css

@@ -16,24 +16,25 @@
   --color-jet-70: #222;
   --color-jet-80: #191919;
   --color-black: #000;
+  --color-oc-blue: rgb(0,102,232);
   /* fonts */
-  --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
-  --body-font-size: 1.0625em; /* 17px */
-  --body-font-size--desktop: 1.125em; /* 18px */
-  --body-font-size--print: 0.9375em; /* 15px */
+  --rem-base: 16; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
+  --body-font-size: 0.875em; /* 14px */
+  --body-font-size--desktop: 1em; /* 18px */
+  --body-font-size--print: 0.875em; /* 14px */
   --body-line-height: 1.15;
   --body-font-color: var(--color-jet-70);
   --body-font-family: "Open Sans", sans-serif;
   --body-font-weight-bold: 500;
-  --monospace-font-family: "Open Sans", monospace;
+  --monospace-font-family: "Inconsolata", monospace;
   --monospace-font-weight-bold: 500;
   /* base */
   --body-background: var(--color-white);
   --panel-background: var(--color-smoke-30);
   --panel-border-color: var(--color-smoke-90);
   --scrollbar-thumb-color: var(--color-gray-10);
   /* navbar */
-  --navbar-background: var(--color-jet-80);
+  --navbar-background: var(--color-oc-blue);
   --navbar-font-color: var(--color-white);
   --navbar_hover-background: var(--color-black);
   --navbar-button-background: var(--color-white);
@@ -75,9 +76,9 @@
   --warning-color: #e18114;
   --warning-on-color: var(--color-white);
   /* doc */
-  --doc-font-color: var(--color-jet-50);
+  --doc-font-color: var(--color-black);
   --doc-font-size: inherit;
-  --doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
+  --doc-font-size--desktop: calc(16 / var(--rem-base) * 1rem);
   --doc-line-height: 1.6;
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
@@ -110,6 +111,7 @@
   --quote-attribution-font-color: var(--color-gray-30);
   --sidebar-background: var(--color-smoke-90);
   --table-border-color: var(--panel-border-color);
+  --table-header-font-weight: bold;
   /* footer */
   --footer-line-height: var(--doc-line-height);
   --footer-background: var(--color-smoke-90);
@@ -131,7 +133,7 @@
   --toc-width: calc(162 / var(--rem-base) * 1rem);
   --toc-width--widescreen: calc(216 / var(--rem-base) * 1rem);
   --doc-max-width: calc(720 / var(--rem-base) * 1rem);
-  --doc-max-width--desktop: calc(828 / var(--rem-base) * 1rem);
+  --doc-max-width--desktop: calc(1024 / var(--rem-base) * 1rem);
   /* stacking */
   --z-index-nav: 1;
   --z-index-toolbar: 2;

src/partials/footer-content.hbs

@@ -1,4 +1,4 @@
 <footer class="footer">
-  <p>This page was built using the Antora default UI.</p>
+  <p>This page was built using a modified version of the Antora default UI.</p>
   <p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>
 </footer>