Deploying to gh-pages from @ e8de82fa5c 🚀

2020-05-17 16:53:46 +00:00 · 2020-05-17 16:53:46 +00:00 · db2c46993e
commit db2c46993e
parent 7ec9439197
7 changed files with 1036 additions and 251 deletions
--- a/heti.css
+++ b/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/index.css
+++ b/index.css
--- a/index.html
+++ b/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/scss/components/_grid-container.scss
+++ b/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/scss/components/_panel-list.scss
+++ b/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/scss/heti.scss
+++ b/scss/heti.scss
@ -0,0 +1,3 @@
+$darkmode: 'manual';
+
+@import "../../lib/heti";
--- a/scss/index.scss
+++ b/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();
+  }
+}