feat: update darkmode support

2020-05-18 00:49:59 +08:00 · 2020-05-18 00:49:59 +08:00 · a0367d5a66
commit a0367d5a66
parent 150d657a8e
14 changed files with 1456 additions and 504 deletions
--- a/_site/heti.css
+++ b/_site/heti.css
@ -111,8 +111,12 @@
  background-color: rgba(0, 0, 0, 0.054);
 }

+[data-darkmode="dark"] .heti blockquote {
+  background-color: rgba(255, 255, 255, 0.054);
+}
+
@media (prefers-color-scheme: dark) {
-  .heti blockquote {
+  [data-darkmode="auto"] .heti blockquote {
    background-color: rgba(255, 255, 255, 0.054);
  }
 }
@ -139,8 +143,12 @@
  background-color: #cccccc;
 }

+[data-darkmode="dark"] .heti hr {
+  background-color: #404040;
+}
+
@media (prefers-color-scheme: dark) {
-  .heti hr {
+  [data-darkmode="auto"] .heti hr {
    background-color: #404040;
  }
 }
@ -172,8 +180,12 @@
  background-color: rgba(0, 0, 0, 0.054);
 }

+[data-darkmode="dark"] .heti pre {
+  background-color: rgba(255, 255, 255, 0.054);
+}
+
@media (prefers-color-scheme: dark) {
-  .heti pre {
+  [data-darkmode="auto"] .heti pre {
    background-color: rgba(255, 255, 255, 0.054);
  }
 }
@ -311,8 +323,12 @@
  word-break: break-word;
 }

+[data-darkmode="dark"] .heti table {
+  border-color: #404040;
+}
+
@media (prefers-color-scheme: dark) {
-  .heti table {
+  [data-darkmode="auto"] .heti table {
    border-color: #404040;
  }
 }
@ -328,8 +344,13 @@
  border-color: #cccccc;
 }

+[data-darkmode="dark"] .heti th, [data-darkmode="dark"]
+.heti td {
+  border-color: #404040;
+}
+
@media (prefers-color-scheme: dark) {
-  .heti th,
+  [data-darkmode="auto"] .heti th, [data-darkmode="auto"]
  .heti td {
    border-color: #404040;
  }
@ -413,8 +434,12 @@
  color: inherit;
 }

+[data-darkmode="dark"] .heti mark {
+  background-color: rgba(77, 74, 0, 0.88);
+}
+
@media (prefers-color-scheme: dark) {
-  .heti mark {
+  [data-darkmode="auto"] .heti mark {
    background-color: rgba(77, 74, 0, 0.88);
  }
 }
@ -466,8 +491,13 @@
  background-color: #dbedff;
 }

+[data-darkmode="dark"] .heti sup:target, [data-darkmode="dark"]
+.heti sup a:target {
+  background-color: #3a6188;
+}
+
@media (prefers-color-scheme: dark) {
-  .heti sup:target,
+  [data-darkmode="auto"] .heti sup:target, [data-darkmode="auto"]
  .heti sup a:target {
    background-color: #3a6188;
  }
@ -491,8 +521,12 @@
  border-block-end-color: rgba(0, 0, 0, 0.54);
 }

+[data-darkmode="dark"] .heti u[title] {
+  border-block-end-color: rgba(255, 255, 255, 0.54);
+}
+
@media (prefers-color-scheme: dark) {
-  .heti u[title] {
+  [data-darkmode="auto"] .heti u[title] {
    border-block-end-color: rgba(255, 255, 255, 0.54);
  }
 }
@ -807,8 +841,12 @@
  line-height: 24px;
 }

+[data-darkmode="dark"] .heti .heti-fn {
+  border-block-start-color: #404040;
+}
+
@media (prefers-color-scheme: dark) {
-  .heti .heti-fn {
+  [data-darkmode="auto"] .heti .heti-fn {
    border-block-start-color: #404040;
  }
 }
@ -822,8 +860,12 @@
  background-color: #dbedff;
 }

+[data-darkmode="dark"] .heti .heti-fn li:target {
+  background-color: #3a6188;
+}
+
@media (prefers-color-scheme: dark) {
-  .heti .heti-fn li:target {
+  [data-darkmode="auto"] .heti .heti-fn li:target {
    background-color: #3a6188;
  }
 }
--- a/_site/index.css
+++ b/_site/index.css
--- a/_site/index.html
+++ b/_site/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh-Hans">
+<html lang="zh-Hans" data-darkmode="auto">
 <head>
  <meta charset="UTF-8">
  <title>赫蹏 - 一个简约又简单的网页中文排版增强</title>
@ -74,14 +74,15 @@
        </li>
        <li>
          在要作用的容器元素上增加<code>class="heti"</code>的类名即可：
+
          <pre><code>&lt;article class=&quot;entry <ins>heti</ins>&quot;&gt;
  &lt;h1&gt;我的世界观&lt;/h1&gt;
  &lt;p&gt;有钱人的生活就是这么朴实无华，且枯燥&lt;/p&gt;
  ……
 &lt;/article&gt;</code></pre>
        </li>
-        <li>注意：赫蹏是正文区域的样式增强，不是<i>normalize.css</i>或<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code>&lt;body&gt;</code>或<code>&lt;div class=&quot;container&quot;&gt;</code>）上，除非像本页面一样通篇都是文章的一部分。</li>
      </ol>
+      <small>注：赫蹏是正文区域的样式增强，不是<i>normalize.css</i>或<i>CSS Reset</i>的替代。因此<b>不建议</b>将它作用在根标签（如<code>&lt;body&gt;</code>或<code>&lt;div class=&quot;container&quot;&gt;</code>）上。</small>

      <hr>

@ -511,41 +512,6 @@
                <blockquote style="margin-inline-start: 0; margin-inline-end: 0;">古代称用以书写的小幅绢帛。后亦以借指纸<mark>。《</mark>汉书·外戚传下·孝成赵皇后<mark>》：「</mark>武（籍武 ）发篋中，有裹药二枚，赫蹏书。」<u>颜师古</u>注：「<u>邓展</u>曰：『赫音兄弟鬩墙之鬩。』<u>应劭</u>曰：『赫蹏，薄小纸也。』」<u>宋</u><u>赵彦卫</u> 《云麓漫钞》卷七：「《赵后传》所谓『赫蹏』者，注云『薄小纸』，然其寔亦縑帛。」</blockquote>
              </td>
            </tr>
-            <!--
-            <tr>
-              <th colspan="4">标点挤压</th>
-            </tr>
-            <tr>
-              <th>默认文本</th>
-              <td>
-                <ul class="heti-skip">
-                  <li>结束。」</li>
-                  <li>结束」，</li>
-                  <li>开始。「</li>
-                  <li>连接」「</li>
-                  <li>连续「『</li>
-                  <li>连续』」</li>
-                  <li>间隔号」·</li>
-                  <li>间隔号·「</li>
-                  <li>不改「」</li>
-                </ul>
-              </td>
-              <th>脚本效果</th>
-              <td>
-                <ul>
-                  <li>结束。」</li>
-                  <li>结束」，</li>
-                  <li>开始。「</li>
-                  <li>连接」「</li>
-                  <li>连续「『</li>
-                  <li>连续』」</li>
-                  <li>间隔号」·</li>
-                  <li>间隔号·「</li>
-                  <li>不改「」</li>
-                </ul>
-              </td>
-            </tr>
-            -->
          </table>
        </section>
      </details>
@ -583,11 +549,17 @@
      <li><input type="radio" class="J_radioGrid" value="grid-24" name="grid" id="grid-24"><label for="grid-24">大</label></li>
      <li><input type="radio" class="J_radioGrid" value="grid-12" name="grid" id="grid-12"><label for="grid-12">小</label></li>
    </ul>
+    <ul class="panel-list panel-list--gray panel-list--icon">
+      <li><input type="radio" class="J_darkMode" value="auto" name="darkmode" id="darkmode-auto" checked><label for="darkmode-auto">🌗</label></li>
+      <li><input type="radio" class="J_darkMode" value="light" name="darkmode" id="darkmode-light"><label for="darkmode-light">🌞</label></li>
+      <li><input type="radio" class="J_darkMode" value="dark" name="darkmode" id="darkmode-dark"><label for="darkmode-dark">🌙</label></li>
+    </ul>
  </aside>

  <script src="./heti-addon.js"></script>
  <script>
-    const $$root = document.getElementsByTagName('main')[0]
+    const $$root = document.getElementsByTagName('html')[0]
+    const $$main = document.getElementsByTagName('main')[0]
    const $$article = document.getElementsByTagName('article')[0]

    function addEventListeners(nodeList, event, fn) {
@ -596,8 +568,12 @@
      }, false)
    }

+    addEventListeners(document.getElementsByClassName('J_darkMode'), 'change', function (e) {
+      $$root.setAttribute('data-darkmode', e.target.value)
+    })
+
    addEventListeners(document.getElementsByClassName('J_radioGrid'), 'change', function (e) {
-      $$root.setAttribute('data-bg-grid', e.target.value)
+      $$main.setAttribute('data-bg-grid', e.target.value)
    })

    addEventListeners(document.getElementsByClassName('J_fontStack'), 'change', function (e) {
--- a/_site/scss/components/_grid-container.scss
+++ b/_site/scss/components/_grid-container.scss
@ -1,6 +1,5 @@
 // Author: Sivan [sun.sivan@gmail.com]
 // Description: grid container.
-
 $grid-sizes: (
  "12": 12px,
  "24": 24px
@ -20,6 +19,26 @@ $padding-desktop: 48px;
  background-image: linear-gradient(to left, transparent ($grid-width - 1px), $grid-color 1px);
 }

+@mixin darkmode-mobile {
+  @each $size, $width in $grid-sizes {
+    &[data-bg-grid="grid-#{$size}"] {
+      @include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
+
+      .heti--vertical {
+        @include grid-image-vertical($width, hsl(0, 0%, 20%));
+      }
+    }
+  }
+}
+
+@mixin darkmode-desktop {
+  @each $size, $width in $grid-sizes {
+    &[data-bg-grid="grid-#{$size}"] {
+      @include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
+    }
+  }
+}
+
 .container {
  @each $size, $width in $grid-sizes {
    &[data-bg-grid="grid-#{$size}"] {
@ -35,15 +54,13 @@ $padding-desktop: 48px;
    }
  }

-  @media (prefers-color-scheme: dark) {
-    @each $size, $width in $grid-sizes {
-      &[data-bg-grid="grid-#{$size}"] {
-        @include grid-image-horizontal($width, $padding-mobile, hsl(0, 0%, 20%));
+  [data-darkmode="dark"] & {
+    @include darkmode-mobile;
+  }

-        .heti--vertical {
-          @include grid-image-vertical($width, hsl(0, 0%, 20%));
-        }
-      }
+  @media (prefers-color-scheme: dark) {
+    [data-darkmode="auto"] & {
+      @include darkmode-mobile;
    }
  }

@ -55,11 +72,13 @@ $padding-desktop: 48px;
      }
    }

+    [data-darkmode="dark"] & {
+      @include darkmode-desktop;
+    }
+
    @media (prefers-color-scheme: dark) {
-      @each $size, $width in $grid-sizes {
-        &[data-bg-grid="grid-#{$size}"] {
-          @include grid-image-horizontal($width, $padding-desktop, hsl(0, 0%, 20%), hsla(360, 100%, 65%, 0.4));
-        }
+      [data-darkmode="auto"] & {
+        @include darkmode-desktop;
      }
    }
  }
--- a/_site/scss/components/_panel-list.scss
+++ b/_site/scss/components/_panel-list.scss
@ -1,7 +1,6 @@
 // Author: Sivan [sun.sivan@gmail.com]
 // Description: panel list.
-
-.panel-list {
+@mixin lightmode {
  --bg-color: hsl(240, 100%, 100%);
  --bg-tap-color: hsl(300, 3%, 94%);
  --border-color: hsla(0, 0%, 76%, 0.88);
@ -53,66 +52,80 @@
    --border-block-end-highlight-tap-color: hsl(228, 4%, 26%);
    --text-highlight-color: hsl(0, 0%, 92%);
  }
+}

-  @media (prefers-color-scheme: dark) {
-    --bg-color: hsl(225, 2%, 40%);
-    --bg-tap-color: hsl(210, 2%, 49%);
-    --border-color: hsla(210, 2%, 33%, 0.88);
-    --border-inline-start-color: hsl(210, 2%, 33%);
-    --border-inline-end-color: hsl(210, 2%, 33%);
-    --border-block-start-color: hsl(225, 2%, 45%);
-    --border-block-end-color: hsl(210, 2%, 40%);
+@mixin darkmode {
+  --bg-color: hsl(225, 2%, 40%);
+  --bg-tap-color: hsl(210, 2%, 49%);
+  --border-color: hsla(210, 2%, 33%, 0.88);
+  --border-inline-start-color: hsl(210, 2%, 33%);
+  --border-inline-end-color: hsl(210, 2%, 33%);
+  --border-block-start-color: hsl(225, 2%, 45%);
+  --border-block-end-color: hsl(210, 2%, 40%);
+  --text-color: hsl(0, 0%, 91%);
+  --box-shadow-color: hsla(225, 4%, 21%, 0.54);
+  --bg-highlight-color-start: hsl(216, 77%, 49%);
+  --bg-highlight-color-end: hsl(216, 76%, 45%);
+  --bg-highlight-tap-color-start: hsl(214, 83%, 55%);
+  --bg-highlight-tap-color-end: hsl(215, 74%, 51%);
+  --border-highlight-color: hsla(215, 77%, 47%, 0.88);
+  --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
+  --border-inline-start-highlight-color: hsl(215, 77%, 47%);
+  --border-inline-end-highlight-color: hsl(215, 77%, 47%);
+  --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
+  --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
+  --border-block-start-highlight-color: hsl(216, 76%, 55%);
+  --border-block-end-highlight-color: hsl(216, 76%, 44%);
+  --border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
+  --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
+  --text-highlight-color: hsl(0, 0%, 100%);
+
+  &--gray {
+    --bg-color: hsl(0, 0%, 40%);
+    --bg-tap-color: hsl(0, 0%, 49%);
+    --border-color: hsla(120, 1%, 34%, 0.88);
+    --border-inline-start-color: hsl(0, 0%, 40%);
+    --border-inline-end-color: hsl(360, 0%, 40%);
+    --border-block-start-color: hsl(0, 0%, 46%);
+    --border-block-end-color: hsl(120, 0%, 40%);
    --text-color: hsl(0, 0%, 91%);
-    --box-shadow-color: hsla(225, 4%, 21%, 0.54);
-    --bg-highlight-color-start: hsl(216, 77%, 49%);
-    --bg-highlight-color-end: hsl(216, 76%, 45%);
-    --bg-highlight-tap-color-start: hsl(214, 83%, 55%);
-    --bg-highlight-tap-color-end: hsl(215, 74%, 51%);
-    --border-highlight-color: hsla(215, 77%, 47%, 0.88);
-    --border-highlight-tap-color: hsla(215, 79%, 54%, 0.88);
-    --border-inline-start-highlight-color: hsl(215, 77%, 47%);
-    --border-inline-end-highlight-color: hsl(215, 77%, 47%);
-    --border-inline-start-highlight-tap-color: hsl(215, 79%, 54%);
-    --border-inline-end-highlight-tap-color: hsl(215, 79%, 54%);
-    --border-block-start-highlight-color: hsl(216, 76%, 55%);
-    --border-block-end-highlight-color: hsl(216, 76%, 44%);
-    --border-block-start-highlight-tap-color: hsl(215, 84%, 60%);
-    --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
-    --text-highlight-color: hsl(0, 0%, 100%);
-
-    &--gray {
-      --bg-color: hsl(0, 0%, 40%);
-      --bg-tap-color: hsl(0, 0%, 49%);
-      --border-color: hsla(120, 1%, 34%, 0.88);
-      --border-inline-start-color: hsl(0, 0%, 40%);
-      --border-inline-end-color: hsl(360, 0%, 40%);
-      --border-block-start-color: hsl(0, 0%, 46%);
-      --border-block-end-color: hsl(120, 0%, 40%);
-      --text-color: hsl(0, 0%, 91%);
-      --box-shadow-color: hsla(0, 0%, 17%, 0.54);
-      --bg-highlight-color-start: hsl(0, 0%, 60%);
-      --bg-highlight-color-end: hsl(0, 0%, 60%);
-      --bg-highlight-tap-color-start: hsl(0, 0%, 69%);
-      --bg-highlight-tap-color-end: hsl(0, 0%, 69%);
-      --border-highlight-color: hsla(0, 0%, 60%, 0.88);
-      --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
-      --border-inline-start-highlight-color: hsl(0, 0%, 60%);
-      --border-inline-end-highlight-color: hsl(0, 0%, 60%);
-      --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
-      --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
-      --border-block-start-highlight-color: hsl(0, 0%, 64%);
-      --border-block-end-highlight-color: hsl(0, 0%, 60%);
-      --border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
-      --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
-      --text-highlight-color: hsl(0, 0%, 15%);
-    }
+    --box-shadow-color: hsla(0, 0%, 17%, 0.54);
+    --bg-highlight-color-start: hsl(0, 0%, 60%);
+    --bg-highlight-color-end: hsl(0, 0%, 60%);
+    --bg-highlight-tap-color-start: hsl(0, 0%, 69%);
+    --bg-highlight-tap-color-end: hsl(0, 0%, 69%);
+    --border-highlight-color: hsla(0, 0%, 60%, 0.88);
+    --border-highlight-tap-color: hsla(0, 0%, 69%, 0.88);
+    --border-inline-start-highlight-color: hsl(0, 0%, 60%);
+    --border-inline-end-highlight-color: hsl(0, 0%, 60%);
+    --border-inline-start-highlight-tap-color: hsl(0, 0%, 69%);
+    --border-inline-end-highlight-tap-color: hsl(0, 0%, 69%);
+    --border-block-start-highlight-color: hsl(0, 0%, 64%);
+    --border-block-end-highlight-color: hsl(0, 0%, 60%);
+    --border-block-start-highlight-tap-color: hsl(0, 0%, 73%);
+    --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
+    --text-highlight-color: hsl(0, 0%, 15%);
  }
+}

+.panel-list {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style-type: none;

+  @include lightmode;
+
+  [data-darkmode="dark"] & {
+    @include darkmode;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    [data-darkmode="auto"] & {
+      @include darkmode;
+    }
+  }
+
  & + & {
    margin-inline-start: 12px;
  }
@ -177,4 +190,12 @@
      }
    }
  }
+
+  &--icon {
+    label {
+      width: 30px;
+      padding-inline-start: 8px;
+      padding-inline-end: 8px;
+    }
+  }
 }
--- a/_site/scss/heti.scss
+++ b/_site/scss/heti.scss
@ -0,0 +1,3 @@
+$darkmode: 'manual';
+
+@import "../../lib/heti";
--- a/_site/scss/index.scss
+++ b/_site/scss/index.scss
@ -127,7 +127,7 @@ a {
  }
 }

-@media (prefers-color-scheme: dark) {
+@mixin darkmode() {
  body {
    background-color: hsl(0, 0%, 24%);
  }
@ -151,3 +151,14 @@ a {
    }
  }
 }
+
+// Force dark mode
+[data-darkmode="dark"] {
+  @include darkmode();
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-darkmode="auto"] {
+    @include darkmode();
+  }
+}
--- a/lib/_base.scss
+++ b/lib/_base.scss
@ -32,7 +32,7 @@
    //border-radius: 4px;
    background-color: hsla(0, 0%, 0%, 0.054);

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      background-color: hsla(0, 0%, 100%, 0.054);
    }
  }
@ -58,7 +58,7 @@
    border: 0;
    background-color: hsl(0, 0%, 80%);

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      background-color: hsl(0, 0%, 25%);
    }
  }
@ -89,7 +89,7 @@
    border-radius: 4px;
    background-color: hsla(0, 0%, 0%, 0.054);

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      background-color: hsla(0, 0%, 100%, 0.054);
    }

--- a/lib/_inline.scss
+++ b/lib/_inline.scss
@ -75,7 +75,7 @@
    background-color: hsla(58, 100%, 50%, 0.88);
    color: inherit;

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      background-color: hsla(58, 100%, 15%, 0.88);
    }
  }
@ -132,7 +132,7 @@
    a:target {
      background-color: hsl(210, 100%, 93%);

-      @media (prefers-color-scheme: dark) {
+      @include darkmode-style {
        background-color: hsl(210, 40%, 38%);
      }
    }
@ -155,7 +155,7 @@
    border-block-end-style: double;
    border-block-end-color: hsla(0, 0%, 0%, 0.54);

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      border-block-end-color: hsla(0, 0%, 100%, 0.54);
    }
  }
--- a/lib/_table.scss
+++ b/lib/_table.scss
@ -16,7 +16,7 @@
    border-color: hsl(0, 0%, 80%);
    word-break: break-word;

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      border-color: hsl(0, 0%, 25%);
    }
  }
@ -31,7 +31,7 @@
    border-style: solid;
    border-color: hsl(0, 0%, 80%);

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      border-color: hsl(0, 0%, 25%);
    }
  }
--- a/lib/_variables.scss
+++ b/lib/_variables.scss
@ -3,6 +3,9 @@

 // 定义赫蹏根 class 名
 $root-selector: '.heti' !default;
+$darkmode: true !default; // true | false | 'manual'
+$manualmode-auto-selector: '[data-darkmode="auto"] &' !default;
+$manualmode-dark-selector: '[data-darkmode="dark"] &' !default;

 // 字体 Fonts
 // 字体栈 Font Stacks
@ -114,6 +117,25 @@ $_css-reset-scheme: "reset";
  text-indent: 0;
 }

+@mixin darkmode-style($darkmode: $darkmode, $dark-selector: $manualmode-dark-selector, $auto-selector: $manualmode-auto-selector) {
+  // 'manual' darkmode should provide darkmode selector and auto-darkmode selector
+  @if $darkmode == 'manual' {
+    #{$dark-selector} {
+      @content;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      #{$auto-selector} {
+        @content;
+      }
+    }
+  } @else if $darkmode {
+    @media (prefers-color-scheme: dark) {
+      @content;
+    }
+  }
+}
+
 // 函数 Functions
 // Function: batch prefix/suffix list-item
 // batch-fix-list((2, 3), '#{$root-selector}--columns-') => (.heti--columns-2, .heti--columns-3)
--- a/lib/helpers/_block.scss
+++ b/lib/helpers/_block.scss
@ -76,7 +76,7 @@
    font-family: $font-family-hei;
    line-height: $line-height-size-normal;

-    @media (prefers-color-scheme: dark) {
+    @include darkmode-style {
      border-block-start-color: hsl(0, 0%, 25%);
    }

@ -89,7 +89,7 @@
      &:target {
        background-color: hsl(210, 100%, 93%);

-        @media (prefers-color-scheme: dark) {
+        @include darkmode-style {
          background-color: hsl(210, 40%, 38%);
        }
      }
--- a/package-lock.json
+++ b/package-lock.json
@ -1,6 +1,6 @@
 {
  "name": "heti",
-  "version": "0.6.0",
+  "version": "0.8.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@ -223,15 +223,6 @@
      "integrity": "sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==",
      "dev": true
    },
-    "@babel/runtime": {
-      "version": "7.9.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.9.6.tgz",
-      "integrity": "sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==",
-      "dev": true,
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
    "@babel/template": {
      "version": "7.8.6",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.8.6.tgz",
@ -477,9 +468,9 @@
      "dev": true
    },
    "arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
+      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
      "dev": true
    },
    "asn1": {
@ -516,18 +507,18 @@
      "dev": true
    },
    "autoprefixer": {
-      "version": "9.7.6",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.7.6.tgz",
-      "integrity": "sha512-F7cYpbN7uVVhACZTeeIeealwdGM6wMtfWARVLTy5xmKtgVdBNJvbDRoCK3YO1orcs7gv/KwYlb3iXwu9Ug9BkQ==",
+      "version": "9.8.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.8.0.tgz",
+      "integrity": "sha512-D96ZiIHXbDmU02dBaemyAg53ez+6F5yZmapmgKcjm35yEe1uVDYI8hGW3VYoGRaG290ZFf91YxHrR518vC0u/A==",
      "dev": true,
      "requires": {
-        "browserslist": "^4.11.1",
-        "caniuse-lite": "^1.0.30001039",
+        "browserslist": "^4.12.0",
+        "caniuse-lite": "^1.0.30001061",
        "chalk": "^2.4.2",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
-        "postcss": "^7.0.27",
-        "postcss-value-parser": "^4.0.3"
+        "postcss": "^7.0.30",
+        "postcss-value-parser": "^4.1.0"
      },
      "dependencies": {
        "ansi-styles": {
@ -669,9 +660,9 @@
      }
    },
    "caniuse-lite": {
-      "version": "1.0.30001048",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz",
-      "integrity": "sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==",
+      "version": "1.0.30001061",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001061.tgz",
+      "integrity": "sha512-SMICCeiNvMZnyXpuoO+ot7FHpMVPlrsR+HmfByj6nY4xYDHXLqMTbgH7ecEkDNXWkH1vaip+ZS0D7VTXwM1KYQ==",
      "dev": true
    },
    "caseless": {
@ -724,14 +715,48 @@
      "dev": true
    },
    "cliui": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
-      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
      "dev": true,
      "requires": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wrap-ansi": "^2.0.0"
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
      }
    },
    "clone-regexp": {
@ -956,9 +981,9 @@
          "dev": true
        },
        "entities": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.0.tgz",
-          "integrity": "sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==",
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.2.tgz",
+          "integrity": "sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==",
          "dev": true
        }
      }
@ -999,15 +1024,15 @@
      }
    },
    "electron-to-chromium": {
-      "version": "1.3.427",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.427.tgz",
-      "integrity": "sha512-/rG5G7Opcw68/Yrb4qYkz07h3bESVRJjUl4X/FrKLXzoUJleKm6D7K7rTTz8V5LUWnd+BbTOyxJX2XprRqHD8A==",
+      "version": "1.3.441",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.441.tgz",
+      "integrity": "sha512-leBfJwLuyGs1jEei2QioI+PjVMavmUIvPYidE8dCCYWLAq0uefhN3NYgDNb8WxD3uiUNnJ3ScMXg0upSlwySzQ==",
      "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==",
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
      "dev": true
    },
    "entities": {
@ -1085,9 +1110,9 @@
      "dev": true
    },
    "fastq": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.7.0.tgz",
-      "integrity": "sha512-YOadQRnHd5q6PogvAR/x62BGituF2ufiEA6s8aavQANw5YKHERI4AREboX6KotzP8oX2klxYF2wcV/7bn1clfQ==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
+      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
      "dev": true,
      "requires": {
        "reusify": "^1.0.4"
@ -1216,9 +1241,9 @@
      "dev": true
    },
    "get-caller-file": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
-      "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
      "dev": true
    },
    "get-stdin": {
@ -1508,12 +1533,6 @@
      "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
      "dev": true
    },
-    "invert-kv": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
-      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY=",
-      "dev": true
-    },
    "is-alphabetical": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz",
@ -1762,20 +1781,11 @@
      "dev": true
    },
    "known-css-properties": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.18.0.tgz",
-      "integrity": "sha512-69AgJ1rQa7VvUsd2kpvVq+VeObDuo3zrj0CzM5Slmf6yduQFAI2kXPDQJR2IE/u6MSAUOJrwSzjg5vlz8qcMiw==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.19.0.tgz",
+      "integrity": "sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==",
      "dev": true
    },
-    "lcid": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
-      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
-      "dev": true,
-      "requires": {
-        "invert-kv": "^1.0.0"
-      }
-    },
    "leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -1802,12 +1812,12 @@
      }
    },
    "locate-path": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
-      "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
      "dev": true,
      "requires": {
-        "p-locate": "^2.0.0",
+        "p-locate": "^3.0.0",
        "path-exists": "^3.0.0"
      },
      "dependencies": {
@ -1826,41 +1836,62 @@
      "dev": true
    },
    "log-symbols": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-3.0.0.tgz",
-      "integrity": "sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-4.0.0.tgz",
+      "integrity": "sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==",
      "dev": true,
      "requires": {
-        "chalk": "^2.4.2"
+        "chalk": "^4.0.0"
      },
      "dependencies": {
        "ansi-styles": {
-          "version": "3.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
-          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "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": {
-            "color-convert": "^1.9.0"
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-          "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.0.0.tgz",
+          "integrity": "sha512-N9oWFcegS0sFr9oh1oz2d7Npos6vNoWW9HvtCg5N1KRFpUhaAhvTv5Y58g880fZaEYSNm3qDz8SU1UrGvp+n7A==",
          "dev": true,
          "requires": {
-            "ansi-styles": "^3.2.1",
-            "escape-string-regexp": "^1.0.5",
-            "supports-color": "^5.3.0"
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
          }
        },
-        "supports-color": {
-          "version": "5.5.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-          "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+        "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": {
-            "has-flag": "^3.0.0"
+            "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"
          }
        }
      }
@ -2013,15 +2044,22 @@
      "dev": true
    },
    "minimist-options": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.0.2.tgz",
-      "integrity": "sha512-seq4hpWkYSUh1y7NXxzucwAN9yVlBc3Upgdjz8vLCP97jG8kaOmzYrVH/m7tQ1NYD1wdtZbSLfdy4zFmRWuc/w==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
      "dev": true,
      "requires": {
        "arrify": "^1.0.1",
-        "is-plain-obj": "^1.1.0"
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
      },
      "dependencies": {
+        "arrify": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+          "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+          "dev": true
+        },
        "is-plain-obj": {
          "version": "1.1.0",
          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
@ -2080,15 +2118,15 @@
      }
    },
    "node-releases": {
-      "version": "1.1.53",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.53.tgz",
-      "integrity": "sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==",
+      "version": "1.1.55",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.55.tgz",
+      "integrity": "sha512-H3R3YR/8TjT5WPin/wOoHOUPHgvj8leuU/Keta/rwelEQN9pA/S2Dx8/se4pZ2LBxSd0nAGzsNzhqwa77v7F1w==",
      "dev": true
    },
    "node-sass": {
-      "version": "4.14.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.0.tgz",
-      "integrity": "sha512-AxqU+DFpk0lEz95sI6jO0hU0Rwyw7BXVEv6o9OItoXLyeygPeaSpiV4rwQb10JiTghHaa0gZeD21sz+OsQluaw==",
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.14.1.tgz",
+      "integrity": "sha512-sjCuOlvGyCJS40R8BscF5vhVlQjNN069NtQ1gSxyK1u9iqvn6tf7O1R4GNowVZfiZUCRt5MmMs1xd+4V/7Yr0g==",
      "dev": true,
      "requires": {
        "async-foreach": "^0.1.3",
@ -2105,7 +2143,7 @@
        "node-gyp": "^3.8.0",
        "npmlog": "^4.0.0",
        "request": "^2.88.0",
-        "sass-graph": "^2.2.4",
+        "sass-graph": "2.2.5",
        "stdout-stream": "^1.4.0",
        "true-case-path": "^1.0.2"
      }
@ -2194,15 +2232,6 @@
      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
      "dev": true
    },
-    "os-locale": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
-      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
-      "dev": true,
-      "requires": {
-        "lcid": "^1.0.0"
-      }
-    },
    "os-tmpdir": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
@ -2220,27 +2249,27 @@
      }
    },
    "p-limit": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
-      "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
      "dev": true,
      "requires": {
-        "p-try": "^1.0.0"
+        "p-try": "^2.0.0"
      }
    },
    "p-locate": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
-      "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz",
+      "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==",
      "dev": true,
      "requires": {
-        "p-limit": "^1.1.0"
+        "p-limit": "^2.0.0"
      }
    },
    "p-try": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
-      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
      "dev": true
    },
    "parent-module": {
@ -2357,13 +2386,53 @@
          "requires": {
            "locate-path": "^2.0.0"
          }
+        },
+        "locate-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz",
+          "integrity": "sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=",
+          "dev": true,
+          "requires": {
+            "p-locate": "^2.0.0",
+            "path-exists": "^3.0.0"
+          }
+        },
+        "p-limit": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.3.0.tgz",
+          "integrity": "sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==",
+          "dev": true,
+          "requires": {
+            "p-try": "^1.0.0"
+          }
+        },
+        "p-locate": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
+          "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
+          "dev": true,
+          "requires": {
+            "p-limit": "^1.1.0"
+          }
+        },
+        "p-try": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+          "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
+          "dev": true
+        },
+        "path-exists": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+          "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+          "dev": true
        }
      }
    },
    "postcss": {
-      "version": "7.0.28",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.28.tgz",
-      "integrity": "sha512-YU6nVhyWIsVtlNlnAj1fHTsUKW5qxm3KEgzq2Jj6KTEFOTK8QWR12eIDvrlWhiSTK8WIBFTBhOJV4DY6dUuEbw==",
+      "version": "7.0.30",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.30.tgz",
+      "integrity": "sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==",
      "dev": true,
      "requires": {
        "chalk": "^2.4.2",
@ -2521,12 +2590,12 @@
      }
    },
    "postcss-scss": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.0.0.tgz",
-      "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-scss/-/postcss-scss-2.1.0.tgz",
+      "integrity": "sha512-1AFpO7BcDH+F4HWyHmn/QAEbo6FsqsbwBHrIyfUcASp+m7GFWW9bbRgN4aajdD0KlU3s00oWggmJIejeoF3YqA==",
      "dev": true,
      "requires": {
-        "postcss": "^7.0.0"
+        "postcss": "^7.0.6"
      }
    },
    "postcss-selector-parser": {
@ -2634,12 +2703,6 @@
        "strip-indent": "^1.0.1"
      }
    },
-    "regenerator-runtime": {
-      "version": "0.13.5",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
-      "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
-      "dev": true
-    },
    "remark": {
      "version": "12.0.0",
      "resolved": "https://registry.npmjs.org/remark/-/remark-12.0.0.tgz",
@ -2753,9 +2816,9 @@
      "dev": true
    },
    "require-main-filename": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
-      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
      "dev": true
    },
    "resolve": {
@ -2848,15 +2911,15 @@
      "dev": true
    },
    "sass-graph": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
-      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.5.tgz",
+      "integrity": "sha512-VFWDAHOe6mRuT4mZRd4eKE+d8Uedrk6Xnh7Sh9b4NGufQLQjOrvf/MQoOdx+0s92L89FeyUUNfU597j/3uNpag==",
      "dev": true,
      "requires": {
        "glob": "^7.0.0",
        "lodash": "^4.0.0",
        "scss-tokenizer": "^0.2.3",
-        "yargs": "^7.0.0"
+        "yargs": "^13.3.2"
      }
    },
    "scss-tokenizer": {
@ -2977,9 +3040,9 @@
      "dev": true
    },
    "spdx-expression-parse": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
-      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
      "dev": true,
      "requires": {
        "spdx-exceptions": "^2.1.0",
@ -3051,9 +3114,9 @@
      }
    },
    "stringify-entities": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.0.0.tgz",
-      "integrity": "sha512-h7NJJIssprqlyjHT2eQt2W1F+MCcNmwPGlKb0bWEdET/3N44QN3QbUF/ueKCgAssyKRZ3Br9rQ7FcXjHr0qLHw==",
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.0.1.tgz",
+      "integrity": "sha512-Lsk3ISA2++eJYqBMPKcr/8eby1I6L0gP0NlxF8Zja6c05yr/yCYyb2c9PwXjd08Ib3If1vn1rbs1H5ZtVuOfvQ==",
      "dev": true,
      "requires": {
        "character-entities-html4": "^1.0.0",
@ -3097,9 +3160,9 @@
      "dev": true
    },
    "stylelint": {
-      "version": "13.3.3",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.3.3.tgz",
-      "integrity": "sha512-j8Oio2T1YNiJc6iXDaPYd74Jg4zOa1bByNm/g9/Nvnq4tDPsIjMi46jhRZyPPktGPwjJ5FwcmCqIRlH6PVP8mA==",
+      "version": "13.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.4.0.tgz",
+      "integrity": "sha512-VOAOkTil5GmUfEJH+O6LdsggoUt692QTSu+YfLhVP5sFTVCVp0+PS2oCjjG8ZdUAP9aNNNYxTP6GWVbB1tl2bg==",
      "dev": true,
      "requires": {
        "@stylelint/postcss-css-in-js": "^0.37.1",
@ -3111,7 +3174,7 @@
        "debug": "^4.1.1",
        "execall": "^2.0.0",
        "file-entry-cache": "^5.0.1",
-        "get-stdin": "^7.0.0",
+        "get-stdin": "^8.0.0",
        "global-modules": "^2.0.0",
        "globby": "^11.0.0",
        "globjoin": "^0.1.4",
@ -3119,15 +3182,15 @@
        "ignore": "^5.1.4",
        "import-lazy": "^4.0.0",
        "imurmurhash": "^0.1.4",
-        "known-css-properties": "^0.18.0",
+        "known-css-properties": "^0.19.0",
        "leven": "^3.1.0",
        "lodash": "^4.17.15",
-        "log-symbols": "^3.0.0",
+        "log-symbols": "^4.0.0",
        "mathml-tag-names": "^2.1.3",
-        "meow": "^6.1.0",
+        "meow": "^7.0.1",
        "micromatch": "^4.0.2",
        "normalize-selector": "^0.2.0",
-        "postcss": "^7.0.27",
+        "postcss": "^7.0.30",
        "postcss-html": "^0.36.0",
        "postcss-less": "^3.1.4",
        "postcss-media-query-parser": "^0.2.3",
@ -3138,7 +3201,7 @@
        "postcss-scss": "^2.0.0",
        "postcss-selector-parser": "^6.0.2",
        "postcss-syntax": "^0.36.2",
-        "postcss-value-parser": "^4.0.3",
+        "postcss-value-parser": "^4.1.0",
        "resolve-from": "^5.0.0",
        "slash": "^3.0.0",
        "specificity": "^0.4.1",
@ -3169,9 +3232,9 @@
          }
        },
        "camelcase": {
-          "version": "5.3.1",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.0.0.tgz",
+          "integrity": "sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==",
          "dev": true
        },
        "camelcase-keys": {
@ -3183,6 +3246,14 @@
            "camelcase": "^5.3.1",
            "map-obj": "^4.0.0",
            "quick-lru": "^4.0.1"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "5.3.1",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+              "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+              "dev": true
+            }
          }
        },
        "chalk": {
@ -3210,6 +3281,12 @@
          "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
+        },
        "find-up": {
          "version": "4.1.0",
          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@ -3221,9 +3298,9 @@
          }
        },
        "get-stdin": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-7.0.0.tgz",
-          "integrity": "sha512-zRKcywvrXlXsA0v0i9Io4KDRaAw7+a1ZpjRwl9Wox8PFlVCCHra7E9c4kqXCoCM9nR5tBkaTTZRBoCm60bFqTQ==",
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+          "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
          "dev": true
        },
        "has-flag": {
@ -3260,12 +3337,14 @@
          "dev": true
        },
        "meow": {
-          "version": "6.1.1",
-          "resolved": "https://registry.npmjs.org/meow/-/meow-6.1.1.tgz",
-          "integrity": "sha512-3YffViIt2QWgTy6Pale5QpopX/IvU3LPL03jOTqp6pGj3VjesdO/U8CuHMKpnQr4shCNCM5fd5XFFvIIl6JBHg==",
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/meow/-/meow-7.0.1.tgz",
+          "integrity": "sha512-tBKIQqVrAHqwit0vfuFPY3LlzJYkEOFyKa3bPgxzNl6q/RtN8KQ+ALYEASYuFayzSAsjlhXj/JZ10rH85Q6TUw==",
          "dev": true,
          "requires": {
            "@types/minimist": "^1.2.0",
+            "arrify": "^2.0.1",
+            "camelcase": "^6.0.0",
            "camelcase-keys": "^6.2.2",
            "decamelize-keys": "^1.1.0",
            "hard-rejection": "^2.1.0",
@ -3278,15 +3357,6 @@
            "yargs-parser": "^18.1.3"
          }
        },
-        "p-limit": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-          "dev": true,
-          "requires": {
-            "p-try": "^2.0.0"
-          }
-        },
        "p-locate": {
          "version": "4.1.0",
          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
@ -3296,12 +3366,6 @@
            "p-limit": "^2.2.0"
          }
        },
-        "p-try": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-          "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-          "dev": true
-        },
        "parse-json": {
          "version": "5.0.0",
          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz",
@ -3421,6 +3485,14 @@
          "requires": {
            "camelcase": "^5.0.0",
            "decamelize": "^1.2.0"
+          },
+          "dependencies": {
+            "camelcase": {
+              "version": "5.3.1",
+              "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+              "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+              "dev": true
+            }
          }
        }
      }
@ -3450,16 +3522,16 @@
      }
    },
    "stylelint-scss": {
-      "version": "3.17.1",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.17.1.tgz",
-      "integrity": "sha512-KywqqHfK1otZv1QJA4xJDgcPJp1/cP3jnABpbU9gmXOKqKt8cNt27Imsh9JhY133X8D4zDh/38pNq4WjVfUQWQ==",
+      "version": "3.17.2",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-3.17.2.tgz",
+      "integrity": "sha512-e0dmxqsofy/HZj4urcGSJw4S6yHDJxiQdT20/1ciCsd5lomisa7YM4+Qtt1EG4hsqEG1dbEeF855tec1UyqcSA==",
      "dev": true,
      "requires": {
        "lodash": "^4.17.15",
        "postcss-media-query-parser": "^0.2.3",
        "postcss-resolve-nested-selector": "^0.1.1",
        "postcss-selector-parser": "^6.0.2",
-        "postcss-value-parser": "^4.0.3"
+        "postcss-value-parser": "^4.1.0"
      }
    },
    "sugarss": {
@ -3501,12 +3573,6 @@
          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
          "dev": true
        },
-        "emoji-regex": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-          "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
-          "dev": true
-        },
        "is-fullwidth-code-point": {
          "version": "2.0.0",
          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
@ -3786,9 +3852,9 @@
      }
    },
    "vfile": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.1.0.tgz",
-      "integrity": "sha512-BaTPalregj++64xbGK6uIlsurN3BCRNM/P2Pg8HezlGzKd1O9PrwIac6bd9Pdx2uTb0QHoioZ+rXKolbVXEgJg==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-4.1.1.tgz",
+      "integrity": "sha512-lRjkpyDGjVlBA7cDQhQ+gNcvB1BGaTHYuSOcY3S7OhDmBtnzX95FhtZZDecSTDm6aajFymyve6S5DN4ZHGezdQ==",
      "dev": true,
      "requires": {
        "@types/unist": "^2.0.0",
@ -3824,9 +3890,9 @@
      }
    },
    "which-module": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
-      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=",
      "dev": true
    },
    "wide-align": {
@ -3839,13 +3905,57 @@
      }
    },
    "wrap-ansi": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
-      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
      "dev": true,
      "requires": {
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1"
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "3.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+          "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^1.9.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
+        }
      }
    },
    "wrappy": {
@ -3882,9 +3992,9 @@
      "dev": true
    },
    "y18n": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
-      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
      "dev": true
    },
    "yallist": {
@ -3894,56 +4004,86 @@
      "dev": true
    },
    "yaml": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.9.2.tgz",
-      "integrity": "sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==",
-      "dev": true,
-      "requires": {
-        "@babel/runtime": "^7.9.2"
-      }
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+      "dev": true
    },
    "yargs": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
-      "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
      "dev": true,
      "requires": {
-        "camelcase": "^3.0.0",
-        "cliui": "^3.2.0",
-        "decamelize": "^1.1.1",
-        "get-caller-file": "^1.0.1",
-        "os-locale": "^1.4.0",
-        "read-pkg-up": "^1.0.1",
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
        "require-directory": "^2.1.1",
-        "require-main-filename": "^1.0.1",
+        "require-main-filename": "^2.0.0",
        "set-blocking": "^2.0.0",
-        "string-width": "^1.0.2",
-        "which-module": "^1.0.0",
-        "y18n": "^3.2.1",
-        "yargs-parser": "^5.0.0"
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
      },
      "dependencies": {
-        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+        "ansi-regex": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+          "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
          "dev": true
+        },
+        "find-up": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+          "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+          "dev": true,
+          "requires": {
+            "locate-path": "^3.0.0"
+          }
+        },
+        "is-fullwidth-code-point": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+          "dev": true
+        },
+        "string-width": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+          "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+          "dev": true,
+          "requires": {
+            "emoji-regex": "^7.0.1",
+            "is-fullwidth-code-point": "^2.0.0",
+            "strip-ansi": "^5.1.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+          "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^4.1.0"
+          }
        }
      }
    },
    "yargs-parser": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
-      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
      "dev": true,
      "requires": {
-        "camelcase": "^3.0.0"
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
      },
      "dependencies": {
        "camelcase": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
-          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo=",
+          "version": "5.3.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+          "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
          "dev": true
        }
      }
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "heti",
-  "version": "0.7.0",
+  "version": "0.8.0",
  "description": "赫蹏是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。",
  "main": "lib/heti.scss",
  "files": [
@ -9,12 +9,12 @@
    "lib"
  ],
  "scripts": {
-    "start": "node-sass -w --output-style=expanded lib/heti.scss _site/heti.css",
+    "start": "node-sass -w  --output-style=expanded _site/scss/ -o _site/",
    "compile": "rollup -c -w",
-    "build:site": "node-sass _site/scss/index.scss _site/index.css --output-style=compact",
-    "build:style": "node-sass lib/heti.scss umd/heti.min.css --output-style=compressed",
+    "build:style": "node-sass --output-style=compressed lib/heti.scss umd/heti.min.css",
+    "build:site": "node-sass --output-style=expanded _site/scss/ -o _site/",
    "build:script": "rollup -c",
-    "build": "npm run build:style && npm run build:style && npm run build:script",
+    "build": "npm run build:style && npm run build:site && npm run build:script",
    "test": "npx stylelint --config package.json 'lib/**/*.scss'"
  },
  "repository": {
@ -40,13 +40,13 @@
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.1.0",
    "@rollup/plugin-node-resolve": "^7.1.3",
-    "node-sass": "^4.14.0",
+    "node-sass": "^4.14.1",
    "rollup": "^1.32.1",
    "rollup-plugin-terser": "^5.3.0",
-    "stylelint": "^13.3.3",
+    "stylelint": "^13.4.0",
    "stylelint-config-recommended-scss": "^4.2.0",
    "stylelint-config-standard": "^19.0.0",
-    "stylelint-scss": "^3.17.1"
+    "stylelint-scss": "^3.17.2"
  },
  "stylelint": {
    "extends": [
@ -54,14 +54,19 @@
      "stylelint-config-recommended-scss"
    ],
    "rules": {
-      "no-descending-specificity": [
-        true,
+      "no-descending-specificity": null,
+      "at-rule-empty-line-before": null,
+      "block-opening-brace-space-before": "always",
+      "block-closing-brace-newline-after": [
+        "always",
        {
-          "ignore": [
-            "selectors-within-list"
+          "ignoreAtRules": [
+            "if",
+            "else"
          ]
        }
      ],
+      "rule-empty-line-before": null,
      "selector-type-no-unknown": [
        true,
        {