diff --git a/gulp.d/tasks/build.js b/gulp.d/tasks/build.js
index d921022..d198928 100644
--- a/gulp.d/tasks/build.js
+++ b/gulp.d/tasks/build.js
@@ -37,7 +37,7 @@ module.exports = (src, dest, preview) => () => {
}),
postcssUrl([
{
- filter: '**/~typeface-*/files/*',
+ filter: '**/~@fontsource/*/files/*',
url: (asset) => {
const relpath = asset.pathname.substr(1)
const abspath = require.resolve(relpath)
diff --git a/package-lock.json b/package-lock.json
index f846e1b..fe1d7a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,9 @@
"devDependencies": {
"@asciidoctor/core": "~2.2",
"@asciidoctor/tabs": "^1.0.0-beta.6",
+ "@fontsource/ibm-plex-mono": "^5.0.14",
+ "@fontsource/noto-sans": "^5.0.22",
+ "@fontsource/noto-sans-mono": "^5.0.20",
"autoprefixer": "^10.4",
"browser-pack-flat": "^3.4",
"browserify": "^17.0",
@@ -45,8 +48,6 @@
"require-from-string": "^2.0",
"stylelint": "^13.13",
"stylelint-config-standard": "^22",
- "typeface-roboto-mono": "1.1.13",
- "typeface-titillium-web": "1.1.13",
"vinyl-buffer": "^1.0",
"vinyl-fs": "^3.0"
},
@@ -507,6 +508,24 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/@fontsource/ibm-plex-mono": {
+ "version": "5.0.14",
+ "resolved": "https://registry.npmjs.org/@fontsource/ibm-plex-mono/-/ibm-plex-mono-5.0.14.tgz",
+ "integrity": "sha512-727fOjiog6PbVkfLTRaiba5vus9z00RrGuoxif85FIKljXkoLxrSEKmACz0ldzLJy6KuEwnj5JBq2h4SUC0N8w==",
+ "dev": true
+ },
+ "node_modules/@fontsource/noto-sans": {
+ "version": "5.0.22",
+ "resolved": "https://registry.npmjs.org/@fontsource/noto-sans/-/noto-sans-5.0.22.tgz",
+ "integrity": "sha512-PwjvKPGFbgpwfKjWZj1zeUvd7ExUW2AqHE9PF9ysAJ2gOuzIHWE6mEVIlchYif7WC2pQhn+g0w6xooCObVi+4A==",
+ "dev": true
+ },
+ "node_modules/@fontsource/noto-sans-mono": {
+ "version": "5.0.20",
+ "resolved": "https://registry.npmjs.org/@fontsource/noto-sans-mono/-/noto-sans-mono-5.0.20.tgz",
+ "integrity": "sha512-4+t+dAnKvihf/uxLw7ZTQc6sTzLvz7PR+p6S9+nHWT8ym05QQiYoUj9L8xwaAACf23SyfCifbhc7EN/RdFwxHw==",
+ "dev": true
+ },
"node_modules/@humanwhocodes/config-array": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
@@ -17557,18 +17576,6 @@
"is-typedarray": "^1.0.0"
}
},
- "node_modules/typeface-roboto-mono": {
- "version": "1.1.13",
- "resolved": "https://registry.npmjs.org/typeface-roboto-mono/-/typeface-roboto-mono-1.1.13.tgz",
- "integrity": "sha512-pnzDc70b7ywJHin/BUFL7HZX8DyOTBLT2qxlJ92eH1UJOFcENIBXa9IZrxsJX/gEKjbEDKhW5vz/TKRBNk/ufQ==",
- "dev": true
- },
- "node_modules/typeface-titillium-web": {
- "version": "1.1.13",
- "resolved": "https://registry.npmjs.org/typeface-titillium-web/-/typeface-titillium-web-1.1.13.tgz",
- "integrity": "sha512-R21mXf9hoqle+dgR7k6C6QUN2XElopQNsTDYI5DoU1buuYayVvzn2jd2ihKJTwM/hJsltLrlJUkyumc3FFgevA==",
- "dev": true
- },
"node_modules/typescript": {
"version": "3.9.10",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz",
diff --git a/package.json b/package.json
index bbe4f0c..507139a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,9 @@
"devDependencies": {
"@asciidoctor/core": "~2.2",
"@asciidoctor/tabs": "^1.0.0-beta.6",
+ "@fontsource/ibm-plex-mono": "^5.0.14",
+ "@fontsource/noto-sans": "^5.0.22",
+ "@fontsource/noto-sans-mono": "^5.0.20",
"autoprefixer": "^10.4",
"browser-pack-flat": "^3.4",
"browserify": "^17.0",
@@ -57,8 +60,6 @@
"require-from-string": "^2.0",
"stylelint": "^13.13",
"stylelint-config-standard": "^22",
- "typeface-roboto-mono": "1.1.13",
- "typeface-titillium-web": "1.1.13",
"vinyl-buffer": "^1.0",
"vinyl-fs": "^3.0"
}
diff --git a/src/css/doc.css b/src/css/doc.css
index c4e4c60..363513b 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -32,6 +32,7 @@
.doc h5,
.doc h6 {
color: var(--heading-font-color);
+ font-family: var(--header-font-family);
font-weight: var(--heading-font-weight);
hyphens: none;
line-height: 1.3;
diff --git a/src/css/fonts.css b/src/css/fonts.css
new file mode 100644
index 0000000..16935b4
--- /dev/null
+++ b/src/css/fonts.css
@@ -0,0 +1,66 @@
+/* How do fonts work in this build setup?
+ * Fonts are installed from fontsource packages.
+ * In the file ./gulp.d/tasks/build.js there is an action that copies the font files
+ * from the installed packages into the output directory, based on matching file names.
+ * search for 'fontsource' in the file, and you will find a post CSS action.
+ */
+
+/* Noto Sans - the base font for the body */
+
+@font-face {
+ font-family: "Noto Sans";
+ font-style: normal;
+ font-weight: 400;
+ src:
+ url(~@fontsource/noto-sans/files/noto-sans-latin-400-normal.woff2) format("woff2"),
+ url(~@fontsource/noto-sans/files/noto-sans-latin-400-normal.woff) format("woff");
+}
+
+@font-face {
+ font-family: "Noto Sans";
+ font-style: normal;
+ font-weight: 700;
+ src:
+ url(~@fontsource/noto-sans/files/noto-sans-latin-700-normal.woff2) format("woff2"),
+ url(~@fontsource/noto-sans/files/noto-sans-latin-700-normal.woff) format("woff");
+}
+
+/* IMB Plex Mono - the header font */
+
+@font-face {
+ font-family: "IBM Plex Mono";
+ font-style: normal;
+ font-weight: 400;
+ src:
+ url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff2) format("woff2"),
+ url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-400-normal.woff) format("woff");
+}
+
+@font-face {
+ font-family: "IBM Plex Mono";
+ font-style: normal;
+ font-weight: 600;
+ src:
+ url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff2) format("woff2"),
+ url(~@fontsource/ibm-plex-mono/files/ibm-plex-mono-latin-600-normal.woff) format("woff");
+}
+
+/* Noto Sans Mono - The monospace font for code blocks */
+
+@font-face {
+ font-family: "Noto Sans Mono";
+ font-style: normal;
+ font-weight: 400;
+ src:
+ url(~@fontsource/noto-sans-mono/files/noto-sans-mono-latin-400-normal.woff2) format("woff2"),
+ url(~@fontsource/noto-sans-mono/files/noto-sans-mono-latin-400-normal.woff) format("woff");
+}
+
+@font-face {
+ font-family: "Noto Sans Mono";
+ font-style: normal;
+ font-weight: 500;
+ src:
+ url(~@fontsource/noto-sans-mono/files/noto-sans-mono-latin-500-normal.woff2) format("woff2"),
+ url(~@fontsource/noto-sans-mono/files/noto-sans-mono-latin-500-normal.woff) format("woff");
+}
diff --git a/src/css/footer.css b/src/css/footer.css
index 9443df5..b48a867 100644
--- a/src/css/footer.css
+++ b/src/css/footer.css
@@ -4,6 +4,7 @@ footer.footer {
font-size: calc(15 / var(--rem-base) * 1rem);
line-height: var(--footer-line-height);
padding: 1.5rem;
+ padding-top: 5rem;
}
.footer p {
@@ -37,6 +38,13 @@ footer.footer {
.footer-info-item h2 {
margin-top: 0;
+ font-family: var(--header-font-family);
+ font-weight: var(--heading-font-weight);
+}
+
+.footer-motto {
+ font-family: var(--header-font-family);
+ font-weight: var(--heading-font-weight);
}
.footer-link-list {
@@ -86,8 +94,8 @@ footer.footer {
}
.social-icon {
- background-color: var(--footer-font-color);
- color: var(--body-font-color);
+ color: var(--footer-font-color);
+ background-color: var(--footer-background);
border-radius: 50%;
display: inline-flex;
align-items: center;
@@ -100,8 +108,8 @@ footer.footer {
}
.social-icon:hover {
+ color: var(--footer-background);
background-color: var(--color-brand-primary);
- color: var(--footer-font-color);
text-decoration: none;
}
@@ -110,3 +118,7 @@ footer.footer {
height: 1px;
background-color: var(--footer-font-color);
}
+
+.copyright-notice {
+ color: var(--footer-copyright-font-color);
+}
diff --git a/src/css/header.css b/src/css/header.css
index 86cd94a..4a050ae 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -23,6 +23,7 @@ body {
display: flex;
justify-content: space-between;
padding: 0 1rem;
+ box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.1);
}
.navbar a {
@@ -142,6 +143,7 @@ body {
.navbar-dropdown {
background: var(--navbar-menu-background);
border: 1px solid var(--navbar-menu-border-color);
+ box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
border-top: none;
border-radius: 0 0 0.25rem 0.25rem;
display: none;
diff --git a/src/css/nav.css b/src/css/nav.css
index 81b72a6..f5ae6e9 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -31,6 +31,7 @@
position: static;
top: 0;
visibility: visible;
+ border-right: solid 2px var(--panel-background);
}
}
@@ -96,6 +97,11 @@ html.is-clipped--nav {
padding: 0.5rem 0.75rem;
line-height: var(--nav-line-height);
position: relative;
+ color: var(--nav-muted-color);
+}
+
+.nav-menu:hover {
+ color: var(--nav-font-color);
}
.nav-menu h3.title {
diff --git a/src/css/site.css b/src/css/site.css
index a65d024..3caccc1 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -1,5 +1,4 @@
-@import "typeface-roboto-mono.css";
-@import "typeface-titillium-web.css";
+@import "fonts.css";
@import "vars.css";
@import "base.css";
@import "body.css";
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 1a917e1..ae22f75 100644
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -7,7 +7,7 @@
color: var(--toolbar-font-color);
align-items: center;
background-color: var(--toolbar-background);
- box-shadow: 0 1px 0 var(--toolbar-border-color);
+ border-bottom: solid 2px var(--toolbar-border-color);
display: flex;
font-size: calc(15 / var(--rem-base) * 1rem);
height: var(--toolbar-height);
diff --git a/src/css/typeface-roboto-mono.css b/src/css/typeface-roboto-mono.css
deleted file mode 100644
index c51a7fc..0000000
--- a/src/css/typeface-roboto-mono.css
+++ /dev/null
@@ -1,21 +0,0 @@
-@font-face {
- font-family: "Roboto Mono";
- font-style: normal;
- font-weight: 400;
- src:
- local("Roboto Mono Regular"),
- local("RobotoMono-Regular"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff2) format("woff2"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff) format("woff");
-}
-
-@font-face {
- font-family: "Roboto Mono";
- font-style: normal;
- font-weight: 500;
- src:
- local("Roboto Mono Medium"),
- local("RobotoMono-Medium"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff2) format("woff2"),
- url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff) format("woff");
-}
diff --git a/src/css/typeface-titillium-web.css b/src/css/typeface-titillium-web.css
deleted file mode 100644
index 00eaf35..0000000
--- a/src/css/typeface-titillium-web.css
+++ /dev/null
@@ -1,43 +0,0 @@
-@font-face {
- font-family: "Titillium Web";
- font-style: normal;
- font-weight: 400;
- src:
- local("Titillium Regular"),
- local("Titillium-Regular"),
- url(~typeface-titillium-web/files/titillium-web-latin-400.woff2) format("woff2"),
- url(~typeface-titillium-web/files/titillium-web-latin-400.woff) format("woff");
-}
-
-@font-face {
- font-family: "Titillium Web";
- font-style: italic;
- font-weight: 400;
- src:
- local("Roboto Italic"),
- local("Roboto-Italic"),
- url(~typeface-titillium-web/files/titillium-web-latin-400italic.woff2) format("woff2"),
- url(~typeface-titillium-web/files/titillium-web-latin-400italic.woff) format("woff");
-}
-
-@font-face {
- font-family: "Titillium Web";
- font-style: normal;
- font-weight: 600;
- src:
- local("Titillium Medium"),
- local("Titillium-Medium"),
- url(~typeface-titillium-web/files/titillium-web-latin-600.woff2) format("woff2"),
- url(~typeface-titillium-web/files/titillium-web-latin-600.woff) format("woff");
-}
-
-@font-face {
- font-family: "Titillium Web";
- font-style: italic;
- font-weight: 600;
- src:
- local("Titillium Medium Italic"),
- local("Titillium-MediumItalic"),
- url(~typeface-titillium-web/files/titillium-web-latin-600italic.woff2) format("woff2"),
- url(~typeface-titillium-web/files/titillium-web-latin-600italic.woff) format("woff");
-}
diff --git a/src/css/vars.css b/src/css/vars.css
index 70ddaf2..b8e4de8 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -1,65 +1,58 @@
:root {
/* colors */
--color-white: #fff;
- --color-smoke-10: #f8f9fc;
- --color-smoke-30: #f6f8fb;
- --color-smoke-50: #eff2f7;
+ --color-black: #000;
--color-smoke-70: #e8edf4;
- --color-smoke-90: #e1e7f1;
--color-gray-10: #c1c1c1;
--color-gray-30: #8e8e8f;
- --color-gray-50: #80828a;
- --color-gray-70: #5d5e5a;
- --color-jet-20: #3a4557;
- --color-jet-30: #343d4d;
- --color-jet-50: #2d3543;
- --color-jet-70: #272e3a;
- --color-jet-80: #242b36;
- --color-black: #000;
--color-brand-primary: #1880bd;
--color-brand-secondary: #b80069;
+ --color-text: #182c3d;
+ --color-text-semi-muted: #6d7c8b;
+ --color-text-muted: #afbbc8;
+ --color-background2: #f2f6fa; /* panels, borders, hover backgrounds */
/* 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 */
--body-line-height: 1.15;
- --body-font-color: var(--color-jet-70);
- --body-font-family: "Titillium Web", sans-serif;
- --body-font-weight-bold: 600;
- --monospace-font-family: "Roboto Mono", monospace;
+ --body-font-color: var(--color-text);
+ --body-font-family: "Noto Sans", sans-serif;
+ --body-font-weight-bold: 700;
+ --monospace-font-family: "Noto Sans Mono", monospace;
--monospace-font-weight-bold: 500;
+ --header-font-family: "IBM Plex Mono", sans-serif;
+ --header-font-family-weight: 600; /* semi-bold */
/* base */
--body-background: var(--color-white);
- --panel-background: var(--color-smoke-30);
- --panel-border-color: var(--color-smoke-90);
+ --panel-background: var(--color-background2);
+ --panel-border-color: var(--color-background2);
--scrollbar-thumb-color: var(--color-gray-10);
/* navbar */
- --navbar-background: var(--color-jet-70);
- --navbar-font-color: var(--color-white);
- --navbar_hover-background: var(--color-black);
+ --navbar-background: var(--color-white);
+ --navbar-font-color: var(--color-text);
+ --navbar_hover-background: var(--color-white);
--navbar-button-background: var(--color-brand-secondary);
--navbar-button-border-color: var(--color-brand-secondary);
- --navbar-button-font-color: var(--color-wite);
+ --navbar-button-font-color: var(--color-white);
--navbar-menu-border-color: var(--panel-border-color);
--navbar-menu-background: var(--color-white);
- --navbar-menu-font-color: var(--color-white);
- --navbar-menu_hover-background: var(--color-smoke-50);
+ --navbar-menu-font-color: var(--color-text);
+ --navbar-menu_hover-background: var(--color-background2);
/* nav */
- --nav-background: var(--panel-background);
- --nav-border-color: var(--color-gray-10);
+ --nav-background: var(--color-white);
+ --nav-border-color: var(--panel-background);
--nav-line-height: 1.35;
- --nav-heading-font-color: var(--color-jet-30);
- --nav-muted-color: var(--color-gray-70);
- --nav-panel-divider-color: var(--color-smoke-90);
+ --nav-heading-font-color: var(--color-text);
+ --nav-muted-color: var(--color-text-semi-muted);
+ --nav-panel-divider-color: var(--color-text);
--nav-secondary-background: var(--color-smoke-70);
/* toolbar */
--toolbar-background: var(--color-white);
--toolbar-border-color: var(--panel-border-color);
- --toolbar-font-color: var(--color-jet-30);
- --toolbar-muted-color: var(--color-gray-30);
- --page-version-menu-background: var(--color-jet-70);
- --page-version-missing-font-color: var(--color-gray-30);
+ --toolbar-font-color: var(--color-text);
+ --toolbar-muted-color: var(--color-text-muted);
/* admonitions */
--caution-color: #a0439c;
--caution-on-color: var(--color-white);
@@ -72,53 +65,53 @@
--warning-color: #e18114;
--warning-on-color: var(--color-white);
/* doc */
- --doc-font-color: var(--color-jet-50);
+ --doc-font-color: var(--color-text);
--doc-font-size: inherit;
--doc-font-size--desktop: calc(17 / var(--rem-base) * 1rem);
--doc-line-height: 1.6;
--doc-margin: 0 auto;
--doc-margin--desktop: 0 1rem;
- --heading-font-color: var(--color-jet-80);
- --heading-font-weight: normal;
+ --heading-font-color: var(--color-text);
+ --heading-font-weight: 600;
--alt-heading-font-weight: var(--body-font-weight-bold);
--section-divider-color: var(--panel-border-color);
--link-font-color: #1880bd;
--link_hover-font-color: #105984;
--link_unresolved-font-color: var(--important-color);
- --abstract-background: var(--color-smoke-70);
- --abstract-font-color: var(--color-jet-20);
+ --abstract-background: var(--color-white);
+ --abstract-font-color: var(--color-text);
--abstract-border-color: var(--panel-border-color);
--admonition-background: var(--panel-background);
--admonition-label-font-weight: var(--body-font-weight-bold);
- --caption-font-color: var(--color-gray-70);
+ --caption-font-color: var(--color-text);
--caption-font-weight: var(--body-font-weight-bold);
--code-background: var(--panel-background);
--code-font-color: var(--body-font-color);
--example-background: var(--color-white);
- --example-border-color: var(--color-gray-70);
+ --example-border-color: var(--color-text);
--kbd-background: var(--panel-background);
--kbd-border-color: var(--color-gray-10);
--pre-background: var(--panel-background);
--pre-border-color: var(--panel-border-color);
- --pre-annotation-font-color: var(--color-gray-50);
+ --pre-annotation-font-color: var(--color-text-muted);
--quote-background: var(--panel-background);
- --quote-border-color: var(--color-gray-70);
- --quote-font-color: var(--color-gray-70);
+ --quote-border-color: var(--color-text);
+ --quote-font-color: var(--color-text);
--quote-attribution-font-color: var(--color-gray-30);
- --sidebar-background: var(--color-smoke-90);
+ --sidebar-background: var(--panel-background);
--table-border-color: var(--panel-border-color);
--table-stripe-background: var(--panel-background);
--table-footer-background: linear-gradient(to bottom, var(--color-smoke-70) 0%, var(--color-white) 100%);
/* toc */
- --toc-font-color: var(--nav-muted-color);
+ --toc-font-color: var(--color-text-semi-muted);
--toc-heading-font-color: var(--doc-font-color);
--toc-border-color: var(--panel-border-color);
--toc-line-height: 1.2;
/* footer */
--footer-line-height: var(--doc-line-height);
- --footer-background: var(--color-jet-70);
- --footer-font-color: var(--color-white);
- --footer-link-font-color: var(--color-smoke-70);
+ --footer-background: var(--color-white);
+ --footer-font-color: var(--color-text);
+ --footer-copyright-font-color: var(--color-text-muted);
/* dimensions and positioning */
--navbar-height: calc(73 / var(--rem-base) * 1rem);
--navbar-sub-height: calc(45 / var(--rem-base) * 1rem);
diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs
index e34edd8..65dc6b4 100644
--- a/src/partials/footer-content.hbs
+++ b/src/partials/footer-content.hbs
@@ -5,7 +5,7 @@
-
-
+
Apache, Apache Kafka®, Kafka, and the Kafka logo, Apache Druid, Druid, and the Druid logo,
Apache ZooKeeper™, ZooKeeper, and the Druid logo, Apache Hive™, Hive, and the Hive logo,
Apache Spark™, Spark, and the Spark logo, Apache Airflow, Airflow, and the Airflow logo,
-