Rewrite website

Author: wooorm

.gitignore

@@ -1,5 +1,7 @@
 .DS_Store
 *.log
-node_modules/
 build/
+data/
+node_modules/
+.env
 yarn.lock

.remarkignore

@@ -0,0 +1,2 @@
+build/
+data/

script/natural-language/preset.js .remarkrc.js

@@ -1,11 +1,10 @@
-'use strict'
-
 var fs = require('fs')
 var strip = require('strip-comments')
+var unified = require('unified')
 
 var personal = strip(fs.readFileSync('dictionary.txt', 'utf8'))
 
-exports.plugins = [
+var naturalLanguage = unified().use([
   require('retext-english'),
   require('retext-preset-wooorm'),
   require('retext-equality'),
@@ -18,4 +17,15 @@ exports.plugins = [
     require('retext-spell'),
     {dictionary: require('dictionary-en-gb'), personal: personal}
   ]
+])
+
+exports.plugins = [
+  require('remark-preset-wooorm'),
+  require('remark-frontmatter'),
+  [require('remark-retext'), naturalLanguage],
+  [require('remark-validate-links'), false],
+  [require('remark-lint-no-dead-urls'), 'https://unifiedjs.com'],
+  [require('remark-lint-first-heading-level'), 2],
+  [require('remark-lint-no-html'), false],
+  [require('remark-toc'), {heading: 'contents', maxDepth: 3, tight: true}]
 ]

.stylelintignore

@@ -0,0 +1 @@
+build/

.travis.yml

@@ -5,7 +5,7 @@ deploy:
   local_dir: build
   target_branch: master
   skip_cleanup: true
-  github_token: $GITHUB_TOKEN
+  github_token: $GH_TOKEN
   email: [email protected]
   name: Titus Wormer
   on:

asset/big.css

@@ -0,0 +1,110 @@
+.cards > *,
+.boxes > * {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.cards > * {
+  width: calc(11.333 * (1em + 1ex));
+}
+
+.boxes > * {
+  width: calc(12.333 * (1em + 1ex));
+}
+
+@media (min-width: 48.01em) {
+  .readme {
+    padding-left: calc(1em + 1ex);
+    padding-right: calc(1em + 1ex);
+  }
+
+  .landing .article {
+    padding: calc(6 * (1em + 1ex) / 1.125) calc(3 * (1em + 1ex) / 1.125);
+  }
+
+  .article {
+    font-size: 1.125em;
+    padding-left: calc(3 * (1em + 1ex) / 1.125);
+    padding-right: calc(3 * (1em + 1ex) / 1.125);
+  }
+
+  .x-hide-l {
+    display: none;
+  }
+
+  .ellipsis-l {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .column-l,
+  .row-l {
+    display: flex;
+  }
+
+  .row-l {
+    margin-left: calc(-0.25 * (1em + 1ex));
+    margin-right: calc(-0.25 * (1em + 1ex));
+  }
+
+  .column-l {
+    margin-top: calc(-0.25 * (1em + 1ex));
+    margin-bottom: calc(-0.25 * (1em + 1ex));
+    flex-direction: column;
+  }
+
+  .row-l > * {
+    margin-left: calc(0.25 * (1em + 1ex));
+    margin-right: calc(0.25 * (1em + 1ex));
+  }
+
+  .column-l > * {
+    margin-top: calc(0.25 * (1em + 1ex));
+    margin-bottom: calc(0.25 * (1em + 1ex));
+  }
+
+  .row-l > .row,
+  .row-l > .row-l {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .justify-end-l {
+    justify-content: flex-end;
+  }
+
+  .anchor {
+    margin-left: calc(-1 * (1em + 1ex));
+    margin-right: 0;
+  }
+
+  .content pre {
+    border-radius: 3px;
+  }
+
+  .content blockquote,
+  .content ol,
+  .content ul {
+    margin-left: calc(-1 * (1em + 1ex));
+  }
+
+  .content ol blockquote,
+  .content ul blockquote,
+  .content blockquote blockquote,
+  .content ol ol,
+  .content ul ol,
+  .content blockquote ol,
+  .content ol ul,
+  .content ul ul,
+  .content blockquote ul {
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 62.01em) {
+  .readme {
+    padding-left: 0;
+    padding-right: 0;
+  }
+}

asset/dark.css

@@ -0,0 +1,160 @@
+:root {
+  --hl: var(--blue-3-83);
+}
+
+body {
+  background-color: var(--gray-9);
+  color: var(--gray-2);
+}
+
+.content .mdx:hover,
+.content .mdx:focus {
+  color: #f9ac00;
+}
+
+.mdx .hl,
+.content .mdx:hover .hl,
+.content .mdx:focus .hl {
+  color: var(--gray-2);
+}
+
+.box {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: black;
+}
+
+.thumbnail {
+  box-shadow: 0 0 0 0.2em var(--gray-9);
+}
+
+.card {
+  background-color: rgba(0, 0, 0, 0.2);
+  box-shadow:
+    0 0 0 0.2em rgba(46, 143, 255, 0),
+    0 13px 27px -5px rgba(0, 0, 43, 0.25),
+    0 8px 16px -8px rgba(0, 0, 0, 0.3),
+    0 -6px 16px -6px rgba(0, 0, 0, 0.025);
+}
+
+.card:hover {
+  box-shadow:
+    0 0 0 0.2em rgba(46, 143, 255, 0),
+    0 30px 60px -12px rgba(0, 0, 43, 0.25),
+    0 18px 36px -18px rgba(0, 0, 0, 0.3),
+    0 -12px 36px -8px rgba(0, 0, 0, 0.025);
+}
+
+.more {
+  border-color: black;
+}
+
+.tag {
+  color: var(--blue-3);
+  background-color: var(--blue-7);
+}
+
+.count {
+  background-color: var(--blue-3);
+  color: var(--blue-7);
+}
+
+a.tag:hover,
+a.tag:focus {
+  color: var(--gray-2);
+}
+
+a.tag:hover .count,
+a.tag:focus .count {
+  background-color: var(--gray-2);
+}
+
+.search button,
+.search input {
+  color: var(--gray-0);
+  border-color: black;
+}
+
+.search input {
+  background-color: var(--gray-8);
+}
+
+.search button {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.search input:hover,
+.search input:focus,
+.search button:hover,
+.search button:focus,
+.search button:active {
+  border-color: var(--hl);
+}
+
+.search button:active {
+  background-color: var(--hl);
+  color: var(--gray-0);
+}
+
+.card:focus {
+  /* --blue-3-83 */
+  box-shadow:
+    0 0 0 0.2em rgb(46, 143, 255),
+    0 30px 60px -12px rgba(0, 0, 43, 0.25),
+    0 18px 36px -18px rgba(0, 0, 0, 0.3),
+    0 -12px 36px -8px rgba(0, 0, 0, 0.025);
+}
+
+.content h1,
+.content h2 {
+  border-bottom-color: var(--gray-7);
+}
+
+.content kbd {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: var(--gray-8);
+  box-shadow: inset 0 -1px 0 black;
+  color: var(--gray-2);
+}
+
+.content pre {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.content code {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.content hr {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.content tr {
+  background-color: var(--gray-9);
+  border-top-color: var(--gray-6);
+}
+
+.content tr:nth-child(2n) {
+  background-color: var(--gray-8);
+}
+
+.content td,
+.content th {
+  border-color: var(--gray-6);
+}
+
+.content blockquote {
+  color: var(--gray-4);
+}
+
+.content blockquote::before {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+.content abbr.first {
+  border-bottom-color: var(--gray-6);
+}
+
+/* Not enough contrast */
+.hljs-comment {
+  color: var(--gray-4);
+}