💥 Tweak for moments theme

Merge pull request #105 from sivan/chore/dart-sass
chore: update to dart sass
2022-12-31 22:35:57 +08:00 · 2022-12-19 22:28:20 +08:00 · 2022-12-19 22:26:34 +08:00 · 2022-12-19 22:21:06 +08:00 · 2022-12-19 22:17:58 +08:00 · 2022-12-19 22:01:13 +08:00
18 changed files with 4977 additions and 2880 deletions
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@ -8,6 +8,7 @@ on:
 jobs:
    build-and-deploy:
        runs-on: ubuntu-latest
+        needs: check-env
        steps:
            -   name: Checkout
                uses: actions/checkout@v2
@ -16,19 +17,37 @@ jobs:
            -   name: Setup Node.js
                uses: actions/setup-node@v1
                with:
-                    node-version: 14
+                    node-version: 18
            -   name: NPM Install and Test
                run: |
                    npm install
                    npm run test
                    npm run build
            -   name: Publish
+                if: needs.check-env.outputs.check-npm == 'true'
                uses: JS-DevTools/npm-publish@v1
                with:
                    token: ${{ secrets.NPM_TOKEN }}
            -   name: Deploy to gh-pages
+                if: needs.check-env.outputs.check-access == 'true'
                uses: JamesIves/github-pages-deploy-action@releases/v3
                with:
                    ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
                    BRANCH: gh-pages
                    FOLDER: _site
+    check-env:
+        runs-on: ubuntu-latest
+        outputs:
+            check-npm: ${{ steps.check-npm.outputs.defined }}
+            check-access: ${{ steps.check-access.outputs.defined }}
+        steps:
+            - id: check-npm
+              env:
+                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+              if: ${{ env.NPM_TOKEN != '' }}
+              run: echo "::set-output name=defined::true"
+            - id: check-access
+              env:
+                  ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+              if: ${{ env.ACCESS_TOKEN != '' }}
+              run: echo "::set-output name=defined::true"
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@ -2,16 +2,16 @@

 name: Node CI

-on: [push]
+on: [push, pull_request]

 jobs:
  build:

-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-20.04

    strategy:
      matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x, 18.x]

    steps:
      - uses: actions/checkout@v1
--- a/_site/heti-addon.js
+++ b/_site/heti-addon.js
@ -685,7 +685,7 @@
 	const REG_BD_HALF_START = `${REG_BD_HALF_OPEN}${REG_BD_HALF_CLOSE}`;

 	class Heti {
-	  constructor (rootSelector) {
+	  constructor (rootDocument, rootSelector) {
 	    let supportLookBehind = true;

 	    try {
@ -695,6 +695,7 @@
 	      supportLookBehind = false;
 	    }

+	    this.rootDocument = rootDocument;
 	    this.rootSelector = rootSelector || '.heti';
 	    this.REG_FULL = new RegExp(supportLookBehind ? REG_CJK_FULL : REG_CJK_FULL_WITHOUT_LOOKBEHIND, 'g');
 	    this.REG_START = new RegExp(REG_CJK_START, 'g');
@ -722,8 +723,8 @@
 	      forceContext: this.funcForceContext,
 	      filterElements: this.funcFilterElements,
 	    };
-	    const getWrapper = function (elementName, classList, text) {
-	      const $$r = document.createElement(elementName);
+	    const getWrapper = (elementName, classList, text) => {
+	      const $$r = this.rootDocument.createElement(elementName);
 	      $$r.className = classList;
 	      $$r.textContent = text.trim();
 	      return $$r
@ -767,13 +768,19 @@
 	  }

 	  autoSpacing () {
-	    document.addEventListener('DOMContentLoaded', () => {
-	      const $$rootList = document.querySelectorAll(this.rootSelector);
+	    const callback = () => {
+	      const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector);

 	      for (let $$root of $$rootList) {
 	        this.spacingElement($$root);
 	      }
-	    });
+	    };
+	    if (this.rootDocument == document) {
+	      if (this.rootDocument.readyState === 'complete') setTimeout(callback);
+	      else this.rootDocument.addEventListener('DOMContentLoaded', callback);
+	    } else {
+	      callback();
+	    }
 	  }
 	}

--- a/_site/heti.css
+++ b/_site/heti.css
--- a/_site/index.css
+++ b/_site/index.css
@ -12,10 +12,8 @@
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
 html {
-  line-height: 1.15;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }

 /* Sections
@ -50,12 +48,9 @@ h1 {
 * 2. Show the overflow in Edge and IE.
 */
 hr {
-  box-sizing: content-box;
-  /* 1 */
-  height: 0;
-  /* 1 */
-  overflow: visible;
-  /* 2 */
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
 }

 /**
@ -63,10 +58,8 @@ hr {
 * 2. Correct the odd `em` font sizing in all browsers.
 */
 pre {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }

 /* Text-level semantics
@ -83,12 +76,9 @@ a {
 * 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 */
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
 }

 /**
@ -106,10 +96,8 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
 }

 /**
@ -159,14 +147,10 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  line-height: 1.15;
-  /* 1 */
-  margin: 0;
-  /* 2 */
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
 }

 /**
@ -174,8 +158,7 @@ textarea {
 * 1. Show the overflow in Edge.
 */
 button,
-input {
-  /* 1 */
+input { /* 1 */
  overflow: visible;
 }

@ -184,8 +167,7 @@ input {
 * 1. Remove the inheritance of text transform in Firefox.
 */
 button,
-select {
-  /* 1 */
+select { /* 1 */
  text-transform: none;
 }

@ -193,9 +175,9 @@ select {
 * Correct the inability to style clickable types in iOS and Safari.
 */
 button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+[type=button],
+[type=reset],
+[type=submit] {
  -webkit-appearance: button;
 }

@ -203,9 +185,9 @@ 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 {
+[type=button]::-moz-focus-inner,
+[type=reset]::-moz-focus-inner,
+[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
 }
@ -214,9 +196,9 @@ button::-moz-focus-inner,
 * Restore the focus styles unset by the previous rule.
 */
 button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
+[type=button]:-moz-focusring,
+[type=reset]:-moz-focusring,
+[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
 }

@ -234,18 +216,12 @@ fieldset {
 *    `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 */
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
 }

 /**
@ -266,19 +242,17 @@ textarea {
 * 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 */
+[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 {
+[type=number]::-webkit-inner-spin-button,
+[type=number]::-webkit-outer-spin-button {
  height: auto;
 }

@ -286,17 +260,15 @@ textarea {
 * 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 */
+[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 {
+[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
 }

@ -305,10 +277,8 @@ textarea {
 * 2. Change font properties to `inherit` in Safari.
 */
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
 }

 /* Interactive
@ -360,84 +330,74 @@ li {
  list-style: none;
 }

-.container[data-bg-grid="grid-12"] {
+.container[data-bg-grid=grid-12] {
  background-size: 100% 12px;
-  background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px);
+  background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px);
 }
-
-.container[data-bg-grid="grid-12"] .heti--vertical {
-  outline: 1px solid #ededed;
+.container[data-bg-grid=grid-12] .heti--vertical {
+  outline: 1px solid hsl(0deg, 0%, 93%);
  background-size: 12px 100%;
-  background-image: linear-gradient(to left, transparent 11px, #ededed 1px);
+  background-image: linear-gradient(to left, transparent 11px, hsl(0deg, 0%, 93%) 1px);
 }
-
-.container[data-bg-grid="grid-24"] {
+.container[data-bg-grid=grid-24] {
  background-size: 100% 24px;
-  background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 12px, #ededed, transparent 13px), linear-gradient(to right, transparent 12px, #ededed, transparent 13px);
+  background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 93%), transparent 13px);
 }
-
-.container[data-bg-grid="grid-24"] .heti--vertical {
-  outline: 1px solid #ededed;
+.container[data-bg-grid=grid-24] .heti--vertical {
+  outline: 1px solid hsl(0deg, 0%, 93%);
  background-size: 24px 100%;
-  background-image: linear-gradient(to left, transparent 23px, #ededed 1px);
+  background-image: linear-gradient(to left, transparent 23px, hsl(0deg, 0%, 93%) 1px);
 }
-
-[data-darkmode="dark"] .container[data-bg-grid="grid-12"] {
-  background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+[data-darkmode=dark] .container[data-bg-grid=grid-12] {
+  background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
 }
-
-[data-darkmode="dark"] .container[data-bg-grid="grid-12"] .heti--vertical {
+[data-darkmode=dark] .container[data-bg-grid=grid-12] .heti--vertical {
  background-size: 12px 100%;
-  background-image: linear-gradient(to left, transparent 11px, #333333 1px);
+  background-image: linear-gradient(to left, transparent 11px, hsl(0deg, 0%, 20%) 1px);
 }
-
-[data-darkmode="dark"] .container[data-bg-grid="grid-24"] {
-  background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+[data-darkmode=dark] .container[data-bg-grid=grid-24] {
+  background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
 }
-
-[data-darkmode="dark"] .container[data-bg-grid="grid-24"] .heti--vertical {
+[data-darkmode=dark] .container[data-bg-grid=grid-24] .heti--vertical {
  background-size: 24px 100%;
-  background-image: linear-gradient(to left, transparent 23px, #333333 1px);
+  background-image: linear-gradient(to left, transparent 23px, hsl(0deg, 0%, 20%) 1px);
 }
-
@media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .container[data-bg-grid="grid-12"] {
-    background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+  [data-darkmode=auto] .container[data-bg-grid=grid-12] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
  }
-  [data-darkmode="auto"] .container[data-bg-grid="grid-12"] .heti--vertical {
+  [data-darkmode=auto] .container[data-bg-grid=grid-12] .heti--vertical {
    background-size: 12px 100%;
-    background-image: linear-gradient(to left, transparent 11px, #333333 1px);
+    background-image: linear-gradient(to left, transparent 11px, hsl(0deg, 0%, 20%) 1px);
  }
-  [data-darkmode="auto"] .container[data-bg-grid="grid-24"] {
-    background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 12px, #333333, transparent 13px), linear-gradient(to right, transparent 12px, #333333, transparent 13px);
+  [data-darkmode=auto] .container[data-bg-grid=grid-24] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px), linear-gradient(to right, transparent 12px, hsl(0deg, 0%, 20%), transparent 13px);
  }
-  [data-darkmode="auto"] .container[data-bg-grid="grid-24"] .heti--vertical {
+  [data-darkmode=auto] .container[data-bg-grid=grid-24] .heti--vertical {
    background-size: 24px 100%;
-    background-image: linear-gradient(to left, transparent 23px, #333333 1px);
+    background-image: linear-gradient(to left, transparent 23px, hsl(0deg, 0%, 20%) 1px);
  }
 }
-
@media screen and (min-width: 640px) {
-  .container[data-bg-grid="grid-12"] {
-    background-image: linear-gradient(transparent 11px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px);
+  .container[data-bg-grid=grid-12] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 93%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 50%, 0.4), transparent 49px);
  }
-  .container[data-bg-grid="grid-24"] {
-    background-image: linear-gradient(transparent 23px, #ededed 1px), linear-gradient(to left, transparent 48px, #ededed, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 0, 0, 0.4), transparent 49px);
+  .container[data-bg-grid=grid-24] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 93%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 93%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 50%, 0.4), transparent 49px);
  }
-  [data-darkmode="dark"] .container[data-bg-grid="grid-12"] {
-    background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  [data-darkmode=dark] .container[data-bg-grid=grid-12] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 0.4), transparent 49px);
  }
-  [data-darkmode="dark"] .container[data-bg-grid="grid-24"] {
-    background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  [data-darkmode=dark] .container[data-bg-grid=grid-24] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 0.4), transparent 49px);
  }
 }
-
@media screen and (min-width: 640px) and (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .container[data-bg-grid="grid-12"] {
-    background-image: linear-gradient(transparent 11px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  [data-darkmode=auto] .container[data-bg-grid=grid-12] {
+    background-image: linear-gradient(transparent 11px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 0.4), transparent 49px);
  }
-  [data-darkmode="auto"] .container[data-bg-grid="grid-24"] {
-    background-image: linear-gradient(transparent 23px, #333333 1px), linear-gradient(to left, transparent 48px, #333333, transparent 49px), linear-gradient(to right, transparent 48px, rgba(255, 77, 77, 0.4), transparent 49px);
+  [data-darkmode=auto] .container[data-bg-grid=grid-24] {
+    background-image: linear-gradient(transparent 23px, hsl(0deg, 0%, 20%) 1px), linear-gradient(to left, transparent 48px, hsl(0deg, 0%, 20%), transparent 49px), linear-gradient(to right, transparent 48px, hsla(0deg, 100%, 65%, 0.4), transparent 49px);
  }
 }

@ -471,7 +431,6 @@ li {
  --border-block-end-highlight-tap-color: hsl(216, 100%, 42%);
  --text-highlight-color: hsl(0, 0%, 100%);
 }
-
 .panel-list--gray {
  --bg-color: hsl(180, 100%, 100%);
  --bg-tap-color: hsl(0, 0%, 94%);
@ -498,8 +457,7 @@ li {
  --border-block-end-highlight-tap-color: hsl(228, 4%, 26%);
  --text-highlight-color: hsl(0, 0%, 92%);
 }
-
-[data-darkmode="dark"] .panel-list {
+[data-darkmode=dark] .panel-list {
  --bg-color: hsl(225, 2%, 40%);
  --bg-tap-color: hsl(210, 2%, 49%);
  --border-color: hsla(210, 2%, 33%, 0.88);
@ -525,8 +483,7 @@ li {
  --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
  --text-highlight-color: hsl(0, 0%, 100%);
 }
-
-[data-darkmode="dark"] .panel-list--gray {
+[data-darkmode=dark] .panel-list--gray {
  --bg-color: hsl(0, 0%, 40%);
  --bg-tap-color: hsl(0, 0%, 49%);
  --border-color: hsla(120, 1%, 34%, 0.88);
@ -552,9 +509,8 @@ li {
  --border-block-end-highlight-tap-color: hsl(0, 0%, 69%);
  --text-highlight-color: hsl(0, 0%, 15%);
 }
-
@media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .panel-list {
+  [data-darkmode=auto] .panel-list {
    --bg-color: hsl(225, 2%, 40%);
    --bg-tap-color: hsl(210, 2%, 49%);
    --border-color: hsla(210, 2%, 33%, 0.88);
@ -580,7 +536,7 @@ li {
    --border-block-end-highlight-tap-color: hsl(215, 74%, 51%);
    --text-highlight-color: hsl(0, 0%, 100%);
  }
-  [data-darkmode="auto"] .panel-list--gray {
+  [data-darkmode=auto] .panel-list--gray {
    --bg-color: hsl(0, 0%, 40%);
    --bg-tap-color: hsl(0, 0%, 49%);
    --border-color: hsla(120, 1%, 34%, 0.88);
@ -607,11 +563,9 @@ li {
    --text-highlight-color: hsl(0, 0%, 15%);
  }
 }
-
 .panel-list + .panel-list {
  margin-inline-start: 12px;
 }
-
 .panel-list label {
  position: relative;
  display: block;
@ -632,31 +586,25 @@ li {
  color: var(--text-color);
  box-shadow: 0 1px 0 var(--box-shadow-color);
 }
-
 .panel-list label:active {
  background-color: var(--bg-tap-color);
 }
-
 .panel-list li {
  margin-inline-end: -1px;
 }
-
 .panel-list li:first-child label {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-inline-start-color: var(--border-inline-start-color);
 }
-
 .panel-list li:last-child label {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-inline-end-color: var(--border-inline-end-color);
 }
-
 .panel-list input {
  display: none;
 }
-
 .panel-list input:checked + label {
  z-index: 1;
  background-image: linear-gradient(to bottom, var(--bg-highlight-color-start), var(--bg-highlight-color-end));
@ -665,14 +613,12 @@ li {
  border-block-end-color: var(--border-block-end-highlight-color);
  color: var(--text-highlight-color);
 }
-
 .panel-list input:checked + label:active {
  background-image: linear-gradient(to bottom, var(--bg-highlight-tap-color-start), var(--bg-highlight-tap-color-end));
  border-color: var(--border-highlight-tap-color);
  border-block-start-color: var(--border-block-start-highlight-tap-color);
  border-block-end-color: var(--border-block-end-highlight-tap-color);
 }
-
 .panel-list--icon label {
  width: 30px;
  padding-inline-start: 8px;
@ -717,7 +663,6 @@ li {
    opacity: 1;
  }
 }
-
 .card {
  position: relative;
  left: -12px;
@ -729,14 +674,12 @@ li {
  padding-inline-start: 12px;
  padding-inline-end: 12px;
  border-radius: 2px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
-  background-color: white;
+  box-shadow: 0 4px 16px hsla(0deg, 0%, 0%, 0.16);
+  background-color: hsl(0deg, 0%, 100%);
 }
-
 .article .card {
  text-align: left;
 }
-
 .card > figcaption {
  display: inline-block;
  margin-block-start: 16px;
@ -745,14 +688,14 @@ li {
  padding-inline-start: 0;
  padding-inline-end: 72px;
  line-height: 24px;
-  border-block-start: 1px solid #ededed;
+  border-block-start: 1px solid hsl(0deg, 0%, 93%);
 }

 .card__vertical-container {
  box-sizing: border-box;
  width: 100%;
  height: 30em;
-  border: 1px solid #ededed;
+  border: 1px solid hsl(0deg, 0%, 93%);
  overflow: auto;
  writing-mode: vertical-rl;
 }
@ -768,39 +711,35 @@ li {
    padding-inline-end: 32px;
  }
 }
-
-[data-darkmode="dark"] .card {
-  background-color: #292929;
+[data-darkmode=dark] .card {
+  background-color: hsl(0deg, 0%, 16%);
 }
-
-[data-darkmode="dark"] .card > figcaption {
-  border-block-start: 1px solid #333333;
+[data-darkmode=dark] .card > figcaption {
+  border-block-start: 1px solid hsl(0deg, 0%, 20%);
 }
-
-[data-darkmode="dark"] .card .card__vertical-container {
-  border-color: #333333;
+[data-darkmode=dark] .card .card__vertical-container {
+  border-color: hsl(0deg, 0%, 20%);
 }
-
@media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] .card {
-    background-color: #292929;
+  [data-darkmode=auto] .card {
+    background-color: hsl(0deg, 0%, 16%);
  }
-  [data-darkmode="auto"] .card > figcaption {
-    border-block-start: 1px solid #333333;
+  [data-darkmode=auto] .card > figcaption {
+    border-block-start: 1px solid hsl(0deg, 0%, 20%);
  }
-  [data-darkmode="auto"] .card .card__vertical-container {
-    border-color: #333333;
+  [data-darkmode=auto] .card .card__vertical-container {
+    border-color: hsl(0deg, 0%, 20%);
  }
 }

 /** 基础样式 **/
 body {
  font-family: -apple-system, system-ui, "Helvetica Neue", Helvetica, Arial, "Heti Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  background-color: white;
+  background-color: hsl(0deg, 0%, 100%);
 }

 a {
-  color: #4387f4;
+  color: hsl(217deg, 89%, 61%);
  text-decoration: none;
 }

@ -817,7 +756,6 @@ a {
  margin-inline-start: auto;
  margin-inline-end: auto;
 }
-
 .article__nav ol {
  margin-block-start: 24px;
  margin-block-end: 24px;
@ -850,7 +788,7 @@ a {
@media screen and (min-width: 640px) {
  body {
    min-width: 640px;
-    background-color: #ededed;
+    background-color: hsl(0deg, 0%, 93%);
  }
  .container {
    box-sizing: border-box;
@ -866,15 +804,14 @@ a {
    padding-inline-start: 48px;
    padding-inline-end: 48px;
    border-radius: 2px;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
-    background-color: white;
+    box-shadow: 0 8px 32px hsla(0deg, 0%, 0%, 0.32);
+    background-color: hsl(0deg, 0%, 100%);
  }
  .section {
    max-height: none;
    overflow: visible;
  }
 }
-
@media screen and (min-width: 900px) {
  .article__nav {
    position: relative;
@ -889,7 +826,7 @@ a {
    padding-block-end: 12px;
    padding-inline-start: 8px;
    padding-inline-end: 8px;
-    border: 1px solid #ededed;
+    border: 1px solid hsl(0deg, 0%, 93%);
    border-radius: 2px;
  }
  .article__nav ol {
@ -900,43 +837,38 @@ a {
    margin-block-start: 0;
  }
 }
-
-[data-darkmode="dark"] body {
-  background-color: #3d3d3d;
+[data-darkmode=dark] body {
+  background-color: hsl(0deg, 0%, 24%);
 }
-
-[data-darkmode="dark"] a {
-  color: #6b90cc;
+[data-darkmode=dark] a {
+  color: hsl(217deg, 49%, 61%);
 }
-
-[data-darkmode="dark"] a:visited {
-  color: #2f5189;
+[data-darkmode=dark] a:visited {
+  color: hsl(217deg, 49%, 36%);
 }
-
-[data-darkmode="dark"] .container {
-  background-color: #292929;
-  color: #a3a3a3;
+[data-darkmode=dark] .container {
+  background-color: hsl(0deg, 0%, 16%);
+  color: hsl(0deg, 0%, 64%);
 }
-
-[data-darkmode="dark"] .article__nav {
-  border-color: #333333;
+[data-darkmode=dark] .article__nav {
+  border-color: hsl(0deg, 0%, 20%);
 }

@media (prefers-color-scheme: dark) {
-  [data-darkmode="auto"] body {
-    background-color: #3d3d3d;
+  [data-darkmode=auto] body {
+    background-color: hsl(0deg, 0%, 24%);
  }
-  [data-darkmode="auto"] a {
-    color: #6b90cc;
+  [data-darkmode=auto] a {
+    color: hsl(217deg, 49%, 61%);
  }
-  [data-darkmode="auto"] a:visited {
-    color: #2f5189;
+  [data-darkmode=auto] a:visited {
+    color: hsl(217deg, 49%, 36%);
  }
-  [data-darkmode="auto"] .container {
-    background-color: #292929;
-    color: #a3a3a3;
+  [data-darkmode=auto] .container {
+    background-color: hsl(0deg, 0%, 16%);
+    color: hsl(0deg, 0%, 64%);
  }
-  [data-darkmode="auto"] .article__nav {
-    border-color: #333333;
+  [data-darkmode=auto] .article__nav {
+    border-color: hsl(0deg, 0%, 20%);
  }
 }
--- a/_site/index.html
+++ b/_site/index.html
@ -622,7 +622,7 @@
      $$article.className = ['article', 'heti', e.target.value].join(' ')
    })

-    const heti = new Heti('.article')
+    const heti = new Heti(document, '.article')
    heti.autoSpacing()
  </script>
 </body>
--- a/js/heti-addon.js
+++ b/js/heti-addon.js
@ -36,7 +36,7 @@ const REG_BD_HALF_CLOSE = `”’`
 const REG_BD_HALF_START = `${REG_BD_HALF_OPEN}${REG_BD_HALF_CLOSE}`

 class Heti {
-  constructor (rootSelector) {
+  constructor (rootDocument, rootSelector) {
    let supportLookBehind = true

    try {
@ -46,6 +46,7 @@ class Heti {
      supportLookBehind = false
    }

+    this.rootDocument = rootDocument
    this.rootSelector = rootSelector || '.heti'
    this.REG_FULL = new RegExp(supportLookBehind ? REG_CJK_FULL : REG_CJK_FULL_WITHOUT_LOOKBEHIND, 'g')
    this.REG_START = new RegExp(REG_CJK_START, 'g')
@ -73,8 +74,8 @@ class Heti {
      forceContext: this.funcForceContext,
      filterElements: this.funcFilterElements,
    }
-    const getWrapper = function (elementName, classList, text) {
-      const $$r = document.createElement(elementName)
+    const getWrapper = (elementName, classList, text) => {
+      const $$r = this.rootDocument.createElement(elementName)
      $$r.className = classList
      $$r.textContent = text.trim()
      return $$r
@ -118,13 +119,19 @@ class Heti {
  }

  autoSpacing () {
-    document.addEventListener('DOMContentLoaded', () => {
-      const $$rootList = document.querySelectorAll(this.rootSelector)
+    const callback = () => {
+      const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector)

      for (let $$root of $$rootList) {
        this.spacingElement($$root)
      }
-    })
+    }
+    if (this.rootDocument == document) {
+      if (this.rootDocument.readyState === 'complete') setTimeout(callback)
+      else this.rootDocument.addEventListener('DOMContentLoaded', callback)
+    } else {
+      callback()
+    }
  }
 }

--- a/lib/_base.scss
+++ b/lib/_base.scss
@ -19,24 +19,6 @@
    }
  }

-  // 定义块级元素样式
-  blockquote {
-    margin-block-start: $std-block-unit * 0.5;
-    margin-block-end: $std-block-unit;
-    margin-inline-start: $std-inline-unit * 2;
-    margin-inline-end: $std-inline-unit * 2;
-    padding-block-start: $std-block-unit * 0.5;
-    padding-block-end: $std-block-unit * 0.5;
-    padding-inline-start: $std-inline-unit;
-    padding-inline-end: $std-inline-unit;
-    //border-radius: 4px;
-    background-color: hsla(0, 0%, 0%, 0.054);
-
-    @include darkmode-style {
-      background-color: hsla(0, 0%, 100%, 0.054);
-    }
-  }
-
  figure {
    display: block;
    text-align: center;
@ -73,37 +55,18 @@
    }
  }

-  $format_pre_code: true !default;
+  // 非中文时不加间距
+  letter-spacing: $letter-spacing-medium;
+  @include non-cjk-block {
+    letter-spacing: $letter-spacing-normal;
+  }

-  @if $format_pre_code {
-    pre {
-      margin-block-start: $std-block-unit * 0.5;
-      margin-block-end: $std-block-unit * 0.5;
-      margin-inline-start: 0;
-      margin-inline-end: 0;
-      padding-block-start: $std-block-unit * 0.5;
-      padding-block-end: $std-block-unit * 0.5;
-      padding-inline-start: $std-inline-unit;
-      padding-inline-end: $std-inline-unit;
-      overflow: auto;
-      font-family: $font-family-mono;
-      white-space: pre;
-      word-wrap: normal;
-      border-radius: 4px;
-      background-color: hsla(0, 0%, 0%, 0.054);
-
-      @include darkmode-style {
-        background-color: hsla(0, 0%, 100%, 0.054);
-      }
-
-      code {
-        margin: 0;
-        padding: 0;
-        border: 0;
-        border-radius: 0;
-        background-color: transparent;
-        color: inherit;
-      }
-    }
+  a,
+  abbr,
+  code,
+  heti-spacing,
+  [lang="en-US"] {
+    // There should be no leeter-spacing between English characters.
+    letter-spacing: normal;
  }
 }
--- a/lib/_inline.scss
+++ b/lib/_inline.scss
@ -25,13 +25,6 @@
    font-weight: $font-weight-bold;
  }

-  code {
-    margin-inline-start: 0.25em;
-    margin-inline-end: 0.25em;
-    font-family: $font-family-mono;
-    font-size: 0.875em;
-  }
-
  dfn {
    font-weight: $font-weight-bold;

--- a/lib/_variables.scss
+++ b/lib/_variables.scss
@ -54,6 +54,12 @@ $line-height-expanded-ultra: 2.25 !default;
 //$line-height-condensed: 1.25 !default;
 //$line-height-condensed-ultra: 1 !default;

+// 字符间距
+$letter-spacing-normal: 0 !default;
+$letter-spacing-small: 0.01em !default;
+$letter-spacing-medium: 0.02em !default;
+$letter-spacing-large: 0.05em !default;
+
 $line-height-size-normal: $font-size-normal * $line-height-normal !default;
 $line-height-size-large: $line-height-size-normal !default;
 $line-height-size-x-large: $font-size-x-large * $line-height-normal !default;
@ -70,7 +76,7 @@ $line-height-size-h6: 24px !default;
 // 标准网格单位变量 Standard Length
 // 垂直方向标准单位 = 标准行高
 // 水平方向标准单位 = 标准字号
-$std-block-unit: $line-height-size-normal !default;
+$std-block-unit: 16px;
 $std-inline-unit: $font-size-normal !default;

 // 示例：缩进单位 = 二倍文字宽度
@ -97,7 +103,7 @@ $chinese-quote-presets: (
  )
 ) !default;

-$chinese-quote-set: "common" !default;
+$chinese-quote-set: "cn" !default;

 // 栏 Columns
 // 分栏
@ -108,7 +114,7 @@ $column-width-list: (16em, 20em, 24em, 28em, 32em, 36em, 40em, 44em, 48em) !defa
 /// 预设重置方案
 /// `reset`：假定 Eric Meyer 的 CSS Reset 或其它流行的 Reset
 /// `normalize`：指定为 normalize.css
-$_css-reset-scheme: "reset";
+$_css-reset-scheme: "normalize";

 // 混合 Mix-ins
 // Mix-in: Clear float
--- a/lib/fonts/_hei.scss
+++ b/lib/fonts/_hei.scss
@ -1,97 +1,232 @@
-// Author: Sivan [sun.sivan@gmail.com]
+// Author: Sivan [sun.sivan@gmail.com], Pan RZ [c141028@gmail.com]
 // Description: define font-face Heti Hei.

 // 标准 Regular
@font-face {
  font-family: "Heti Hei";
+  src:
+    "Heti Hei SC",
+    "Heti Hei TC",
+    "Heti Hei JP",
+    "Heti Hei KR";
+}
+
+@font-face {
+  font-family: "Heti Hei SC";
  src:
    local("PingFang SC Regular"),
-    local("PingFang TC Regular"),
-    local("Hiragino Sans GB W3"),
    local("Heiti SC Regular"),
-    local("Heiti TC Regular"),
    local("Microsoft YaHei"),
-    local("Microsoft Jhenghei"),
    local("Source Han Sans CN Regular"),
+    local("Noto Sans CJK SC Regular"),
+    local("WenQuanYi Micro Hei"),
+    local("Droid Sans Fallback");
+}
+
+@font-face {
+  font-family: "Heti Hei TC";
+  src:
+    local("PingFang TC Regular"),
+    local("Heiti TC Regular"),
+    local("Microsoft Jhenghei"),
    local("Source Han Sans HK Regular"),
    local("Source Han Sans TW Regular"),
-    local("Source Han Sans JP Regular"),
-    local("Source Han Sans KR Regular"),
-    local("Noto Sans CJK SC Regular"),
    local("Noto Sans CJK TC Regular"),
-    local("Noto Sans CJK JP Regular"),
-    local("Noto Sans CJK KR Regular"),
    local("WenQuanYi Micro Hei"),
    local("Droid Sans Fallback");
 }

+@font-face {
+  font-family: "Heti Hei JP";
+  src:
+    local("Hiragino Sans GB W3"),
+    local("Source Han Sans JP Regular"),
+    local("Noto Sans CJK JP Regular"),
+    local("Droid Sans Fallback");
+}
+
+@font-face {
+  font-family: "Heti Hei KR";
+  src:
+    local("Source Han Sans KR Regular"),
+    local("Noto Sans CJK KR Regular"),
+    local("Droid Sans Fallback");
+}
+
 // 细体 Light
@font-face {
  font-family: "Heti Hei";
  font-weight: 200;
+  src:
+    "Heti Hei SC Light",
+    "Heti Hei TC Light",
+    "Heti Hei JP Light",
+    "Heti Hei KR Light";
+}
+
+@font-face {
+  font-family: "Heti Hei SC Light";
+  font-weight: 200;
  src:
    local("PingFang SC Light"),
-    local("PingFang TC Light"),
    local("Heiti SC Light"),
-    local("Heiti TC Light"),
-    local("Microsoft YaHei Light"),
-    local("Microsoft Jhenghei Light"),
+    "Heti Hei SC Light Fallback",
    local("Source Han Sans CN Light"),
+    local("Noto Sans CJK SC Light");
+}
+
+@font-face {
+  font-family: "Heti Hei TC Light";
+  font-weight: 200;
+  src:
+    local("PingFang TC Light"),
+    local("Heiti TC Light"),
+    local("Microsoft Jhenghei Light"),
    local("Source Han Sans HK Light"),
    local("Source Han Sans TW Light"),
+    local("Noto Sans CJK TC Light");
+}
+
+@font-face {
+  font-family: "Heti Hei JP Light";
+  font-weight: 200;
+  src:
    local("Source Han Sans JP Light"),
+    local("Noto Sans CJK JP Light");
+}
+
+@font-face {
+  font-family: "Heti Hei KR Light";
+  font-weight: 200;
+  src:
    local("Source Han Sans KR Light"),
-    local("Noto Sans CJK SC Light"),
-    local("Noto Sans CJK TC Light"),
-    local("Noto Sans CJK JP Light"),
    local("Noto Sans CJK KR Light");
 }

+@font-face {
+  font-family: "Heti Hei SC Light Fallback";
+  font-weight: 200;
+  src:
+    local("Microsoft YaHei"),
+    local("Droid Sans Fallback");
+}
+
 // 粗体 Bold
@font-face {
  font-family: "Heti Hei";
  font-weight: 600;
+  src:
+    "Heti Hei SC Bold",
+    "Heti Hei TC Bold",
+    "Heti Hei JP Bold",
+    "Heti Hei KR Bold";
+}
+
+@font-face {
+  font-family: "Heti Hei SC Bold";
+  font-weight: 600;
  src:
    local("PingFang SC Medium"),
-    local("Hiragino Sans GB W6"),
-    local("PingFang TC Medium"),
    local("Heiti SC Medium"),
-    local("Heiti TC Medium"),
-    local("Microsoft YaHei Bold"),
-    local("Microsoft Jhenghei Bold"),
+    "Heti Hei SC Bold Fallback",
    local("Source Han Sans CN Bold"),
+    local("Noto Sans CJK SC Bold");
+}
+
+@font-face {
+  font-family: "Heti Hei TC Bold";
+  font-weight: 600;
+  src:
+    local("PingFang TC Medium"),
+    local("Heiti TC Medium"),
+    local("Microsoft Jhenghei Bold"),
    local("Source Han Sans HK Bold"),
    local("Source Han Sans TW Bold"),
+    local("Noto Sans CJK TC Bold");
+}
+
+@font-face {
+  font-family: "Heti Hei JP Bold";
+  font-weight: 600;
+  src:
+    local("Hiragino Sans GB W6"),
    local("Source Han Sans JP Bold"),
+    local("Noto Sans CJK JP Bold");
+}
+
+@font-face {
+  font-family: "Heti Hei KR Bold";
+  font-weight: 600;
+  src:
    local("Source Han Sans KR Bold"),
-    local("Noto Sans CJK SC Bold"),
-    local("Noto Sans CJK TC Bold"),
-    local("Noto Sans CJK JP Bold"),
    local("Noto Sans CJK KR Bold");
 }

+@font-face {
+  font-family: "Heti Hei SC Bold Fallback";
+  font-weight: 600;
+  src:
+    local("Microsoft YaHei"),
+    local("Droid Sans Fallback");
+}
+
 // 黑体 Black
@font-face {
  font-family: "Heti Hei Black";
  font-weight: 800;
+  src:
+    "Heti Hei SC Black",
+    "Heti Hei TC Black",
+    "Heti Hei JP Black",
+    "Heti Hei KR Black";
+}
+
+@font-face {
+  font-family: "Heti Hei SC Black";
+  font-weight: 800;
  src:
    local("Lantinghei SC Heavy"),
-    local("Lantinghei TC Heavy"),
    local("PingFang SC Semibold"),
-    local("PingFang TC Semibold"),
-    local("Hiragino Sans GB W6"),
    local("Heiti SC Medium"),
-    local("Heiti TC Medium"),
-    local("Microsoft YaHei Bold"),
-    local("Microsoft Jhenghei Bold"),
+    "Heti Hei SC Black Fallback",
    local("Source Han Sans CN Heavy"),
+    local("Noto Sans CJK SC Heavy");
+}
+
+@font-face {
+  font-family: "Heti Hei TC Black";
+  font-weight: 800;
+  src:
+    local("Lantinghei TC Heavy"),
+    local("PingFang TC Semibold"),
+    local("Heiti TC Medium"),
+    local("Microsoft Jhenghei Bold"),
    local("Source Han Sans HK Heavy"),
    local("Source Han Sans TW Heavy"),
+    local("Noto Sans CJK TC Heavy");
+}
+
+@font-face {
+  font-family: "Heti Hei JP Black";
+  font-weight: 800;
+  src:
+    local("Hiragino Sans GB W6"),
    local("Source Han Sans JP Heavy"),
+    local("Noto Sans CJK JP Heavy");
+}
+
+@font-face {
+  font-family: "Heti Hei KR Black";
+  font-weight: 800;
+  src:
    local("Source Han Sans KR Heavy"),
-    local("Noto Sans CJK SC Heavy"),
-    local("Noto Sans CJK TC Heavy"),
-    local("Noto Sans CJK JP Heavy"),
-    local("Noto Sans CJK KR Heavy"),
+    local("Noto Sans CJK KR Heavy");
+}
+
+@font-face {
+  font-family: "Heti Hei SC Black Fallback";
+  font-weight: 800;
+  src:
+    local("Microsoft YaHei"),
    local("Droid Sans Fallback");
 }
--- a/lib/fonts/_kai.scss
+++ b/lib/fonts/_kai.scss
@ -1,4 +1,4 @@
-// Author: Sivan [sun.sivan@gmail.com]
+// Author: Sivan [sun.sivan@gmail.com], Pan RZ [c141028@gmail.com]
 // Description: define font-face Heti Kai.

 // 标准 Regular
@ -7,6 +7,8 @@
  src:
    local("Kaiti SC Regular"),
    local("Kaiti TC Regular"),
+    local("STKaiti"),
+    local("Kaiti"),
    local("BiauKai");
 }

@ -19,11 +21,22 @@
    local("Kaiti TC Bold");
 }

+@font-face {
+  font-family: "Heti Kai Bold Fallback";
+  font-weight: 600;
+  src:
+    local("STKaiti"),
+    local("Kaiti")
+    local("BiauKai");
+}
+
 // 黑体 Black
@font-face {
  font-family: "Heti Kai Black";
  font-weight: 800;
  src:
    local("Kaiti SC Black"),
-    local("Kaiti TC Black");
+    local("Kaiti TC Black"),
+    local("STKaiti"),
+    local("Kaiti");
 }
--- a/lib/fonts/_song.scss
+++ b/lib/fonts/_song.scss
@ -1,4 +1,4 @@
-// Author: Sivan [sun.sivan@gmail.com]
+// Author: Sivan [sun.sivan@gmail.com], Pan RZ [c141028@gmail.com]
 // Description: define font-face Heti Song.

 // 标准 Regular
@ -17,8 +17,13 @@
  src:
    local("Songti SC Light"),
    local("Songti TC Light"),
-    local("STSong"),
-    local("SimSun");
+    "Heti Song Light Fallback";
+}
+
+@font-face {
+  font-family: "Heti Song Light Fallback";
+  font-weight: 200;
+  src: local("SimSun");
 }

 // 粗体 Bold
@ -28,7 +33,13 @@
  src:
    local("Songti SC Bold"),
    local("Songti TC Bold"),
-    local("SimSun");
+    "Heti Song Bold Fallback";
+}
+
+@font-face {
+  font-family: "Heti Song Bold Fallback";
+  font-weight: 600;
+  src: local("SimSun");
 }

 // 黑体 Black
--- a/lib/helpers/_inline.scss
+++ b/lib/helpers/_inline.scss
@ -13,9 +13,12 @@
  #{$root-selector}-em {
    -webkit-text-emphasis: filled circle;
    -webkit-text-emphasis-position: under;
+    text-emphasis: filled circle;
+    text-emphasis-position: under right;

    @include non-cjk-block {
      -webkit-text-emphasis: none;
+      text-emphasis: none;
    }
  }

--- a/lib/heti.scss
+++ b/lib/heti.scss
@ -27,7 +27,6 @@
  font-size: $font-size-normal;
  font-weight: $font-weight-normal;
  -webkit-font-smoothing: subpixel-antialiased;
-  line-height: $line-height-normal;

  // 针对混合英文段落，采取按词折行，长单词通过连词符段行
  // https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/
--- a/lib/modifiers/annotation.scss
+++ b/lib/modifiers/annotation.scss
@ -16,10 +16,13 @@
    em {
      -webkit-text-emphasis: filled circle;
      -webkit-text-emphasis-position: under;
+      text-emphasis: filled circle;
+      text-emphasis-position: under right;
      font-weight: $font-weight-normal;

      @include non-cjk-block {
        -webkit-text-emphasis: none;
+        text-emphasis: none;
      }
    }

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,10 +9,10 @@
    "lib"
  ],
  "scripts": {
-    "start": "node-sass -w  --output-style=expanded _site/scss/ -o _site/",
+    "start": "sass -w --no-source-map _site/scss/:_site/",
    "compile": "rollup -c -w",
-    "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:style": "sass --no-source-map --style=compressed lib/heti.scss:umd/heti.min.css",
+    "build:site": "sass --no-source-map _site/scss/:_site/",
    "build:script": "rollup -c",
    "build": "npm run build:style && npm run build:site && npm run build:script",
    "test": "npx stylelint --config package.json 'lib/**/*.scss'"
@ -40,9 +40,9 @@
  "devDependencies": {
    "@rollup/plugin-commonjs": "^11.1.0",
    "@rollup/plugin-node-resolve": "^7.1.3",
-    "node-sass": "^4.14.1",
    "rollup": "^1.32.1",
    "rollup-plugin-terser": "^5.3.1",
+    "sass": "^1.57.0",
    "stylelint": "^13.13.1",
    "stylelint-config-recommended-scss": "^4.3.0",
    "stylelint-config-standard": "^22.0.0",
Author	SHA1	Message	Date
Zhao Zuohong	c49c8a8a91	💥 Tweak for moments theme	2022-12-31 22:35:57 +08:00
Sivan	38b0fd865d	Merge pull request #105 from sivan/chore/dart-sass chore: update to dart sass	2022-12-19 22:28:20 +08:00
唠科	1dbd79ef7a	fix: ci	2022-12-19 22:26:34 +08:00
唠科	6a05d6b002	fix: ci	2022-12-19 22:21:06 +08:00
唠科	ff735953c4	fix: typo	2022-12-19 22:17:58 +08:00
唠科	4041cc5e91	chore: update to dart sass	2022-12-19 22:01:13 +08:00
Sivan	19e3d37377	Merge pull request #100 from sivan/dependabot/npm_and_yarn/qs-6.5.3 chore(deps): bump qs from 6.5.2 to 6.5.3	2022-12-19 17:41:04 +08:00
Sivan	98f61e5ec1	Merge pull request #98 from xiaolai/letterspacing-for-different-languages 中英文混排之时，中文字符之间有字间距，英文字符之间没有字间距。	2022-12-19 17:38:57 +08:00
dependabot[bot]	2b2f14a910	chore(deps): bump qs from 6.5.2 to 6.5.3 Bumps [qs](https://github.com/ljharb/qs) from 6.5.2 to 6.5.3. - [Release notes](https://github.com/ljharb/qs/releases) - [Changelog](https://github.com/ljharb/qs/blob/main/CHANGELOG.md) - [Commits](https://github.com/ljharb/qs/compare/v6.5.2...v6.5.3) --- updated-dependencies: - dependency-name: qs dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-12-10 17:48:50 +00:00
xiaolai	9e6ac7777c	ugly modification	2022-12-09 00:45:42 +08:00
xiaolai	af637c7a6d	中英文混排之时，中文字符之间有字间距，英文字符之间没有字间距。	2022-12-09 00:11:17 +08:00
Sivan	35c2634a3a	Merge pull request #94 from sivan/dependabot/npm_and_yarn/terser-4.8.1 chore(deps): bump terser from 4.8.0 to 4.8.1	2022-07-24 23:18:54 +08:00
dependabot[bot]	f0bacf0ea6	chore(deps): bump terser from 4.8.0 to 4.8.1 Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1. - [Release notes](https://github.com/terser/terser/releases) - [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md) - [Commits](https://github.com/terser/terser/commits) --- updated-dependencies: - dependency-name: terser dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-07-20 22:06:43 +00:00
Sivan	8fab6851db	Merge pull request #92 from hyrious/master 允许 `autoSpacing` 在 DOM ready 后调用	2022-06-21 02:17:50 +08:00
hyrious	c82e86bc4b	fix `autoSpacing` to take effect after DOM ready	2022-06-15 09:37:29 +08:00
Sivan	eadee6a3b7	Merge pull request #88 from liyishuai/patch-1 deploy: really check environment	2022-03-26 23:18:44 +08:00
Sivan	d115ae19b6	Merge pull request #87 from sivan/dependabot/npm_and_yarn/minimist-1.2.6 chore(deps): bump minimist from 1.2.5 to 1.2.6	2022-03-26 23:18:17 +08:00
Yishuai Li	92ac38ccdb	deploy: really check environment	2022-03-24 18:53:22 -04:00
dependabot[bot]	48af423787	chore(deps): bump minimist from 1.2.5 to 1.2.6 Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2022-03-24 19:20:46 +00:00
Sivan	a2be36a424	Merge pull request #86 from liyishuai/ci ci: fix typo in deploy.yml	2022-03-25 03:01:55 +08:00
Yishuai Li	24fd4036bd	ci: fix typo in deploy.yml	2022-03-22 19:35:19 -04:00
Sivan	c007f9a342	Merge pull request #85 from liyishuai/ci ci: deploy upon token exists	2022-03-08 15:20:13 +08:00
Sivan	840958f013	Merge pull request #84 from liyishuai/lint fix: lint scss	2022-03-08 15:19:53 +08:00
Yishuai Li	a91791e7c8	ci: deploy upon token exists	2022-03-02 17:39:55 -05:00
Yishuai Li	6b03d2e350	ci: lint pull requests	2022-03-02 16:43:21 -05:00
Yishuai Li	91c8479518	fix: lint scss	2022-03-02 16:42:57 -05:00
Sivan	40a4dbce86	Merge pull request #80 from XieJiSS/master - 修复了楷体显示为宋体的问题，closes #72。引入了 `STKaiti` `Kaiti` 两个字体。 - 修复了字形回退问题。`@font-face` 中 `src` 工作原理为随机选择，可能导致字形回退。因此区分 SC/TC/JP/KR 字体，确保即使随机也只是在特定字体族中随机，不会发生回退。 - 修复了宋体加粗不显示的问题，closes #73。同名 font-face 的相同 `src`，匹配不同字重时需要额外指定一次 `font-weight`。 - closes #69，closes #65。	2022-01-28 02:45:35 +08:00
XieJiSS	c8529c14bf	fix: font-face src 随机选择导致字形混乱问题	2022-01-26 02:51:33 +08:00
XieJiSS	1f6cfeaf51	fix: kai display issue for Windows	2022-01-26 01:20:43 +08:00
XieJiSS	3fe30d84f1	chore: bump package-lock.json version	2022-01-26 01:20:06 +08:00
Sivan	534e6a8560	Merge pull request #78 from piggynl/patch-1 fix: fix `<em>` styling	2022-01-23 22:59:04 +08:00
Piggy NL	1ae467b417	fix: fix <em> styling	2022-01-23 22:54:36 +08:00
Sivan	78eb216f19	feat: support double quotation marks #62	2021-12-09 02:50:12 +08:00
Sivan	c58ee4a39e	refactor: slash as division code in sass #58 refactor: slash as division code in sass #58	2021-09-16 11:15:16 +08:00
Sivan	2957435a77	Merge pull request #57 from sivan/develop fix: add quote and fix line-height issue	2021-08-12 18:49:33 +08:00