WIP

_sass/_typography.scss

@@ -1,4 +0,0 @@
-
-.text-mono {
-  font-family: $mono-font;
-}

_sass/_variables.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-//  Colors
+//  Branding
 // ------------------------------
 $green:            #00b00b;
 $brand-color:      $green;
@@ -12,6 +12,17 @@ $body-font: -apple-system, BlinkMacSystemFont,
 	"Noto Sans", sans-serif, "Apple Color Emoji",
 	"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
+$mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+
+$font-size-normal: 16px;
+$font-size-small: 14px;
+
+$spacer-1: 4px;
+$spacer-2: 8px;
+$spacer-3: 16px;
+$spacer-4: 24px;
+$spacer-5: 32px;
+$spacer-6: 40px;
 
 // Heading sizes - mobile
 $h0-size-mobile: 31px;
@@ -27,3 +38,21 @@ $h3-size: 19px;
 $h4-size: 15px;
 $h5-size: 13px;
 $h6-size: 12px;
+
+// Container
+
+$container-max-sm: 540px;
+$container-max-md: 720px;
+$container-max-lg: 960px;
+$container-max-xl: 1140px;
+
+$border-radius: 4px;
+
+//  Colors
+// ------------------------------
+
+$bg-gray-light: $gray-200;
+$border-gray: $gray-500;
+$border-gray-light: $gray-300;
+
+$text-gray: $gray-900;

_sass/base/base.scss

@@ -1,13 +1,4 @@
 
-a {
-    color: $brand-color !important;
-}
-
-figure {
-    margin: 1em 0 !important;
-}
-
-
 .container-sm {
     max-width: 512px;
     margin-right: auto;

_sass/base/normalize.scss

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

_sass/base/typography.scss

@@ -0,0 +1,47 @@
+
+body {
+    font-family: $body-font;
+    font-size: $font-size-normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+// Text
+
+.text-red {
+    color: $red-900;
+}
+
+// Links
+
+a {
+    color: $brand-color;
+}
+
+// Code
+
+pre {
+    padding: $spacer-3;
+    overflow: auto;
+    // font-size: 85%;
+    // line-height: 1.45;
+    background-color: $gray-100;
+    border-radius: $border-radius;
+
+    > code {
+        // Abit of a hack, need to reset some things as markdown inline code blocks does not set a class.
+        background: transparent !important;
+        padding: 0 !important;
+        border-radius: 0 !important;
+    }
+}
+
+pre,
+code,
+.text-mono {
+    font-family: $mono-font;
+}
+
+figure {
+    margin: 1em 0 !important;
+}

_sass/component/_syntax-highlight.scss

@@ -0,0 +1,68 @@
+// https://github.com/rouge-ruby/rouge/wiki/List-of-tokens
+
+.highlight {
+
+    .n, // Name
+    .na, // Name.Attribute
+    .nb, // Name.Builtin
+    .bp, // Name.Builtin.Pseudo
+    .nc, // Name.Class
+    .no, // Name.Constant
+    .nd, // Name.Decorator
+    .ni, // Name.Entity
+    .ne, // Name.Exception
+    .nf, // Name.Function
+    .py, // Name.Property
+    .nl, // Name.Label
+    .nn, // Name.Namespace
+    .nx  // Name.Other
+    {
+        color: $blue-400;
+    }
+
+    .nt, // Name.Tag
+    .nv, // Name.Variable
+    .vc, // Name.Variable.Class
+    .vg, // Name.Variable.Global
+    .vi  // Name.Variable.Instance
+    {
+        color: $indigo-900;
+    }
+
+    // Strings
+
+    .s, // Literal.String
+    .sb, // Literal.String.Backtick
+    .sc, // Literal.String.Char
+    .sd, // Literal.String.Doc
+    .s2, // Literal.String.Double
+    .se, // Literal.String.Escape
+    .sh, // Literal.String.Haredoc
+    .si, // Literal.String.Interpol
+    .sx, // Literal.String.Other
+    .sr, // Literal.String.Regex
+    .s1, // Literal.String.Single
+    .ss  // Literal.String.Symbol
+    {
+        color: $red-900;
+    }
+
+    // Numbers
+
+    .m, // Literal.Number
+    .mf, // Literal.Number.Float
+    .mh, // Literal.Number.Hex
+    .mi, // Literal.Number.Integer
+    .il, // Literal.Number.Integer.Long
+    .mo, // Literal.Number.Oct
+    .mx, // Literal.Number.Hex
+    .mb // Literal.Number.Bin
+    {
+        color: $blue-400;
+    }
+
+    // Operator
+    //.o {
+        // color: $syntax-operator;
+    //}
+}

_sass/component/markdown.scss

@@ -0,0 +1,32 @@
+
+.markdown-body {
+
+    h1,h2,h3,h4,h5,h6 {
+        padding-top: .4em;
+        padding-bottom: .4em;
+    }
+
+    h1,h2 {
+        border-bottom: solid 1px $border-gray-light;
+    }
+
+    code {
+        background: $gray-200;
+        padding: .2em .4em;
+        border-radius: $border-radius;
+    }
+
+    table {
+        width: 100%;
+        border-collapse: collapse;
+
+        th, td {
+            border: solid 1px $border-gray-light;
+            padding: .4em .8em;
+        }
+
+        tr:nth-child(even) > td {
+            background: $gray-100;
+        }
+    }
+}

_sass/layout/_container.scss

@@ -0,0 +1,16 @@
+
+.container {
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    &-lg {
+        @extend .container;
+        max-width: $container-max-lg;
+    }
+
+    &-xl {
+        @extend .container;
+        max-width: $container-max-xl;
+    }
+}

_sass/layout/_header.scss

@@ -7,7 +7,7 @@
 	margin-bottom: $spacer-4;
 	border-bottom: solid 1px $border-gray-light;
 
-	&-title a:hover {
+	&-title a {
         text-decoration: none;
 	}
 

_sass/main.scss

@@ -1,15 +1,21 @@
 
 @import 'https://unpkg.com/tippy.js@5.2.1/dist/tippy.css';
 
+@import "variables/colors";
 @import "variables";
-@import "base";
-@import "typography";
 
+@import "base/normalize";
+@import "base/base";
+@import "base/typography";
+
+@import "layout/container";
 @import "layout/header";
 @import "layout/package";
 @import "layout/footer";
 
 @import "component/button";
 @import "component/search";
+@import "component/markdown";
+@import "component/syntax-highlight";
 
 @import "misc";

_sass/variables/_colors.scss

@@ -0,0 +1,52 @@
+
+// Color system
+
+// Gray (almost 50 of them)
+
+$gray-100: #f1f3f5;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #868e96;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+
+// Indigo
+
+$indigo-000: #edf2ff;
+$indigo-100: #dbe4ff;
+$indigo-200: #bac8ff;
+$indigo-300: #91a7ff;
+$indigo-400: #748ffc;
+$indigo-500: #5c7cfa;
+$indigo-600: #4c6ef5;
+$indigo-700: #4263eb;
+$indigo-800: #3b5bdb;
+$indigo-900: #364fc7;
+
+// Blue
+
+$blue-100: #d0ebff;
+$blue-200: #a5d8ff;
+$blue-300: #74c0fc;
+$blue-400: #4dabf7;
+$blue-500: #339af0;
+$blue-600: #228be6;
+$blue-700: #1c7ed6;
+$blue-800: #1971c2;
+$blue-900: #1864ab;
+
+// Red
+
+$red-000: #fff5f5;
+$red-100: #ffe3e3;
+$red-200: #ffc9c9;
+$red-300: #ffa8a8;
+$red-400: #ff8787;
+$red-500: #ff6b6b;
+$red-600: #fa5252;
+$red-700: #f03e3e;
+$red-800: #e03131;
+$red-900: #c92a2a;

assets/css/style.scss

@@ -3,8 +3,4 @@
 # only Main files contain this front matter, not partials.
 ---
 
-{% if site.theme == "jekyll-theme-primer" %}
-@import "primer-support/index";
-{% endif %}
 @import "main";
-@import "{{ site.theme }}";