diff --git a/.eleventy.js b/.eleventy.js
index ef0cb21..3ecd170 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -38,7 +38,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
 
-  eleventyConfig.addWatchTarget("./css/");
+  eleventyConfig.addWatchTarget("./css");
 
   // Alias `layout: article` to `layout: layouts/post.njk`
   eleventyConfig.addLayoutAlias("article", "layouts/article.njk");
diff --git a/package-lock.json b/package-lock.json
index 78fb240..995aa2c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "open-props": "^1.5.3"
+        "open-props": "^1.5.3",
+        "postcss-jit-props": "^1.0.9"
       },
       "devDependencies": {
         "@11ty/eleventy": "^1.0.0",
@@ -3815,6 +3816,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
     "node_modules/globby": {
       "version": "12.2.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
@@ -3847,6 +3853,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
     "node_modules/gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -5323,7 +5334,6 @@
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
       "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -6006,8 +6016,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -6099,7 +6108,6 @@
       "version": "8.4.20",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
       "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -6580,6 +6588,20 @@
         "postcss": "^8.0.0"
       }
     },
+    "node_modules/postcss-jit-props": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-jit-props/-/postcss-jit-props-1.0.9.tgz",
+      "integrity": "sha512-sMAo7eVF480LnEGG7G0uS+4L0wRZoXiLthxJePUqo4gHrzu17hU5obAdiscjp/aZag9TqokU6dpI1zHyDGxslA==",
+      "dependencies": {
+        "tiny-glob": "^0.2.9"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.8"
+      }
+    },
     "node_modules/postcss-lab-function": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz",
@@ -8429,7 +8451,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8981,6 +9002,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "dependencies": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
     "node_modules/to-buffer": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
@@ -12248,6 +12278,11 @@
         "define-properties": "^1.1.3"
       }
     },
+    "globalyzer": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz",
+      "integrity": "sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q=="
+    },
     "globby": {
       "version": "12.2.0",
       "resolved": "https://registry.npmjs.org/globby/-/globby-12.2.0.tgz",
@@ -12270,6 +12305,11 @@
         }
       }
     },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
+    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -13384,8 +13424,7 @@
     "nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
     },
     "napi-build-utils": {
       "version": "1.0.2",
@@ -13886,8 +13925,7 @@
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -13956,7 +13994,6 @@
       "version": "8.4.20",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.20.tgz",
       "integrity": "sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==",
-      "dev": true,
       "requires": {
         "nanoid": "^3.3.4",
         "picocolors": "^1.0.0",
@@ -14231,6 +14268,14 @@
       "dev": true,
       "requires": {}
     },
+    "postcss-jit-props": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/postcss-jit-props/-/postcss-jit-props-1.0.9.tgz",
+      "integrity": "sha512-sMAo7eVF480LnEGG7G0uS+4L0wRZoXiLthxJePUqo4gHrzu17hU5obAdiscjp/aZag9TqokU6dpI1zHyDGxslA==",
+      "requires": {
+        "tiny-glob": "^0.2.9"
+      }
+    },
     "postcss-lab-function": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz",
@@ -15576,8 +15621,7 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "source-map-support": {
       "version": "0.5.21",
@@ -16006,6 +16050,15 @@
       "integrity": "sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==",
       "dev": true
     },
+    "tiny-glob": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz",
+      "integrity": "sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==",
+      "requires": {
+        "globalyzer": "0.1.0",
+        "globrex": "^0.1.2"
+      }
+    },
     "to-buffer": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/to-buffer/-/to-buffer-1.1.1.tgz",
diff --git a/package.json b/package.json
index 0f775f5..1f6bf90 100644
--- a/package.json
+++ b/package.json
@@ -44,5 +44,9 @@
   ],
   "volta": {
     "node": "16.14.0"
+  },
+  "dependencies": {
+    "open-props": "^1.5.3",
+    "postcss-jit-props": "^1.0.9"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
index 2115a35..da6ab4f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,10 +1,13 @@
 const cssnano = require('cssnano');
 const postcssImport = require('postcss-import');
 const postcssPresetEnv = require('postcss-preset-env');
+const postcssJitProps = require('postcss-jit-props');
+const OpenProps = require('open-props');
 
 module.exports = {
   plugins: [
     postcssImport(),
+    postcssJitProps(OpenProps),
     postcssPresetEnv(),
     cssnano(),
   ],
diff --git a/src/css/app.css b/src/css/app.css
index e119848..18255f4 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -1,316 +1,9 @@
 @import 'normalize.css';
-
-:root {
-  --font-size-2: 1.25rem;
-  --spacing-20: 20px;
-  --spacing-25: 25px;
-  --font-serif: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
-  --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
-  --black-1: #121212;
-  --bg: #ffffff;
-  --link: #5353FF;
-  --gray-0: #686868;
-}
-
-/**
- * Global elements
- */
-* {
-  box-sizing: border-box;
-}
-
-body {
-  background: var(--bg);
-  color: var(--black-1);
-  font-family: var(--font-sans);
-  font-size: var(--font-size-2);
-  line-height: 1.5;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: var(--font-serif);
-  font-weight: 400;
-  line-height: 1.25;
-  margin-top: 0;
-  margin-bottom: clamp(.333rem, 50vw, 1rem);
-}
-
-p,
-ul,
-ol {
-  margin-bottom: 1.5rem;
-  margin-top: 0;
-}
-
-h1 {
-  font-size: clamp(2.4rem, 4vw, 3.2rem);
-}
-
-h2 {
-  font-size: clamp(2.2rem, 4vw, 3rem);
-}
-
-h3 {
-  font-size: clamp(1.9rem, 4vw, 2.7rem);
-}
-
-h4 {
-  font-size: clamp(1.6rem, 4vw, 2.4rem);
-}
-
-h5 {
-  font-size: clamp(1.5rem, 4vw, 2.2rem);
-}
-
-h6 {
-  font-size: clamp(1.4rem, 4vw, 2rem);
-}
-
-a {
-  color: var(--link);
-}
-
-img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-
-figure {
-  margin: 0 auto 1.5rem;
-  padding: 0;
-}
-
-figure img {
-  margin: 0 auto;
-}
-
-figcaption {
-  font-size: 1rem;
-  padding: 5px 0;
-  text-align: center;
-}
-
-blockquote {
-  background:
-    linear-gradient(to right, var(--gray-0)  4px, transparent 4px) 0 100%,
-    linear-gradient(to left, var(--gray-0)  4px, transparent 4px) 100% 0,
-    linear-gradient(to bottom, var(--gray-0) 4px, transparent 4px) 100% 0,
-    linear-gradient(to top, var(--gray-0) 4px, transparent 4px) 0 100%;
-  background-repeat: no-repeat;
-  background-size: 20px 20px;
-  font-family: var(--font-serif);
-  font-style: italic;
-  font-size: 2rem;
-  margin: 0;
-  padding: var(--spacing-20);
-}
-
-table {
-  border: 1px solid var(--gray-0);
-  margin-bottom: 1.5rem;
-}
-
-td, th {
-  padding: 10px;
-}
-
-/*
- * utility classes
- */
-.container {
-  margin: 0 auto;
-  max-width: 1600px;
-}
-
-.list-reset {
-  list-style: none;
-  margin-left: 0;
-  padding-left: 0;
-}
-
-.pd {
-  padding: var(--spacing-20);
-}
-
-/*
- * page parts
- */
-.siteheader__logo {
-  fill: var(--black-1);
-  width: 150px;
-}
-
-.button--skip-link {
-  background: var(--bg);
-  border: 2px solid var(--black-1);
-  border-radius: 4px;
-  color: var(--black-1);
-  display: inline-block;
-  line-height: 1;
-  text-decoration: none;
-  padding: 10px 15px;
-  left: 5px;
-  position: absolute;
-  top: -300px;
-}
-
-.button--skip-link:focus {
-  top: 10px;
-}
-
-.tmpl-article .content-body {
-  margin: 0 auto;
-  max-width: 700px;
-}
-
-/**
- * meta info
- */
-.post-tags {
-  display: flex;
-}
-
-.post-tags__item {
-  margin-right: 10px;
-}
-
-/**
- * icons
- */
-.icon-date {
-  background: url(/img/ui/calendar.svg) no-repeat 0 50%;
-  padding-left: var(--spacing-25);
-}
-
-.icon-tag {
-  background: url(/img/ui/tag.svg) no-repeat 0 50%;
-  padding-left: var(--spacing-25);
-}
-
-/**
- * okaidia theme for JavaScript, CSS and HTML
- * Loosely based on Monokai textmate theme by http://www.monokai.nl/
- * @author ocodia
- */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: #f8f8f2;
-  background: none;
-  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  font-size: 1em;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-  border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #272822;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #f8f8f2;
-}
-
-.token.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #f92672;
-}
-
-.token.boolean,
-.token.number {
-  color: #ae81ff;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #a6e22e;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-  color: #f8f8f2;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
-  color: #e6db74;
-}
-
-.token.keyword {
-  color: #66d9ef;
-}
-
-.token.regex,
-.token.important {
-  color: #fd971f;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
+@import 'base/variables.css';
+@import 'base/global.css';
+@import 'utilities/helpers.css';
+@import 'layout/header.css';
+@import 'layout/article.css';
+@import 'components/meta.css';
+@import 'components/icons.css';
+@import 'components/syntax.css';
diff --git a/src/css/base/global.css b/src/css/base/global.css
new file mode 100644
index 0000000..da773f6
--- /dev/null
+++ b/src/css/base/global.css
@@ -0,0 +1,107 @@
+/**
+ * Global elements
+ */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--bg);
+  color: var(--black-1);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-3);
+  line-height: 1.5;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  line-height: 1.25;
+  margin-top: 0;
+  margin-bottom: clamp(.333rem, 50vw, 1rem);
+}
+
+p,
+ul,
+ol {
+  margin-bottom: 1.5rem;
+  margin-top: 0;
+}
+
+h1 {
+  font-size: clamp(2.4rem, 4vw, 3.2rem);
+}
+
+h2 {
+  font-size: clamp(2.2rem, 4vw, 3rem);
+}
+
+h3 {
+  font-size: clamp(1.9rem, 4vw, 2.7rem);
+}
+
+h4 {
+  font-size: clamp(1.6rem, 4vw, 2.4rem);
+}
+
+h5 {
+  font-size: clamp(1.5rem, 4vw, 2.2rem);
+}
+
+h6 {
+  font-size: clamp(1.4rem, 4vw, 2rem);
+}
+
+a {
+  color: var(--link);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+figure {
+  margin: 0 auto var(--size-5);
+  padding: 0;
+}
+
+figure img {
+  margin: 0 auto;
+}
+
+figcaption {
+  font-size: var(--font-size-3);
+  padding: var(--size-1) 0;
+  text-align: center;
+}
+
+blockquote {
+  background:
+    linear-gradient(to right, var(--gray-6)  4px, transparent 4px) 0 100%,
+    linear-gradient(to left, var(--gray-6)  4px, transparent 4px) 100% 0,
+    linear-gradient(to bottom, var(--gray-6) 4px, transparent 4px) 100% 0,
+    linear-gradient(to top, var(--gray-6) 4px, transparent 4px) 0 100%;
+  background-repeat: no-repeat;
+  background-size: var(--size-4) var(--size-4);
+  font-family: var(--font-serif);
+  font-style: italic;
+  font-size: var(--font-size-7);
+  margin: 0;
+  padding: var(--size-4);
+}
+
+table {
+  border: 1px solid var(--gray-6);
+  margin-bottom: var(--size-5);
+}
+
+td, th {
+  padding: var(--size-2);
+}
diff --git a/src/css/base/variables.css b/src/css/base/variables.css
new file mode 100644
index 0000000..553aee6
--- /dev/null
+++ b/src/css/base/variables.css
@@ -0,0 +1,7 @@
+:root {
+  --black-1: #121212;
+  --font-serif: Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
+  --bg: #ffffff;
+  --link: #5353FF;
+}
diff --git a/src/css/components/icons.css b/src/css/components/icons.css
new file mode 100644
index 0000000..5d474b0
--- /dev/null
+++ b/src/css/components/icons.css
@@ -0,0 +1,9 @@
+.icon-date {
+  background: url(/img/ui/calendar.svg) no-repeat 0 50%;
+  padding-left: var(--size-5);
+}
+
+.icon-tag {
+  background: url(/img/ui/tag.svg) no-repeat 0 50%;
+  padding-left: var(--size-5);
+}
diff --git a/src/css/components/meta.css b/src/css/components/meta.css
new file mode 100644
index 0000000..c8e081d
--- /dev/null
+++ b/src/css/components/meta.css
@@ -0,0 +1,7 @@
+.post-tags {
+  display: flex;
+}
+
+.post-tags__item {
+  margin-right: 10px;
+}
diff --git a/src/css/components/syntax.css b/src/css/components/syntax.css
new file mode 100644
index 0000000..456d80f
--- /dev/null
+++ b/src/css/components/syntax.css
@@ -0,0 +1,120 @@
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: #f8f8f2;
+  background: none;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 1em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+  background: #272822;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #f8f8f2;
+}
+
+.token.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+  color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+  color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #e6db74;
+}
+
+.token.keyword {
+  color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+  color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}
diff --git a/src/css/layout/article.css b/src/css/layout/article.css
new file mode 100644
index 0000000..73ac3a1
--- /dev/null
+++ b/src/css/layout/article.css
@@ -0,0 +1,4 @@
+.tmpl-article .content-body {
+  margin: 0 auto;
+  max-width: 700px;
+}
diff --git a/src/css/layout/header.css b/src/css/layout/header.css
new file mode 100644
index 0000000..0abd0fe
--- /dev/null
+++ b/src/css/layout/header.css
@@ -0,0 +1,22 @@
+.siteheader__logo {
+  fill: var(--black-1);
+  width: 150px;
+}
+
+.button--skip-link {
+  background: var(--bg);
+  border: 2px solid var(--black-1);
+  border-radius: 4px;
+  color: var(--black-1);
+  display: inline-block;
+  line-height: 1;
+  text-decoration: none;
+  padding: var(--size-2) var(--size-3);
+  left: 5px;
+  position: absolute;
+  top: -1000px;
+}
+
+.button--skip-link:focus {
+  top: 10px;
+}
diff --git a/src/css/utilities/helpers.css b/src/css/utilities/helpers.css
new file mode 100644
index 0000000..2805c27
--- /dev/null
+++ b/src/css/utilities/helpers.css
@@ -0,0 +1,17 @@
+/*
+ * utility classes
+ */
+.container {
+  margin: 0 auto;
+  max-width: 1600px;
+}
+
+.list-reset {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.pd {
+  padding: var(--size-4);
+}