Use CSS grid

- Remove Bootstrap and Octicons
- Simplify styles and markup
- Add color and type scale custom properties
- Extract section templates to partials
- Validate rendered HTML
- Update test snapshots

index.js

@@ -1,6 +1,20 @@
 const fs = require('fs')
+const path = require('path')
 const Handlebars = require('handlebars')
 
+const extname = '.hbs'
+const partialsDir = path.join(__dirname, 'partials')
+
+fs.readdirSync(partialsDir)
+  .filter(filename => path.extname(filename) === extname)
+  .map(filename => [
+    filename,
+    fs.readFileSync(path.join(partialsDir, filename), 'utf8'),
+  ])
+  .forEach(([filename, template]) =>
+    Handlebars.registerPartial(path.basename(filename, extname), template),
+  )
+
 Handlebars.registerHelper('formatDate', dateString =>
   new Date(dateString).toLocaleDateString('en', {
     month: 'short',
@@ -13,8 +27,8 @@ Handlebars.registerHelper('join', (arr, separator) =>
 )
 
 exports.render = resume => {
-  const template = fs.readFileSync(`${__dirname}/resume.hbs`, 'utf-8')
+  const template = fs.readFileSync(path.join(__dirname, 'resume.hbs'), 'utf-8')
-  const css = fs.readFileSync(`${__dirname}/style.css`, 'utf-8')
+  const css = fs.readFileSync(path.join(__dirname, 'style.css'), 'utf-8')
 
   return Handlebars.compile(template)({ css, resume })
 }

package-lock.json

@@ -124,6 +124,19 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@sidvind/better-ajv-errors": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/@sidvind/better-ajv-errors/-/better-ajv-errors-0.6.10.tgz",
+      "integrity": "sha512-vPv8ks6J1KQW1LPYgxmANxcHniE6LFuekxNpcoUUkotJ2srxP4qXZ+y9qpo5LAXhnLoNP0AH8cninimK68gS6A==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "chalk": "^2.4.1",
+        "json-to-ast": "^2.0.3",
+        "jsonpointer": "^4.0.1",
+        "leven": "^3.1.0"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -148,6 +161,12 @@
       "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==",
       "dev": true
     },
+    "acorn-walk": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
+      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
+      "dev": true
+    },
     "aggregate-error": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz",
@@ -248,6 +267,12 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "array-filter": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-filter/-/array-filter-1.0.0.tgz",
+      "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=",
+      "dev": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -284,6 +309,15 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "available-typed-arrays": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz",
+      "integrity": "sha512-XWX3OX8Onv97LMk/ftVyBibpGwY5a8SmuxZPzeOxqmuEqUCOM9ZE+uIaD1VNJ5QnvU2UQusvmKbuM1FR8QWGfQ==",
+      "dev": true,
+      "requires": {
+        "array-filter": "^1.0.0"
+      }
+    },
     "aws-sign2": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
@@ -408,6 +442,12 @@
         "supports-color": "^5.3.0"
       }
     },
+    "chardet": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
+      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+      "dev": true
+    },
     "chokidar": {
       "version": "3.4.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.0.tgz",
@@ -537,6 +577,12 @@
         }
       }
     },
+    "cli-width": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz",
+      "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
+      "dev": true
+    },
     "cliui": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz",
@@ -548,6 +594,12 @@
         "wrap-ansi": "^2.0.0"
       }
     },
+    "code-error-fragment": {
+      "version": "0.0.230",
+      "resolved": "https://registry.npmjs.org/code-error-fragment/-/code-error-fragment-0.0.230.tgz",
+      "integrity": "sha512-cadkfKp6932H8UkhzE/gcUqhRMNf8jHzkAN7+5Myabswaghu4xABTgPHDCjW+dBAJxj/SpkTYokpzDqY4pCzQw==",
+      "dev": true
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
@@ -741,12 +793,40 @@
       "integrity": "sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=",
       "dev": true
     },
+    "deep-equal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.0.3.tgz",
+      "integrity": "sha512-Spqdl4H+ky45I9ByyJtXteOm9CaIrPmnIPmOhrkKGNYWeDgCvJ8jNYVCTjChxW4FqGuZnLHADc8EKRMX6+CgvA==",
+      "dev": true,
+      "requires": {
+        "es-abstract": "^1.17.5",
+        "es-get-iterator": "^1.1.0",
+        "is-arguments": "^1.0.4",
+        "is-date-object": "^1.0.2",
+        "is-regex": "^1.0.5",
+        "isarray": "^2.0.5",
+        "object-is": "^1.1.2",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.0",
+        "regexp.prototype.flags": "^1.3.0",
+        "side-channel": "^1.0.2",
+        "which-boxed-primitive": "^1.0.1",
+        "which-collection": "^1.0.1",
+        "which-typed-array": "^1.1.2"
+      }
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
+      "dev": true
+    },
     "default-require-extensions": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-2.0.0.tgz",
@@ -756,6 +836,15 @@
         "strip-bom": "^3.0.0"
       }
     },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "dev": true,
+      "requires": {
+        "object-keys": "^1.0.12"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -826,6 +915,51 @@
         "is-arrayish": "^0.2.1"
       }
     },
+    "es-abstract": {
+      "version": "1.17.6",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz",
+      "integrity": "sha512-Fr89bON3WFyUi5EvAeI48QTWX0AyekGgLA8H+c+7fbfCkJwRWRMLd8CQedNEyJuoYYhmtEqY92pgte1FAhBlhw==",
+      "dev": true,
+      "requires": {
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1",
+        "is-callable": "^1.2.0",
+        "is-regex": "^1.1.0",
+        "object-inspect": "^1.7.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.0",
+        "string.prototype.trimend": "^1.0.1",
+        "string.prototype.trimstart": "^1.0.1"
+      }
+    },
+    "es-get-iterator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.0.tgz",
+      "integrity": "sha512-UfrmHuWQlNMTs35e1ypnvikg6jCz3SK8v8ImvmDsh36fCVUR1MqoFDiyn0/k52C8NqO3YsO8Oe0azeesNuqSsQ==",
+      "dev": true,
+      "requires": {
+        "es-abstract": "^1.17.4",
+        "has-symbols": "^1.0.1",
+        "is-arguments": "^1.0.4",
+        "is-map": "^2.0.1",
+        "is-set": "^2.0.1",
+        "is-string": "^1.0.5",
+        "isarray": "^2.0.5"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
     "es6-error": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
@@ -1151,6 +1285,17 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "dev": true
     },
+    "external-editor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.1.0.tgz",
+      "integrity": "sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==",
+      "dev": true,
+      "requires": {
+        "chardet": "^0.7.0",
+        "iconv-lite": "^0.4.24",
+        "tmp": "^0.0.33"
+      }
+    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -1282,6 +1427,12 @@
         "vlq": "^0.2.1"
       }
     },
+    "foreach": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
+      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
+      "dev": true
+    },
     "foreground-child": {
       "version": "1.5.6",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-1.5.6.tgz",
@@ -1328,6 +1479,12 @@
       "dev": true,
       "optional": true
     },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
     "function-loop": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/function-loop/-/function-loop-1.0.2.tgz",
@@ -1405,6 +1562,12 @@
       "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
       "dev": true
     },
+    "grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
+      "dev": true
+    },
     "handlebars": {
       "version": "4.7.6",
       "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
@@ -1433,12 +1596,27 @@
         "har-schema": "^2.0.0"
       }
     },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-symbols": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz",
+      "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==",
+      "dev": true
+    },
     "hasha": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hasha/-/hasha-3.0.0.tgz",
@@ -1460,6 +1638,78 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "html-validate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-3.0.0.tgz",
+      "integrity": "sha512-4yipnAN9O33nW7K5qncSHXuP08mqROIvJVlgjLykgRVdx2/ufTe/t/td/8+48iuQMfiu0sgTd8lHJO5o45QByQ==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "@sidvind/better-ajv-errors": "^0.6.9",
+        "acorn-walk": "^7.0.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "deepmerge": "^4.0.0",
+        "eslint": "^7.0.0",
+        "espree": "^7.0.0",
+        "glob": "^7.1.3",
+        "inquirer": "^7.0.0",
+        "json-merge-patch": "^1.0.0",
+        "minimist": "^1.2.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "http-signature": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz",
@@ -1590,6 +1840,15 @@
         }
       }
     },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dev": true,
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -1634,12 +1893,141 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
+    "inquirer": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.3.1.tgz",
+      "integrity": "sha512-/+vOpHQHhoh90Znev8BXiuw1TDQ7IDxWsQnFafUEoK5+4uN5Eoz1p+3GqOj/NtzEi9VzWKQcV9Bm+i8moxedsA==",
+      "dev": true,
+      "requires": {
+        "ansi-escapes": "^4.2.1",
+        "chalk": "^4.1.0",
+        "cli-cursor": "^3.1.0",
+        "cli-width": "^3.0.0",
+        "external-editor": "^3.0.3",
+        "figures": "^3.0.0",
+        "lodash": "^4.17.16",
+        "mute-stream": "0.0.8",
+        "run-async": "^2.4.0",
+        "rxjs": "^6.6.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0",
+        "through": "^2.3.6"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "dev": true,
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+          "dev": true
+        },
+        "lodash": {
+          "version": "4.17.19",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+          "dev": true
+        },
+        "string-width": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
+          "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "is-arguments": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
+      "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
+      "dev": true
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
       "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
+    "is-bigint": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.0.tgz",
+      "integrity": "sha512-t5mGUXC/xRheCK431ylNiSkGGpBp8bHENBcENTkDT6ppwPzEVxNGZRvgvmOEfbWkFhA7D2GEuE2mmQTr78sl2g==",
+      "dev": true
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1649,6 +2037,24 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.1.tgz",
+      "integrity": "sha512-TqZuVwa/sppcrhUCAYkGBk7w0yxfQQnxq28fjkO53tnK9FQXmdwz2JS5+GjsWQ6RByES1K40nI+yDic5c9/aAQ==",
+      "dev": true
+    },
+    "is-callable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.0.tgz",
+      "integrity": "sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==",
+      "dev": true
+    },
+    "is-date-object": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz",
+      "integrity": "sha512-USlDT524woQ08aoZFzh3/Z6ch9Y/EWXEHQ/AaRN0SkKq4t2Jw2R2339tSXmwuVoY7LLlBCbOIlx2myP/L5zk0g==",
+      "dev": true
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1670,36 +2076,108 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.1.tgz",
+      "integrity": "sha512-T/S49scO8plUiAOA2DBTBG3JHpn1yiw0kRp6dgiZ0v2/6twi5eiB0rHtHFH9ZIrvlWc6+4O+m4zg5+Z833aXgw==",
+      "dev": true
+    },
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-number-object": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.4.tgz",
+      "integrity": "sha512-zohwelOAur+5uXtk8O3GPQ1eAcu4ZX3UwxQhUlfFFMNpUd83gXgjbhJh6HmB6LUNV/ieOLQuDwJO3dWJosUeMw==",
+      "dev": true
+    },
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
+    "is-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.0.tgz",
+      "integrity": "sha512-iI97M8KTWID2la5uYXlkbSDQIg4F6o1sYboZKKTDpnDQMLtUL86zxhgDet3Q2SriaYsyGqZ6Mn2SjbRKeLHdqw==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.1"
+      }
+    },
     "is-regexp": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
       "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
       "dev": true
     },
+    "is-set": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.1.tgz",
+      "integrity": "sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==",
+      "dev": true
+    },
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
+    "is-string": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.5.tgz",
+      "integrity": "sha512-buY6VNRjhQMiF1qWDouloZlQbRhDPCebwxSjxMjxgemYT46YMd2NR0/H+fBhEfWX4A/w9TBJ+ol+okqJKFE6vQ==",
+      "dev": true
+    },
+    "is-symbol": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz",
+      "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "is-typed-array": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.3.tgz",
+      "integrity": "sha512-BSYUBOK/HJibQ30wWkWold5txYwMUXQct9YHAQJr8fSwvZoiglcqB0pd7vEN23+Tsi9IUEjztdOSzl4qLVYGTQ==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.0",
+        "es-abstract": "^1.17.4",
+        "foreach": "^2.0.5",
+        "has-symbols": "^1.0.1"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-weakmap": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
+      "integrity": "sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==",
+      "dev": true
+    },
+    "is-weakset": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.1.tgz",
+      "integrity": "sha512-pi4vhbhVHGLxohUw7PhGsueT4vRGFoXhP7+RGN0jKIv9+8PWYCQTqtADngrxOm2g46hoH0+g8uZZBzMrvVGDmw==",
+      "dev": true
+    },
+    "isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true
+    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -1868,6 +2346,15 @@
       "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
       "dev": true
     },
+    "json-merge-patch": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-merge-patch/-/json-merge-patch-1.0.0.tgz",
+      "integrity": "sha512-pG2/EXnf8UvFuST3lNnhBaA0UROQPzrp/5hlK0FHCu7ha8RDKy9AhKlBjTXugY/xgWxeCThRmUHD8QxEKOw1Iw==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "^2.0.3"
+      }
+    },
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
@@ -1898,6 +2385,22 @@
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
       "dev": true
     },
+    "json-to-ast": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/json-to-ast/-/json-to-ast-2.1.0.tgz",
+      "integrity": "sha512-W9Lq347r8tA1DfMvAGn9QNcgYm4Wm7Yc+k8e6vezpMnRT+NHbtlxgNBXRVjXe9YM6eTn6+p/MKOlV/aABJcSnQ==",
+      "dev": true,
+      "requires": {
+        "code-error-fragment": "0.0.230",
+        "grapheme-splitter": "^1.0.4"
+      }
+    },
+    "jsonpointer": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.1.0.tgz",
+      "integrity": "sha512-CXcRvMyTlnR53xMcKnuMzfCA5i/nfblTnnr74CZb6C4vG39eu6w51t7nKmU5MfLfbTgGItliNyjO/ciNPDqClg==",
+      "dev": true
+    },
     "jsprim": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -1916,6 +2419,12 @@
       "integrity": "sha1-6w1GtUER68VhrLTECO+TY73I9+A=",
       "dev": true
     },
+    "leven": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
+      "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==",
+      "dev": true
+    },
     "levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2422,6 +2931,12 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "dev": true
     },
+    "mute-stream": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
+      "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
+      "dev": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -2537,6 +3052,40 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
       "dev": true
     },
+    "object-inspect": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
+      "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==",
+      "dev": true
+    },
+    "object-is": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz",
+      "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
+    },
+    "object.assign": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.0",
+        "object-keys": "^1.0.11"
+      }
+    },
     "once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2587,6 +3136,12 @@
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
       "dev": true
     },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
+    },
     "own-or": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/own-or/-/own-or-1.0.0.tgz",
@@ -2862,6 +3417,16 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regexp.prototype.flags": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz",
+      "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.0-next.1"
+      }
+    },
     "regexpp": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
@@ -2951,6 +3516,12 @@
         "glob": "^7.1.3"
       }
     },
+    "run-async": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
+      "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==",
+      "dev": true
+    },
     "rxjs": {
       "version": "6.6.0",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.0.tgz",
@@ -3011,6 +3582,16 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.2.tgz",
+      "integrity": "sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==",
+      "dev": true,
+      "requires": {
+        "es-abstract": "^1.17.0-next.1",
+        "object-inspect": "^1.7.0"
+      }
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -3151,6 +3732,26 @@
         "strip-ansi": "^4.0.0"
       }
     },
+    "string.prototype.trimend": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz",
+      "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz",
+      "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
     "stringify-object": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
@@ -4399,6 +5000,15 @@
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
       "dev": true
     },
+    "tmp": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+      "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+      "dev": true,
+      "requires": {
+        "os-tmpdir": "~1.0.2"
+      }
+    },
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
@@ -4588,6 +5198,31 @@
         "isexe": "^2.0.0"
       }
     },
+    "which-boxed-primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.1.tgz",
+      "integrity": "sha512-7BT4TwISdDGBgaemWU0N0OU7FeAEJ9Oo2P1PHRm/FCWoEi2VLWC9b6xvxAA3C/NMpxg3HXVgi0sMmGbNUbNepQ==",
+      "dev": true,
+      "requires": {
+        "is-bigint": "^1.0.0",
+        "is-boolean-object": "^1.0.0",
+        "is-number-object": "^1.0.3",
+        "is-string": "^1.0.4",
+        "is-symbol": "^1.0.2"
+      }
+    },
+    "which-collection": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.1.tgz",
+      "integrity": "sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==",
+      "dev": true,
+      "requires": {
+        "is-map": "^2.0.1",
+        "is-set": "^2.0.1",
+        "is-weakmap": "^2.0.1",
+        "is-weakset": "^2.0.1"
+      }
+    },
     "which-module": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
@@ -4600,6 +5235,20 @@
       "integrity": "sha1-Zws6+8VS4LVd9rd4DKdGFfI60cs=",
       "dev": true
     },
+    "which-typed-array": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.2.tgz",
+      "integrity": "sha512-KT6okrd1tE6JdZAy3o2VhMoYPh3+J6EMZLyrxBQsZflI1QCZIxMrIYLkosd8Twf+YfknVIHmYQPgJt238p8dnQ==",
+      "dev": true,
+      "requires": {
+        "available-typed-arrays": "^1.0.2",
+        "es-abstract": "^1.17.5",
+        "foreach": "^2.0.5",
+        "function-bind": "^1.1.1",
+        "has-symbols": "^1.0.1",
+        "is-typed-array": "^1.1.3"
+      }
+    },
     "word-wrap": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",

package.json

@@ -15,6 +15,7 @@
   "files": [
     "index.js",
     "resume.hbs",
+    "partials/*.hbs",
     "style.css"
   ],
   "scripts": {
@@ -28,6 +29,7 @@
   },
   "devDependencies": {
     "eslint": "7.4.0",
+    "html-validate": "3.0.0",
     "husky": "4.2.5",
     "lint-staged": "10.2.11",
     "prettier": "2.0.5",

partials/about.hbs

@@ -0,0 +1,8 @@
+{{#summary}}
+  <section id="about">
+    <h3>About</h3>
+    <div>
+      <p>{{.}}</p>
+    </div>
+  </section>
+{{/summary}}

partials/awards.hbs

@@ -0,0 +1,27 @@
+{{#if resume.awards.length}}
+  <section id="awards">
+    <h3>Awards</h3>
+    <div>
+      {{#each resume.awards}}
+        <div>
+          <div class="spaced-list">
+            <h4>{{title}}</h4>
+            {{#date}}
+              <time datetime="{{.}}">{{formatDate .}}</time>
+            {{/date}}
+          </div>
+          <div class="spaced-list">
+            {{#awarder}}
+              <div>
+                Awarded by <strong>{{.}}</strong>
+              </div>
+            {{/awarder}}
+          </div>
+          {{#summary}}
+            <p>{{.}}</p>
+          {{/summary}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/contact.hbs

@@ -0,0 +1,23 @@
+<section id="contact">
+  <h3>Contact</h3>
+  <div class="grid-list">
+    {{#email}}
+      <div>
+        <h6>Email</h6>
+        <a href="mailto:{{.}}">{{.}}</a>
+      </div>
+    {{/email}}
+    {{#phone}}
+      <div>
+        <h6>Phone</h6>
+        {{.}}
+      </div>
+    {{/phone}}
+    {{#url}}
+      <div>
+        <h6>Website</h6>
+        <a href="{{.}}">{{.}}</a>
+      </div>
+    {{/url}}
+  </div>
+</section>

partials/education.hbs

@@ -0,0 +1,37 @@
+{{#if resume.education.length}}
+  <section id="education">
+    <h3>Education</h3>
+    <div>
+      {{#each resume.education}}
+        <div>
+          <div class="spaced-list">
+            <h4>{{institution}}</h4>
+            <span>
+              <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
+              {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
+            </span>
+          </div>
+          <div class="spaced-list">
+            {{#area}}
+              <strong>{{.}}</strong>
+            {{/area}}
+            {{#url}}
+              <a href="{{.}}">{{.}}</a>
+            {{/url}}
+          </div>
+          {{#studyType}}
+            <p>{{.}}</p>
+          {{/studyType}}
+          {{#if courses.length}}
+            <h5>Courses</h5>
+            <ul>
+              {{#courses}}
+                <li>{{.}}</li>
+              {{/courses}}
+            </ul>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/header.hbs

@@ -0,0 +1,8 @@
+<header>
+  {{#name}}
+    <h1>{{.}}</h1>
+  {{/name}}
+  {{#label}}
+    <h2>{{.}}</h2>
+  {{/label}}
+</header>

partials/interests.hbs

@@ -0,0 +1,21 @@
+{{#if resume.interests.length}}
+  <section id="interests">
+    <h3>Interests</h3>
+    <div class="grid-list">
+      {{#each resume.interests}}
+        <div>
+          {{#name}}
+            <h5>{{.}}</h5>
+          {{/name}}
+          {{#if keywords.length}}
+            <ul class="tag-list">
+              {{#keywords}}
+                <li>{{.}}</li>
+              {{/keywords}}
+            </ul>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/languages.hbs

@@ -0,0 +1,15 @@
+{{#if resume.languages.length}}
+  <section id="languages">
+    <h3>Languages</h3>
+    <div class="grid-list">
+      {{#each resume.languages}}
+        <div>
+          {{#language}}
+            <h6>{{.}}</h6>
+          {{/language}}
+          {{fluency}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/profiles.hbs

@@ -0,0 +1,25 @@
+{{#if profiles.length}}
+  <section id="profiles">
+    <h3>Profiles</h3>
+    <div class="grid-list">
+      {{#profiles}}
+        <div>
+          {{#network}}
+            <h6>{{.}}</h6>
+          {{/network}}
+          {{#if username}}
+            {{#if url}}
+              <a href="{{url}}">{{username}}</a>
+            {{else}}
+              {{username}}
+            {{/if}}
+          {{else}}
+            {{#if url}}
+              <a href="{{url}}">{{url}}</a>
+            {{/if}}
+          {{/if}}
+        </div>
+      {{/profiles}}
+    </div>
+  </section>
+{{/if}}

partials/projects.hbs

@@ -0,0 +1,40 @@
+{{#if resume.projects.length}}
+  <section id="projects">
+    <h3>Projects</h3>
+    <div>
+      {{#each resume.projects}}
+        <div>
+          <div class="spaced-list">
+            <h4>{{name}}</h4>
+            <span>
+              <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
+              {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
+            </span>
+          </div>
+          <div class="spaced-list">
+            <span>
+              <strong>{{join roles}}</strong>
+              {{#entity}}
+                at <strong>{{.}}</strong>
+              {{/entity}}
+            </span>
+            {{#url}}
+              <a href="{{.}}">{{.}}</a>
+            {{/url}}
+          </div>
+          {{#description}}
+            <p>{{.}}</p>
+          {{/description}}
+          {{#if highlights.length}}
+            <h5>Highlights</h5>
+            <ul>
+              {{#highlights}}
+                <li>{{.}}</li>
+              {{/highlights}}
+            </ul>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/publications.hbs

@@ -0,0 +1,30 @@
+{{#if resume.publications.length}}
+  <section id="publications">
+    <h3>Publications</h3>
+    <div>
+      {{#each resume.publications}}
+        <div>
+          <div class="spaced-list">
+            <h4>{{name}}</h4>
+            {{#releaseDate}}
+              <time datetime="{{.}}">{{formatDate .}}</time>
+            {{/releaseDate}}
+          </div>
+          <div class="spaced-list">
+            {{#publisher}}
+              <span>
+                Published by <strong>{{.}}</strong>
+              </span>
+            {{/publisher}}
+            {{#url}}
+              <a href="{{.}}">{{.}}</a>
+            {{/url}}
+          </div>
+          {{#summary}}
+            <p>{{.}}</p>
+          {{/summary}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/references.hbs

@@ -0,0 +1,19 @@
+{{#if resume.references.length}}
+  <section id="references">
+    <h3>References</h3>
+    <div>
+      {{#each resume.references}}
+        {{#if reference}}
+          <blockquote>
+            <p>{{reference}}</p>
+            {{#name}}
+              <p>
+                <cite>{{.}}</cite>
+              </p>
+            {{/name}}
+          </blockquote>
+        {{/if}}
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/skills.hbs

@@ -0,0 +1,21 @@
+{{#if resume.skills.length}}
+  <section id="skills">
+    <h3>Skills</h3>
+    <div class="grid-list">
+      {{#each resume.skills}}
+        <div>
+          {{#name}}
+            <h5>{{.}}</h5>
+          {{/name}}
+          {{#if keywords.length}}
+            <ul class="tag-list">
+              {{#keywords}}
+                <li>{{.}}</li>
+              {{/keywords}}
+            </ul>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/volunteer.hbs

@@ -0,0 +1,37 @@
+{{#if resume.volunteer.length}}
+  <section id="volunteer">
+    <h3>Volunteer</h3>
+    <div>
+      {{#each resume.volunteer}}
+        <div>
+          <div class="spaced-list">
+            <h4>{{organization}}</h4>
+            <span>
+              <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
+              {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
+            </span>
+          </div>
+          <div class="spaced-list">
+            {{#position}}
+              <strong>{{.}}</strong>
+            {{/position}}
+            {{#url}}
+              <a href="{{.}}">{{.}}</a>
+            {{/url}}
+          </div>
+          {{#summary}}
+            <p>{{.}}</p>
+          {{/summary}}
+          {{#if highlights.length}}
+            <h5>Highlights</h5>
+            <ul>
+              {{#highlights}}
+                <li>{{.}}</li>
+              {{/highlights}}
+            </ul>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

partials/work.hbs

@@ -0,0 +1,37 @@
+{{#if resume.work.length}}
+  <section id="work">
+    <h3>Work</h3>
+    <div>
+      {{#each resume.work}}
+        <div>
+          <div class="spaced-list">
+            <h4>{{name}}</h4>
+            <span>
+              <time datetime="{{startDate}}">{{formatDate startDate}}</time> –
+              {{#if endDate}}<time datetime="{{endDate}}">{{formatDate endDate}}</time>{{else}}Present{{/if}}
+            </span>
+          </div>
+          <div class="spaced-list">
+            {{#position}}
+              <strong>{{.}}</strong>
+            {{/position}}
+            {{#url}}
+              <a href="{{.}}">{{.}}</a>
+            {{/url}}
+          </div>
+          {{#summary}}
+            <p>{{.}}</p>
+          {{/summary}}
+          {{#if highlights.length}}
+            <h5>Highlights</h5>
+            <ul>
+              {{#highlights}}
+                <li>{{.}}</li>
+              {{/highlights}}
+            </ul>
+          {{/if}}
+        </div>
+      {{/each}}
+    </div>
+  </section>
+{{/if}}

resume.hbs

@@ -2,474 +2,29 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title>{{#resume.basics}}{{name}}{{/resume.basics}}</title>
+    <title>{{resume.basics.name}}</title>
-    <meta name="description" content="{{#resume.basics}}{{summary}}{{/resume.basics}}" />
+    <meta name="description" content="{{resume.basics.summary}}" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" />
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
+    <style>{{{css}}}</style>
-    <style>
-      {{{css}}}
-    </style>
   </head>
   <body>
-    <header id="header">
+    {{#resume.basics}}
-      <div class="container">
+      {{> header}}
-        <div class="row">
+      {{> contact}}
-          <div class="col-sm-9 offset-sm-3">
+      {{> about}}
-            {{#resume.basics}}
+      {{> profiles}}
-              {{#name}}
+    {{/resume.basics}}
-                <h1>{{.}}</h1>
-              {{/name}}
-              {{#label}}
-                <h2>{{.}}</h2>
-              {{/label}}
-            {{/resume.basics}}
-          </div>
-        </div>
-      </div>
-    </header>
 
-    <div id="content" class="container">
+    {{> work}}
-      {{#resume.basics}}
+    {{> volunteer}}
-        <section id="contact" class="row">
+    {{> education}}
-          <aside class="col-sm-3">
+    {{> projects}}
-            <h3>Contact</h3>
+    {{> awards}}
-          </aside>
+    {{> publications}}
-          <div class="col-sm-9">
+    {{> skills}}
-            <div class="row">
+    {{> languages}}
-              {{#email}}
+    {{> interests}}
-                <div class="col-sm-6">
+    {{> references}}
-                  <strong>Email</strong>
-                  <div class="email">
-                    <a href="mailto:{{.}}">{{.}}</a>
-                  </div>
-                </div>
-              {{/email}}
-              {{#phone}}
-                <div class="col-sm-6">
-                  <strong>Phone</strong>
-                  <div class="phone">
-                    {{.}}
-                  </div>
-                </div>
-              {{/phone}}
-              {{#url}}
-                <div class="col-sm-6">
-                  <strong>Website</strong>
-                  <div class="website">
-                    <a href="{{.}}">{{.}}</a>
-                  </div>
-                </div>
-              {{/url}}
-            </div>
-          </div>
-        </section>
-        {{#summary}}
-          <section id="about" class="row">
-            <aside class="col-sm-3">
-              <h3>About</h3>
-            </aside>
-            <div class="col-sm-9">
-              <p>{{.}}</p>
-            </div>
-          </section>
-        {{/summary}}
-        {{#if profiles.length}}
-          <section id="profiles" class="row">
-            <aside class="col-sm-3">
-              <h3>Profiles</h3>
-            </aside>
-            <div class="col-sm-9">
-              <div class="row">
-                {{#profiles}}
-                  <div class="col-sm-6">
-                    {{#network}}
-                      <strong class="network">{{.}}</strong>
-                    {{/network}}
-                    {{#if username}}
-                      <div class="username">
-                        {{#if url}}
-                          <div class="url">
-                            <a href="{{url}}">{{username}}</a>
-                          </div>
-                        {{else}}
-                          {{username}}
-                        {{/if}}
-                      </div>
-                    {{else}}
-                      {{#if url}}
-                        <div class="url">
-                          <a href="{{url}}">{{url}}</a>
-                        </div>
-                      {{/if}}
-                    {{/if}}
-                  </div>
-                {{/profiles}}
-              </div>
-            </div>
-          </section>
-        {{/if}}
-      {{/resume.basics}}
-
-      {{#if resume.work.length}}
-        <section id="work" class="row">
-          <aside class="col-sm-3">
-            <h3>Work</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.work}}
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>{{name}}</span>
-                    <span class="date">
-                      {{formatDate startDate}} — {{#if endDate}}{{formatDate endDate}}{{else}}Present{{/if}}
-                    </span>
-                  </h4>
-                  {{#url}}
-                    <div class="website float-right">
-                      <a href="{{.}}">{{.}}</a>
-                    </div>
-                  {{/url}}
-                  {{#position}}
-                    <div class="position">
-                      {{.}}
-                    </div>
-                  {{/position}}
-                  {{#summary}}
-                    <div class="summary">
-                      <p>{{.}}</p>
-                    </div>
-                  {{/summary}}
-                  {{#if highlights.length}}
-                    <h4>Highlights</h4>
-                    <ul class="highlights">
-                      {{#highlights}}
-                        <li class="bullet">{{.}}</li>
-                      {{/highlights}}
-                    </ul>
-                  {{/if}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.volunteer.length}}
-        <section id="volunteer" class="row">
-          <aside class="col-sm-3">
-            <h3>Volunteer</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.volunteer}}
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>{{organization}}</span>
-                    <span class="date">
-                      {{formatDate startDate}} — {{#if endDate}}{{formatDate endDate}}{{else}}Present{{/if}}
-                    </span>
-                  </h4>
-                  {{#url}}
-                    <div class="website float-right">
-                      <a href="{{.}}">{{.}}</a>
-                    </div>
-                  {{/url}}
-                  {{#position}}
-                    <div class="position">
-                      {{.}}
-                    </div>
-                  {{/position}}
-                  {{#summary}}
-                    <div class="summary">
-                      <p>{{.}}</p>
-                    </div>
-                  {{/summary}}
-                  {{#if highlights.length}}
-                    <h4>Highlights</h4>
-                    <ul class="highlights">
-                      {{#highlights}}
-                        <li class="bullet">{{.}}</li>
-                      {{/highlights}}
-                    </ul>
-                  {{/if}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.education.length}}
-        <section id="education" class="row">
-          <aside class="col-sm-3">
-            <h3>Education</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.education}}
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>{{institution}}</span>
-                    <span class="date">
-                      {{formatDate startDate}} — {{#if endDate}}{{formatDate endDate}}{{else}}Present{{/if}}
-                    </span>
-                  </h4>
-                  {{#url}}
-                    <div class="website float-right">
-                      <a href="{{.}}">{{.}}</a>
-                    </div>
-                  {{/url}}
-                  {{#area}}
-                    <div class="area">
-                      {{.}}
-                    </div>
-                  {{/area}}
-                  {{#studyType}}
-                    <div class="studyType">
-                      {{.}}
-                    </div>
-                  {{/studyType}}
-                  {{#if courses.length}}
-                    <h4>Courses</h4>
-                    <ul class="courses">
-                      {{#courses}}
-                        <li>{{.}}</li>
-                      {{/courses}}
-                    </ul>
-                  {{/if}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.projects.length}}
-        <section id="projects" class="row">
-          <aside class="col-sm-3">
-            <h3>Projects</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.projects}}
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>{{name}}</span>
-                    <span class="date">
-                      {{formatDate startDate}} — {{#if endDate}}{{formatDate endDate}}{{else}}Present{{/if}}
-                    </span>
-                  </h4>
-                  {{#url}}
-                    <div class="website float-right">
-                      <a href="{{.}}">{{.}}</a>
-                    </div>
-                  {{/url}}
-                  <div class="roles">
-                    <strong>{{join roles}}</strong>
-                    {{#entity}}
-                      <em>at</em>
-                      <strong>{{.}}</strong>
-                    {{/entity}}
-                  </div>
-                  {{#description}}
-                    <div class="description">
-                      <p>{{.}}</p>
-                    </div>
-                  {{/description}}
-                  {{#if highlights.length}}
-                    <h4>Highlights</h4>
-                    <ul class="highlights">
-                      {{#highlights}}
-                        <li class="bullet">{{.}}</li>
-                      {{/highlights}}
-                    </ul>
-                  {{/if}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.awards.length}}
-        <section id="awards" class="row">
-          <aside class="col-sm-3">
-            <h3>Awards</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.awards}}
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>{{title}}</span>
-                  </h4>
-                  {{#date}}
-                    <div class="date float-right">
-                      <em>Awarded</em>
-                      {{formatDate .}}
-                    </div>
-                  {{/date}}
-                  {{#awarder}}
-                    <div class="awarder">
-                      <em>by</em>
-                      <strong>{{.}}</strong>
-                    </div>
-                  {{/awarder}}
-                  {{#summary}}
-                    <div class="summary">
-                      {{.}}
-                    </div>
-                  {{/summary}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.publications.length}}
-        <section id="publications" class="row">
-          <aside class="col-sm-3">
-            <h3>Publications</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.publications}}
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>{{name}}</span>
-                    <span class="date">
-                      {{releaseDate}}
-                    </span>
-                  </h4>
-                  {{#url}}
-                    <div class="website float-right">
-                      <a href="{{.}}">{{.}}</a>
-                    </div>
-                  {{/url}}
-                  {{#publisher}}
-                    <div class="publisher">
-                      <em>Published by</em>
-                      <strong>{{.}}</strong>
-                    </div>
-                  {{/publisher}}
-                  {{#summary}}
-                    <div class="summary">
-                      <p>{{.}}</p>
-                    </div>
-                  {{/summary}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.skills.length}}
-        <section id="skills" class="row">
-          <aside class="col-sm-3">
-            <h3>Skills</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.skills}}
-                <div class="col-sm-6">
-                  {{#name}}
-                    <div class="name">
-                      <h4>{{.}}</h4>
-                    </div>
-                  {{/name}}
-                  {{#if keywords.length}}
-                    <ul class="keywords">
-                      {{#keywords}}<li>{{.}}</li>{{/keywords}}
-                    </ul>
-                  {{/if}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.languages.length}}
-        <section id="languages" class="row">
-          <aside class="col-sm-3">
-            <h3>Languages</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.languages}}
-                <div class="col-sm-6">
-                  {{#language}}
-                    <div class="language">
-                      <strong>{{.}}</strong>
-                    </div>
-                  {{/language}}
-                  {{#fluency}}
-                    <div class="fluency">
-                      {{.}}
-                    </div>
-                  {{/fluency}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.interests.length}}
-        <section id="interests" class="row">
-          <aside class="col-sm-3">
-            <h3>Interests</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.interests}}
-                <div class="col-sm-6">
-                  {{#name}}
-                    <div class="name">
-                      <h4>{{.}}</h4>
-                    </div>
-                  {{/name}}
-                  {{#if keywords.length}}
-                    <ul class="keywords">
-                      {{#keywords}}<li>{{.}}</li>{{/keywords}}
-                    </ul>
-                  {{/if}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-
-      {{#if resume.references.length}}
-        <section id="references" class="row">
-          <aside class="col-sm-3">
-            <h3>References</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-              {{#each resume.references}}
-                <div class="col-sm-12">
-                  {{#if reference}}
-                    <blockquote class="reference">
-                      <p>{{reference}}</p>
-                      {{#name}}
-                        <p class="name">
-                          <strong>— {{.}}</strong>
-                        </p>
-                      {{/name}}
-                    </blockquote>
-                  {{/if}}
-                </div>
-              {{/each}}
-            </div>
-          </div>
-        </section>
-      {{/if}}
-    </div>
   </body>
 </html>

style.css

@@ -1,181 +1,209 @@
-@font-face {
+:root {
-  font-family: 'Octicons';
+  /* Colors */
-  font-style: normal;
+  --primaryColor: #212529;
-  font-weight: normal;
+  --secondaryColor: #95a5a6;
-  src: url('data:font/woff;base64,d09GRgABAAAAAAWgAAsAAAAABVQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIMrGNtYXAAAAFoAAAAXAAAAFzxE/EEZ2FzcAAAAcQAAAAIAAAACAAAABBnbHlmAAABzAAAAXwAAAF8tFkZ3GhlYWQAAANIAAAANgAAADYYMkpraGhlYQAAA4AAAAAkAAAAJAfBA8dobXR4AAADpAAAABgAAAAYDAAAAWxvY2EAAAO8AAAADgAAAA4A5gBgbWF4cAAAA8wAAAAgAAAAIAAKAFBuYW1lAAAD7AAAAZIAAAGSxxxndHBvc3QAAAWAAAAAIAAAACAAAwAAAAMCqwGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NcDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAEAIPBS8Nf//f//AAAAAAAg8FLw1//9//8AAf/jD7IPLgADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAwAIAAsAAGwAAEzQ3PgE3NjMyFx4BFxYVFAcOAQcGIyInLgEnJgAUFEYvLjU1Li9GFBQUFEYvLjU1Li9GFBQBwDUuL0YUFBQURi8uNTUuL0YUFBQURi8uAAMAAQCZA/8DDgAzAEEATQAAAQcFHgEVFAYHBQYiJyUVHgEVFAYHHgEdARQiPQE0NjcuATU0Njc1Jy4BNTQ2NyUyNjMyFgEXIxYyPwEVFAYjIiY1ExQWMzI2NTQmIyIGAgcBAekHCQkH/hcDBwP+xw4SBQQEBYAFBAQFEg5vBwkJBwHpAgMCAQT++vUBBgwF9ZZqapbBJhobJSUbGiYDDQGZAgwHCAwCmAEBYl0IHRIJEAcHEAmlGhqlCRAHBxAJER4IcSQCCwgICwKZAQH+s0wCAkygMDAwMAFADRMTDQ0TEwAAAAEAAAABAADtMnsXXw889QALBAAAAAAA2oqDMAAAAADaioMwAAAAAAP/Aw4AAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA/8AAQAAAAAAAAAAAAAAAAAAAAYEAAAAAAAAAAAAAAACAAAAAgAAAAQAAAEAAAAAAAoAFAAeAEwAvgAAAAEAAAAGAE4AAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNSZWd1bGFyAFIAZQBnAHUAbABhAHJvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA')
+  --accentColor: #f1c40f;
-    format('woff');
+  --linkColor: #2ecc71;
+  --mutedColor: #f4f6f6;
+
+  /* Typography */
+  --ratio: 1.25;
+  --scale0: 1rem;
+  --scale1: calc(var(--scale0) * var(--ratio));
+  --scale2: calc(var(--scale1) * var(--ratio));
+  --scale3: calc(var(--scale2) * var(--ratio));
+  --scale4: calc(var(--scale3) * var(--ratio));
+  --scale5: calc(var(--scale4) * var(--ratio));
 }
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 html {
   font-size: 14px;
 }
+
 body {
-  background: #fff;
+  color: var(--primaryColor);
-  font-family: Lato, sans-serif;
+  display: grid;
-  margin: 0 0 6rem;
+  font: 1em/1.5 Lato, sans-serif;
-}
+  gap: 2em;
-a {
+  grid-template-columns:
-  color: #2ecc71;
+    [full-start]
-}
+    1fr
-a:focus,
+    [main-start side-start]
-a:hover {
+    minmax(min-content, 12em)
-  color: #f1c40f;
+    [side-end content-start]
-  text-decoration: none;
+    minmax(min-content, 36em)
-}
+    [main-end content-end]
-section {
+    1fr
-  margin-top: 2rem;
+    [full-end];
-}
+  grid-template-rows: auto [content] 0;
-li {
+  margin-bottom: 4em;
-  line-height: 1.8;
-  list-style: none;
-}
-li:before {
-  content: '\f052';
-  float: left;
-  font: 13px Octicons;
-  margin-top: 6px;
-  margin-left: -20px;
-  opacity: 0.1;
-  position: absolute;
-}
-blockquote {
-  border-left: 5px solid #e7e9ec;
-  font-size: 1rem;
-  padding-left: 1rem;
-}
-em {
-  color: #95a5a6;
-  font-weight: normal;
-  font-style: normal;
-}
-h4 span:first-child {
-  font-weight: bold;
-}
-.container {
-  max-width: 750px;
-  padding: 0 2rem;
-}
-.col-sm-6 {
-  margin-bottom: 10px;
-}
-.col-sm-12 h4 {
-  margin-top: 1rem;
-}
-.col-sm-12 + .col-sm-12 {
-  margin-top: 2rem;
-}
-.keywords {
-  padding: 0;
-}
-.keywords > li {
-  display: inline-block;
-  background: #f4f6f6;
-  margin: 0 4px 4px 0;
-  padding: 2px 8px;
-}
-.keywords > li:before {
-  content: none;
-}
-#header {
-  background: #f4f6f6;
-  padding: 4rem 0;
-  margin-bottom: 4rem;
-}
-#header h2 {
-  color: #95a5a6;
-}
-#content h3 {
-  color: #f1c40f;
-}
-#content aside {
-  text-align: right;
-  padding-right: 2rem;
-}
-#work .position,
-#volunteer .position {
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-#education .area {
-  font-weight: bold;
-}
-#education .area:before {
-  content: '\f0d7';
-  font: 16px Octicons;
-  margin-right: 6px;
-  vertical-align: bottom;
-}
-#education .studyType {
-  margin-left: 25px;
-}
-#awards .summary,
-#publications .summary,
-#projects .description {
-  margin-top: 8px;
-}
-#publications .website a:before {
-  content: attr(href);
-}
-#interests .row,
-#skills .row {
-  display: block;
-}
-#interests .col-sm-6,
-#skills .col-sm-6 {
-  float: left;
 }
 
-@media (min-width: 480px) {
+body::before {
-  .strike-through {
+  content: '';
-    border-top: 1px solid #f4f6f6;
+  grid-column: full;
-    height: 20px;
+  grid-row: content;
-    margin-top: 12px;
+}
-    margin-bottom: -2px;
+
-    position: relative;
+ol,
+ul {
+  padding-left: 1em;
+}
+
+li + li {
+  margin-top: 0.2em;
+}
+
+li::marker {
+  color: var(--mutedColor);
+}
+
+a {
+  color: var(--linkColor);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+a:focus,
+a:hover {
+  color: var(--accentColor);
+}
+
+h1,
+h2,
+h3,
+h5 {
+  font-weight: normal;
+}
+
+h1,
+h2,
+h3 {
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: var(--scale5);
+}
+
+h2 {
+  color: var(--secondaryColor);
+  font-size: var(--scale4);
+}
+
+h3 {
+  color: var(--accentColor);
+  font-size: var(--scale3);
+  grid-column: side;
+  margin-bottom: 1rem;
+}
+
+h4 {
+  font-size: var(--scale2);
+}
+
+h5 {
+  font-size: var(--scale1);
+}
+
+h6 {
+  font-size: var(--scale0);
+}
+
+p:not(:first-child) {
+  margin-top: 1em;
+}
+
+p:not(:last-child) {
+  margin-bottom: 1em;
+}
+
+blockquote {
+  border-left: 0.2em solid var(--mutedColor);
+  padding-left: 1em;
+}
+
+cite {
+  color: var(--secondaryColor);
+  font-style: inherit;
+}
+
+cite::before {
+  content: '— ';
+}
+
+header {
+  background: var(--mutedColor);
+  display: inherit;
+  gap: inherit;
+  grid-column: full;
+  grid-template-columns: inherit;
+  padding: 4em 0;
+  row-gap: 0;
+}
+
+header > *,
+section {
+  grid-column: main;
+}
+
+.grid-list {
+  display: grid;
+  gap: 1em;
+}
+
+.spaced-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.spaced-list:first-child::before {
+  border-bottom: 1px solid var(--mutedColor);
+  content: '';
+  flex-grow: 1;
+  margin: 0 1em;
+  order: 1;
+}
+
+.spaced-list > :nth-child(2) {
+  order: 2;
+}
+
+.tag-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+}
+
+.tag-list > li {
+  background: var(--mutedColor);
+  margin: 0 0.2em 0.2em 0;
+  padding: 0.2em 0.6em;
+}
+
+@media (min-width: 48em) {
+  h3 {
+    text-align: right;
+    margin-bottom: inherit;
   }
-  .strike-through span,
+
-  .strike-through a {
+  header > *,
-    background: #fff;
+  section {
-    position: absolute;
+    grid-column: content;
   }
-  .strike-through span:first-child {
+
-    padding-right: 20px;
+  section {
-    margin-top: -12px;
+    display: contents;
   }
-  .strike-through span + span {
+
-    font-size: 1rem;
+  .grid-list {
-    margin-top: -10px;
+    grid-template-columns: 1fr 1fr;
-    padding-left: 20px;
-    right: 0;
-  }
-}
-@media (max-width: 768px) {
-  .col-sm-6:last-child {
-    margin-bottom: 0;
-  }
-  #content aside {
-    margin-bottom: 20px;
-    padding-right: 0;
-    text-align: left;
-  }
-  #publications .website a:before {
-    content: 'View publication';
-  }
-}
-@media (max-width: 480px) {
-  .date {
-    font-size: 1rem;
-  }
-  .strike-through span:first-child {
-    margin-bottom: 7px;
-  }
-  .strike-through span {
-    display: block;
-  }
-  #header {
-    margin-bottom: 10px;
-    padding: 40px 0;
-  }
-  #actions {
-    display: none;
   }
 }

tap-snapshots/test-render.js-TAP.test.js

@@ -14,529 +14,447 @@ exports[`test/render.js TAP renders a resume > must match snapshot 1`] = `
     <meta name="description" content="Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" />
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
+    <style>:root {
-    <style>
+  /* Colors */
-      @font-face {
+  --primaryColor: #212529;
-  font-family: 'Octicons';
+  --secondaryColor: #95a5a6;
-  font-style: normal;
+  --accentColor: #f1c40f;
-  font-weight: normal;
+  --linkColor: #2ecc71;
-  src: url('data:font/woff;base64,d09GRgABAAAAAAWgAAsAAAAABVQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIMrGNtYXAAAAFoAAAAXAAAAFzxE/EEZ2FzcAAAAcQAAAAIAAAACAAAABBnbHlmAAABzAAAAXwAAAF8tFkZ3GhlYWQAAANIAAAANgAAADYYMkpraGhlYQAAA4AAAAAkAAAAJAfBA8dobXR4AAADpAAAABgAAAAYDAAAAWxvY2EAAAO8AAAADgAAAA4A5gBgbWF4cAAAA8wAAAAgAAAAIAAKAFBuYW1lAAAD7AAAAZIAAAGSxxxndHBvc3QAAAWAAAAAIAAAACAAAwAAAAMCqwGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NcDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAEAIPBS8Nf//f//AAAAAAAg8FLw1//9//8AAf/jD7IPLgADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAwAIAAsAAGwAAEzQ3PgE3NjMyFx4BFxYVFAcOAQcGIyInLgEnJgAUFEYvLjU1Li9GFBQUFEYvLjU1Li9GFBQBwDUuL0YUFBQURi8uNTUuL0YUFBQURi8uAAMAAQCZA/8DDgAzAEEATQAAAQcFHgEVFAYHBQYiJyUVHgEVFAYHHgEdARQiPQE0NjcuATU0Njc1Jy4BNTQ2NyUyNjMyFgEXIxYyPwEVFAYjIiY1ExQWMzI2NTQmIyIGAgcBAekHCQkH/hcDBwP+xw4SBQQEBYAFBAQFEg5vBwkJBwHpAgMCAQT++vUBBgwF9ZZqapbBJhobJSUbGiYDDQGZAgwHCAwCmAEBYl0IHRIJEAcHEAmlGhqlCRAHBxAJER4IcSQCCwgICwKZAQH+s0wCAkygMDAwMAFADRMTDQ0TEwAAAAEAAAABAADtMnsXXw889QALBAAAAAAA2oqDMAAAAADaioMwAAAAAAP/Aw4AAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA/8AAQAAAAAAAAAAAAAAAAAAAAYEAAAAAAAAAAAAAAACAAAAAgAAAAQAAAEAAAAAAAoAFAAeAEwAvgAAAAEAAAAGAE4AAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNSZWd1bGFyAFIAZQBnAHUAbABhAHJvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA')
+  --mutedColor: #f4f6f6;
-    format('woff');
+
+  /* Typography */
+  --ratio: 1.25;
+  --scale0: 1rem;
+  --scale1: calc(var(--scale0) * var(--ratio));
+  --scale2: calc(var(--scale1) * var(--ratio));
+  --scale3: calc(var(--scale2) * var(--ratio));
+  --scale4: calc(var(--scale3) * var(--ratio));
+  --scale5: calc(var(--scale4) * var(--ratio));
 }
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
 html {
   font-size: 14px;
 }
+
 body {
-  background: #fff;
+  color: var(--primaryColor);
-  font-family: Lato, sans-serif;
+  display: grid;
-  margin: 0 0 6rem;
+  font: 1em/1.5 Lato, sans-serif;
+  gap: 2em;
+  grid-template-columns:
+    [full-start]
+    1fr
+    [main-start side-start]
+    minmax(min-content, 12em)
+    [side-end content-start]
+    minmax(min-content, 36em)
+    [main-end content-end]
+    1fr
+    [full-end];
+  grid-template-rows: auto [content] 0;
+  margin-bottom: 4em;
 }
+
+body::before {
+  content: '';
+  grid-column: full;
+  grid-row: content;
+}
+
+ol,
+ul {
+  padding-left: 1em;
+}
+
+li + li {
+  margin-top: 0.2em;
+}
+
+li::marker {
+  color: var(--mutedColor);
+}
+
 a {
-  color: #2ecc71;
+  color: var(--linkColor);
+  text-decoration: none;
+  transition: color 0.2s;
 }
+
 a:focus,
 a:hover {
-  color: #f1c40f;
+  color: var(--accentColor);
-  text-decoration: none;
 }
-section {
+
-  margin-top: 2rem;
+h1,
-}
+h2,
-li {
+h3,
-  line-height: 1.8;
+h5 {
-  list-style: none;
-}
-li:before {
-  content: '\\f052';
-  float: left;
-  font: 13px Octicons;
-  margin-top: 6px;
-  margin-left: -20px;
-  opacity: 0.1;
-  position: absolute;
-}
-blockquote {
-  border-left: 5px solid #e7e9ec;
-  font-size: 1rem;
-  padding-left: 1rem;
-}
-em {
-  color: #95a5a6;
   font-weight: normal;
-  font-style: normal;
 }
-h4 span:first-child {
+
-  font-weight: bold;
+h1,
+h2,
+h3 {
+  line-height: 1.2;
 }
-.container {
+
-  max-width: 750px;
+h1 {
-  padding: 0 2rem;
+  font-size: var(--scale5);
 }
-.col-sm-6 {
+
-  margin-bottom: 10px;
+h2 {
+  color: var(--secondaryColor);
+  font-size: var(--scale4);
 }
-.col-sm-12 h4 {
+
-  margin-top: 1rem;
+h3 {
+  color: var(--accentColor);
+  font-size: var(--scale3);
+  grid-column: side;
+  margin-bottom: 1rem;
 }
-.col-sm-12 + .col-sm-12 {
+
-  margin-top: 2rem;
+h4 {
+  font-size: var(--scale2);
 }
-.keywords {
+
+h5 {
+  font-size: var(--scale1);
+}
+
+h6 {
+  font-size: var(--scale0);
+}
+
+p:not(:first-child) {
+  margin-top: 1em;
+}
+
+p:not(:last-child) {
+  margin-bottom: 1em;
+}
+
+blockquote {
+  border-left: 0.2em solid var(--mutedColor);
+  padding-left: 1em;
+}
+
+cite {
+  color: var(--secondaryColor);
+  font-style: inherit;
+}
+
+cite::before {
+  content: '— ';
+}
+
+header {
+  background: var(--mutedColor);
+  display: inherit;
+  gap: inherit;
+  grid-column: full;
+  grid-template-columns: inherit;
+  padding: 4em 0;
+  row-gap: 0;
+}
+
+header > *,
+section {
+  grid-column: main;
+}
+
+.grid-list {
+  display: grid;
+  gap: 1em;
+}
+
+.spaced-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.spaced-list:first-child::before {
+  border-bottom: 1px solid var(--mutedColor);
+  content: '';
+  flex-grow: 1;
+  margin: 0 1em;
+  order: 1;
+}
+
+.spaced-list > :nth-child(2) {
+  order: 2;
+}
+
+.tag-list {
+  display: flex;
+  list-style: none;
   padding: 0;
 }
-.keywords > li {
+
-  display: inline-block;
+.tag-list > li {
-  background: #f4f6f6;
+  background: var(--mutedColor);
-  margin: 0 4px 4px 0;
+  margin: 0 0.2em 0.2em 0;
-  padding: 2px 8px;
+  padding: 0.2em 0.6em;
-}
-.keywords > li:before {
-  content: none;
-}
-#header {
-  background: #f4f6f6;
-  padding: 4rem 0;
-  margin-bottom: 4rem;
-}
-#header h2 {
-  color: #95a5a6;
-}
-#content h3 {
-  color: #f1c40f;
-}
-#content aside {
-  text-align: right;
-  padding-right: 2rem;
-}
-#work .position,
-#volunteer .position {
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-#education .area {
-  font-weight: bold;
-}
-#education .area:before {
-  content: '\\f0d7';
-  font: 16px Octicons;
-  margin-right: 6px;
-  vertical-align: bottom;
-}
-#education .studyType {
-  margin-left: 25px;
-}
-#awards .summary,
-#publications .summary,
-#projects .description {
-  margin-top: 8px;
-}
-#publications .website a:before {
-  content: attr(href);
-}
-#interests .row,
-#skills .row {
-  display: block;
-}
-#interests .col-sm-6,
-#skills .col-sm-6 {
-  float: left;
 }
 
-@media (min-width: 480px) {
+@media (min-width: 48em) {
-  .strike-through {
+  h3 {
-    border-top: 1px solid #f4f6f6;
+    text-align: right;
-    height: 20px;
+    margin-bottom: inherit;
-    margin-top: 12px;
-    margin-bottom: -2px;
-    position: relative;
   }
-  .strike-through span,
-  .strike-through a {
-    background: #fff;
-    position: absolute;
-  }
-  .strike-through span:first-child {
-    padding-right: 20px;
-    margin-top: -12px;
-  }
-  .strike-through span + span {
-    font-size: 1rem;
-    margin-top: -10px;
-    padding-left: 20px;
-    right: 0;
-  }
-}
-@media (max-width: 768px) {
-  .col-sm-6:last-child {
-    margin-bottom: 0;
-  }
-  #content aside {
-    margin-bottom: 20px;
-    padding-right: 0;
-    text-align: left;
-  }
-  #publications .website a:before {
-    content: 'View publication';
-  }
-}
-@media (max-width: 480px) {
-  .date {
-    font-size: 1rem;
-  }
-  .strike-through span:first-child {
-    margin-bottom: 7px;
-  }
-  .strike-through span {
-    display: block;
-  }
-  #header {
-    margin-bottom: 10px;
-    padding: 40px 0;
-  }
-  #actions {
-    display: none;
-  }
-}
 
-    </style>
+  header > *,
+  section {
+    grid-column: content;
+  }
+
+  section {
+    display: contents;
+  }
+
+  .grid-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>
   </head>
   <body>
-    <header id="header">
+      <header>
-      <div class="container">
+          <h1>Richard Hendriks</h1>
-        <div class="row">
+          <h2>Programmer</h2>
-          <div class="col-sm-9 offset-sm-3">
+      </header>
-                <h1>Richard Hendriks</h1>
+      <section id="contact">
-                <h2>Programmer</h2>
+        <h3>Contact</h3>
-          </div>
+        <div class="grid-list">
-        </div>
+            <div>
-      </div>
+              <h6>Email</h6>
-    </header>
+              <a href="mailto:richard.hendriks@mail.com">richard.hendriks@mail.com</a>
-
-    <div id="content" class="container">
-        <section id="contact" class="row">
-          <aside class="col-sm-3">
-            <h3>Contact</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-                <div class="col-sm-6">
-                  <strong>Email</strong>
-                  <div class="email">
-                    <a href="mailto:richard.hendriks@mail.com">richard.hendriks@mail.com</a>
-                  </div>
-                </div>
-                <div class="col-sm-6">
-                  <strong>Phone</strong>
-                  <div class="phone">
-                    (912) 555-4321
-                  </div>
-                </div>
-                <div class="col-sm-6">
-                  <strong>Website</strong>
-                  <div class="website">
-                    <a href="http://richardhendricks.example.com">http://richardhendricks.example.com</a>
-                  </div>
-                </div>
             </div>
+            <div>
+              <h6>Phone</h6>
+              (912) 555-4321
+            </div>
+            <div>
+              <h6>Website</h6>
+              <a href="http://richardhendricks.example.com">http://richardhendricks.example.com</a>
+            </div>
+        </div>
+      </section>
+        <section id="about">
+          <h3>About</h3>
+          <div>
+            <p>Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!</p>
           </div>
         </section>
-          <section id="about" class="row">
+        <section id="profiles">
-            <aside class="col-sm-3">
+          <h3>Profiles</h3>
-              <h3>About</h3>
+          <div class="grid-list">
-            </aside>
+              <div>
-            <div class="col-sm-9">
+                  <h6>Twitter</h6>
-              <p>Richard hails from Tulsa. He has earned degrees from the University of Oklahoma and Stanford. (Go Sooners and Cardinal!) Before starting Pied Piper, he worked for Hooli as a part time software developer. While his work focuses on applied information theory, mostly optimizing lossless compression schema of both the length-limited and adaptive variants, his non-work interests range widely, everything from quantum computing to chaos theory. He could tell you about it, but THAT would NOT be a “length-limited” conversation!</p>
+                    neutralthoughts
+              </div>
+              <div>
+                  <h6>SoundCloud</h6>
+                    <a href="https://soundcloud.example.com/dandymusicnl">dandymusicnl</a>
+              </div>
+          </div>
+        </section>
+
+      <section id="work">
+        <h3>Work</h3>
+        <div>
+            <div>
+              <div class="spaced-list">
+                <h4>Pied Piper</h4>
+                <span>
+                  <time datetime="2013-12-01">Dec 2013</time> –
+                  <time datetime="2014-12-01">Dec 2014</time>
+                </span>
+              </div>
+              <div class="spaced-list">
+                  <strong>CEO/President</strong>
+                  <a href="http://piedpiper.example.com">http://piedpiper.example.com</a>
+              </div>
+                <p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
+                <h5>Highlights</h5>
+                <ul>
+                    <li>Build an algorithm for artist to detect if their music was violating copy right infringement laws</li>
+                    <li>Successfully won Techcrunch Disrupt</li>
+                    <li>Optimized an algorithm that holds the current world record for Weisman Scores</li>
+                </ul>
             </div>
-          </section>
+        </div>
-          <section id="profiles" class="row">
+      </section>
-            <aside class="col-sm-3">
+      <section id="volunteer">
-              <h3>Profiles</h3>
+        <h3>Volunteer</h3>
-            </aside>
+        <div>
-            <div class="col-sm-9">
+            <div>
-              <div class="row">
+              <div class="spaced-list">
-                  <div class="col-sm-6">
+                <h4>CoderDojo</h4>
-                      <strong class="network">Twitter</strong>
+                <span>
-                      <div class="username">
+                  <time datetime="2012-01-01">Jan 2012</time> –
-                          neutralthoughts
+                  <time datetime="2013-01-01">Jan 2013</time>
-                      </div>
+                </span>
-                  </div>
+              </div>
-                  <div class="col-sm-6">
+              <div class="spaced-list">
-                      <strong class="network">SoundCloud</strong>
+                  <strong>Teacher</strong>
-                      <div class="username">
+                  <a href="http://coderdojo.example.com/">http://coderdojo.example.com/</a>
-                          <div class="url">
+              </div>
-                            <a href="https://soundcloud.example.com/dandymusicnl">dandymusicnl</a>
+                <p>Global movement of free coding clubs for young people.</p>
-                          </div>
+                <h5>Highlights</h5>
-                      </div>
+                <ul>
+                    <li>Awarded &#x27;Teacher of the Month&#x27;</li>
+                </ul>
+            </div>
+        </div>
+      </section>
+      <section id="education">
+        <h3>Education</h3>
+        <div>
+            <div>
+              <div class="spaced-list">
+                <h4>University of Oklahoma</h4>
+                <span>
+                  <time datetime="2011-06-01">Jun 2011</time> –
+                  <time datetime="2014-01-01">Jan 2014</time>
+                </span>
+              </div>
+              <div class="spaced-list">
+                  <strong>Information Technology</strong>
+                  <a href="https://www.ou.edu/">https://www.ou.edu/</a>
+              </div>
+                <p>Bachelor</p>
+                <h5>Courses</h5>
+                <ul>
+                    <li>DB1101 - Basic SQL</li>
+                    <li>CS2011 - Java Introduction</li>
+                </ul>
+            </div>
+        </div>
+      </section>
+      <section id="projects">
+        <h3>Projects</h3>
+        <div>
+            <div>
+              <div class="spaced-list">
+                <h4>Miss Direction</h4>
+                <span>
+                  <time datetime="2016-08-24">Aug 2016</time> –
+                  <time datetime="2016-08-24">Aug 2016</time>
+                </span>
+              </div>
+              <div class="spaced-list">
+                <span>
+                  <strong>Team lead, Designer</strong>
+                    at <strong>Smoogle</strong>
+                </span>
+                  <a href="missdirection.example.com">missdirection.example.com</a>
+              </div>
+                <p>A mapping engine that misguides you</p>
+                <h5>Highlights</h5>
+                <ul>
+                    <li>Won award at AIHacks 2016</li>
+                    <li>Built by all women team of newbie programmers</li>
+                    <li>Using modern technologies such as GoogleMaps, Chrome Extension and Javascript</li>
+                </ul>
+            </div>
+        </div>
+      </section>
+      <section id="awards">
+        <h3>Awards</h3>
+        <div>
+            <div>
+              <div class="spaced-list">
+                <h4>Digital Compression Pioneer Award</h4>
+                  <time datetime="2014-11-01">Nov 2014</time>
+              </div>
+              <div class="spaced-list">
+                  <div>
+                    Awarded by <strong>Techcrunch</strong>
                   </div>
               </div>
+                <p>There is no spoon.</p>
             </div>
-          </section>
+        </div>
-
+      </section>
-        <section id="work" class="row">
+      <section id="publications">
-          <aside class="col-sm-3">
+        <h3>Publications</h3>
-            <h3>Work</h3>
+        <div>
-          </aside>
+            <div>
-          <div class="col-sm-9">
+              <div class="spaced-list">
-            <div class="row">
+                <h4>Video compression for 3d media</h4>
-                <div class="col-sm-12">
+                  <time datetime="2014-10-01">Oct 2014</time>
-                  <h4 class="strike-through">
+              </div>
-                    <span>Pied Piper</span>
+              <div class="spaced-list">
-                    <span class="date">
+                  <span>
-                      Dec 2013 — Dec 2014
+                    Published by <strong>Hooli</strong>
-                    </span>
+                  </span>
-                  </h4>
+                  <a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)</a>
-                    <div class="website float-right">
+              </div>
-                      <a href="http://piedpiper.example.com">http://piedpiper.example.com</a>
+                <p>Innovative middle-out compression algorithm that changes the way we store data.</p>
-                    </div>
-                    <div class="position">
-                      CEO/President
-                    </div>
-                    <div class="summary">
-                      <p>Pied Piper is a multi-platform technology based on a proprietary universal compression algorithm that has consistently fielded high Weisman Scores™ that are not merely competitive, but approach the theoretical limit of lossless compression.</p>
-                    </div>
-                    <h4>Highlights</h4>
-                    <ul class="highlights">
-                        <li class="bullet">Build an algorithm for artist to detect if their music was violating copy right infringement laws</li>
-                        <li class="bullet">Successfully won Techcrunch Disrupt</li>
-                        <li class="bullet">Optimized an algorithm that holds the current world record for Weisman Scores</li>
-                    </ul>
-                </div>
             </div>
-          </div>
+        </div>
-        </section>
+      </section>
-
+      <section id="skills">
-        <section id="volunteer" class="row">
+        <h3>Skills</h3>
-          <aside class="col-sm-3">
+        <div class="grid-list">
-            <h3>Volunteer</h3>
+            <div>
-          </aside>
+                <h5>Web Development</h5>
-          <div class="col-sm-9">
+                <ul class="tag-list">
-            <div class="row">
+                    <li>HTML</li>
-                <div class="col-sm-12">
+                    <li>CSS</li>
-                  <h4 class="strike-through">
+                    <li>Javascript</li>
-                    <span>CoderDojo</span>
+                </ul>
-                    <span class="date">
-                      Jan 2012 — Jan 2013
-                    </span>
-                  </h4>
-                    <div class="website float-right">
-                      <a href="http://coderdojo.example.com/">http://coderdojo.example.com/</a>
-                    </div>
-                    <div class="position">
-                      Teacher
-                    </div>
-                    <div class="summary">
-                      <p>Global movement of free coding clubs for young people.</p>
-                    </div>
-                    <h4>Highlights</h4>
-                    <ul class="highlights">
-                        <li class="bullet">Awarded &#x27;Teacher of the Month&#x27;</li>
-                    </ul>
-                </div>
             </div>
-          </div>
+            <div>
-        </section>
+                <h5>Compression</h5>
-
+                <ul class="tag-list">
-        <section id="education" class="row">
+                    <li>Mpeg</li>
-          <aside class="col-sm-3">
+                    <li>MP4</li>
-            <h3>Education</h3>
+                    <li>GIF</li>
-          </aside>
+                </ul>
-          <div class="col-sm-9">
-            <div class="row">
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>University of Oklahoma</span>
-                    <span class="date">
-                      Jun 2011 — Jan 2014
-                    </span>
-                  </h4>
-                    <div class="website float-right">
-                      <a href="https://www.ou.edu/">https://www.ou.edu/</a>
-                    </div>
-                    <div class="area">
-                      Information Technology
-                    </div>
-                    <div class="studyType">
-                      Bachelor
-                    </div>
-                    <h4>Courses</h4>
-                    <ul class="courses">
-                        <li>DB1101 - Basic SQL</li>
-                        <li>CS2011 - Java Introduction</li>
-                    </ul>
-                </div>
             </div>
-          </div>
+        </div>
-        </section>
+      </section>
-
+      <section id="languages">
-        <section id="projects" class="row">
+        <h3>Languages</h3>
-          <aside class="col-sm-3">
+        <div class="grid-list">
-            <h3>Projects</h3>
+            <div>
-          </aside>
+                <h6>English</h6>
-          <div class="col-sm-9">
+              Native speaker
-            <div class="row">
-                <div class="col-sm-12">
-                  <h4 class="strike-through">
-                    <span>Miss Direction</span>
-                    <span class="date">
-                      Aug 2016 — Aug 2016
-                    </span>
-                  </h4>
-                    <div class="website float-right">
-                      <a href="missdirection.example.com">missdirection.example.com</a>
-                    </div>
-                  <div class="roles">
-                    <strong>Team lead, Designer</strong>
-                      <em>at</em>
-                      <strong>Smoogle</strong>
-                  </div>
-                    <div class="description">
-                      <p>A mapping engine that misguides you</p>
-                    </div>
-                    <h4>Highlights</h4>
-                    <ul class="highlights">
-                        <li class="bullet">Won award at AIHacks 2016</li>
-                        <li class="bullet">Built by all women team of newbie programmers</li>
-                        <li class="bullet">Using modern technologies such as GoogleMaps, Chrome Extension and Javascript</li>
-                    </ul>
-                </div>
             </div>
-          </div>
+        </div>
-        </section>
+      </section>
-
+      <section id="interests">
-        <section id="awards" class="row">
+        <h3>Interests</h3>
-          <aside class="col-sm-3">
+        <div class="grid-list">
-            <h3>Awards</h3>
+            <div>
-          </aside>
+                <h5>Wildlife</h5>
-          <div class="col-sm-9">
+                <ul class="tag-list">
-            <div class="row">
+                    <li>Ferrets</li>
-                <div class="col-sm-12">
+                    <li>Unicorns</li>
-                  <h4 class="strike-through">
+                </ul>
-                    <span>Digital Compression Pioneer Award</span>
-                  </h4>
-                    <div class="date float-right">
-                      <em>Awarded</em>
-                      Nov 2014
-                    </div>
-                    <div class="awarder">
-                      <em>by</em>
-                      <strong>Techcrunch</strong>
-                    </div>
-                    <div class="summary">
-                      There is no spoon.
-                    </div>
-                </div>
             </div>
-          </div>
+        </div>
-        </section>
+      </section>
-
+      <section id="references">
-        <section id="publications" class="row">
+        <h3>References</h3>
-          <aside class="col-sm-3">
+        <div>
-            <h3>Publications</h3>
+              <blockquote>
-          </aside>
+                <p>It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company.</p>
-          <div class="col-sm-9">
+                  <p>
-            <div class="row">
+                    <cite>Erlich Bachman</cite>
-                <div class="col-sm-12">
+                  </p>
-                  <h4 class="strike-through">
+              </blockquote>
-                    <span>Video compression for 3d media</span>
+        </div>
-                    <span class="date">
+      </section>
-                      2014-10-01
-                    </span>
-                  </h4>
-                    <div class="website float-right">
-                      <a href="http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)">http://en.wikipedia.org/wiki/Silicon_Valley_(TV_series)</a>
-                    </div>
-                    <div class="publisher">
-                      <em>Published by</em>
-                      <strong>Hooli</strong>
-                    </div>
-                    <div class="summary">
-                      <p>Innovative middle-out compression algorithm that changes the way we store data.</p>
-                    </div>
-                </div>
-            </div>
-          </div>
-        </section>
-
-        <section id="skills" class="row">
-          <aside class="col-sm-3">
-            <h3>Skills</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-                <div class="col-sm-6">
-                    <div class="name">
-                      <h4>Web Development</h4>
-                    </div>
-                    <ul class="keywords">
-                      <li>HTML</li><li>CSS</li><li>Javascript</li>
-                    </ul>
-                </div>
-                <div class="col-sm-6">
-                    <div class="name">
-                      <h4>Compression</h4>
-                    </div>
-                    <ul class="keywords">
-                      <li>Mpeg</li><li>MP4</li><li>GIF</li>
-                    </ul>
-                </div>
-            </div>
-          </div>
-        </section>
-
-        <section id="languages" class="row">
-          <aside class="col-sm-3">
-            <h3>Languages</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-                <div class="col-sm-6">
-                    <div class="language">
-                      <strong>English</strong>
-                    </div>
-                    <div class="fluency">
-                      Native speaker
-                    </div>
-                </div>
-            </div>
-          </div>
-        </section>
-
-        <section id="interests" class="row">
-          <aside class="col-sm-3">
-            <h3>Interests</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-                <div class="col-sm-6">
-                    <div class="name">
-                      <h4>Wildlife</h4>
-                    </div>
-                    <ul class="keywords">
-                      <li>Ferrets</li><li>Unicorns</li>
-                    </ul>
-                </div>
-            </div>
-          </div>
-        </section>
-
-        <section id="references" class="row">
-          <aside class="col-sm-3">
-            <h3>References</h3>
-          </aside>
-          <div class="col-sm-9">
-            <div class="row">
-                <div class="col-sm-12">
-                    <blockquote class="reference">
-                      <p>It is my pleasure to recommend Richard, his performance working as a consultant for Main St. Company proved that he will be a valuable addition to any company.</p>
-                        <p class="name">
-                          <strong>— Erlich Bachman</strong>
-                        </p>
-                    </blockquote>
-                </div>
-            </div>
-          </div>
-        </section>
-    </div>
   </body>
 </html>
 

test/render.js

@@ -1,4 +1,5 @@
 const { test } = require('tap')
+const { HtmlValidate } = require('html-validate')
 
 const { render } = require('..')
 const resume = require('../resume.json')
@@ -7,3 +8,18 @@ test('renders a resume', t => {
   t.matchSnapshot(render(resume))
   t.end()
 })
+
+test('renders valid HTML', t => {
+  const htmlvalidate = new HtmlValidate({
+    rules: {
+      'void-style': ['error', { style: 'selfclosing' }],
+    },
+  })
+
+  const {
+    results: [{ messages } = {}],
+  } = htmlvalidate.validateString(render(resume))
+
+  t.is(messages, undefined)
+  t.end()
+})