build: use sass

build.ts

@@ -19,6 +19,7 @@ import { rollup } from 'rollup'
 import uglify from 'rollup-plugin-uglify'
 // @ts-ignore
 import rollupPluginTypescript from 'rollup-plugin-typescript'
+import * as sass from 'node-sass'
 
 async function confirm (question: string, positive: Function, negative: Function): Promise<void> {
 
@@ -169,7 +170,10 @@ async function buildJavaScript (sourceFolder: string, distFolder: string) {
 }
 
 async function buildStyles (sourceFolder: string, distFolder: string) {
-  fs.copySync(`${sourceFolder}/styles.css`, `${distFolder}/styles.css`)
+  const result = sass.renderSync({
+    file: `${sourceFolder}/styles.scss`,
+  })
+  fs.writeFileSync(`${distFolder}/styles.css`, result.css.toString('utf8'))
 }
 
 async function buildAssets (sourceFolder: string, distFolder: string) {

sizes.json

@@ -15,13 +15,13 @@
     "brotli": 300
   },
   "styles.css": {
-    "raw": 1798,
-    "gzip": 708,
-    "brotli": 569
+    "raw": 1542,
+    "gzip": 651,
+    "brotli": 511
   },
   "total": {
-    "raw": 19705,
-    "gzip": 6810,
-    "brotli": 5504
+    "raw": 19449,
+    "gzip": 6753,
+    "brotli": 5446
   }
 }

src/_vars.scss

@@ -0,0 +1,8 @@
+// Colors
+$dark: #7c203a;
+$accent: #f85959;
+$light: #ff9f68;
+$highlight: #feff89;
+
+// Fonts
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

src/styles.scss

@@ -0,0 +1,120 @@
+@import 'vars';
+
+html {
+  font-size: 150%;
+  line-height: 1.5;
+}
+
+body {
+  font-family: $font-stack;
+  color: rgba(0, 0, 0, .86);
+  background-color: rgba(0, 0, 0, .02);
+  padding-left: 3rem;
+  padding-right: 3rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 50rem;
+  padding-bottom: 33vh;
+}
+
+p, pre {
+  font: inherit;
+  margin-bottom: 1.5em;
+  margin-top: 1.5em;
+}
+
+b, strong {
+  color: #7c203a;
+}
+
+p {
+
+  code {
+    font-size: 1.2em;
+  }
+}
+
+a {
+  color: #f85959;
+
+  &:hover {
+    color: #7c203a;
+  }
+
+  &:focus {
+    color: #7c203a;
+    outline: 2px solid #f85959;
+  }
+}
+
+::selection {
+  background: #feff89;
+  color: #7c203a;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+
+  h1 {
+    font-weight: 300;
+    font-size: 4em;
+  }
+}
+
+svg {
+  color: #f85959;
+}
+
+aside {
+  margin-bottom: 6rem;
+
+  p {
+    font-size: 1.2em;
+  }
+}
+
+article {
+
+  > h3 {
+    margin-bottom: 0;
+    margin-top: 4em;
+  }
+
+  section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1rem;
+  }
+
+  > div > div {
+    position: sticky;
+    top: 1.5em;
+    margin-bottom: 1.5em;
+  }
+}
+
+[data-area] {
+  cursor: default;
+}
+
+// We want to show these styles only if we're aware
+// that the browser has successfully executed the script.
+body.js {
+
+  [data-trigger] {
+    text-decoration-line: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: #7c203a;
+    cursor: help;
+  }
+
+  [data-trigger].active,
+  [data-area].active {
+    background-color: #feff89;
+    color: #7c203a;
+  }
+}