Merge pull request #73 from stackabletech/feat/redesign

feat: redesign

Author: fhennig

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)

package-lock.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"
   }

package.json

@@ -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;

src/css/doc.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");
+}

src/css/fonts.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);
+}

src/css/footer.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;

src/css/header.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 {

src/css/nav.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";

src/css/site.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);