Compare commits
No commits in common. "master" and "develop" have entirely different histories.
18 changed files with 2881 additions and 4978 deletions
21
.github/workflows/deploy.yml
vendored
21
.github/workflows/deploy.yml
vendored
|
|
@ -8,7 +8,6 @@ on:
|
|||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
needs: check-env
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
|
|
@ -17,37 +16,19 @@ jobs:
|
|||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 18
|
||||
node-version: 14
|
||||
- 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"
|
||||
|
|
|
|||
6
.github/workflows/nodejs.yml
vendored
6
.github/workflows/nodejs.yml
vendored
|
|
@ -2,16 +2,16 @@
|
|||
|
||||
name: Node CI
|
||||
|
||||
on: [push, pull_request]
|
||||
on: [push]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
runs-on: ubuntu-20.04
|
||||
runs-on: ubuntu-18.04
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [16.x, 18.x]
|
||||
node-version: [12.x, 14.x]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v1
|
||||
|
|
|
|||
|
|
@ -685,7 +685,7 @@
|
|||
const REG_BD_HALF_START = `${REG_BD_HALF_OPEN}${REG_BD_HALF_CLOSE}`;
|
||||
|
||||
class Heti {
|
||||
constructor (rootDocument, rootSelector) {
|
||||
constructor (rootSelector) {
|
||||
let supportLookBehind = true;
|
||||
|
||||
try {
|
||||
|
|
@ -695,7 +695,6 @@
|
|||
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');
|
||||
|
|
@ -723,8 +722,8 @@
|
|||
forceContext: this.funcForceContext,
|
||||
filterElements: this.funcFilterElements,
|
||||
};
|
||||
const getWrapper = (elementName, classList, text) => {
|
||||
const $$r = this.rootDocument.createElement(elementName);
|
||||
const getWrapper = function (elementName, classList, text) {
|
||||
const $$r = document.createElement(elementName);
|
||||
$$r.className = classList;
|
||||
$$r.textContent = text.trim();
|
||||
return $$r
|
||||
|
|
@ -768,19 +767,13 @@
|
|||
}
|
||||
|
||||
autoSpacing () {
|
||||
const callback = () => {
|
||||
const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector);
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const $$rootList = document.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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
497
_site/heti.css
497
_site/heti.css
File diff suppressed because it is too large
Load diff
330
_site/index.css
330
_site/index.css
|
|
@ -12,8 +12,10 @@
|
|||
* 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
|
||||
|
|
@ -48,9 +50,12 @@ 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 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -58,8 +63,10 @@ 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
|
||||
|
|
@ -76,9 +83,12 @@ 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 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -96,8 +106,10 @@ strong {
|
|||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
font-family: monospace, monospace;
|
||||
/* 1 */
|
||||
font-size: 1em;
|
||||
/* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -147,10 +159,14 @@ 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 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -158,7 +174,8 @@ textarea {
|
|||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
button,
|
||||
input { /* 1 */
|
||||
input {
|
||||
/* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
|
@ -167,7 +184,8 @@ input { /* 1 */
|
|||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
button,
|
||||
select { /* 1 */
|
||||
select {
|
||||
/* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
|
|
@ -175,9 +193,9 @@ select { /* 1 */
|
|||
* 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;
|
||||
}
|
||||
|
||||
|
|
@ -185,9 +203,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;
|
||||
}
|
||||
|
|
@ -196,9 +214,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;
|
||||
}
|
||||
|
||||
|
|
@ -216,12 +234,18 @@ 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 */
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -242,17 +266,19 @@ 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;
|
||||
}
|
||||
|
||||
|
|
@ -260,15 +286,17 @@ 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;
|
||||
}
|
||||
|
||||
|
|
@ -277,8 +305,10 @@ 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
|
||||
|
|
@ -330,74 +360,84 @@ 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, 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);
|
||||
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);
|
||||
}
|
||||
.container[data-bg-grid=grid-12] .heti--vertical {
|
||||
outline: 1px solid hsl(0deg, 0%, 93%);
|
||||
|
||||
.container[data-bg-grid="grid-12"] .heti--vertical {
|
||||
outline: 1px solid #ededed;
|
||||
background-size: 12px 100%;
|
||||
background-image: linear-gradient(to left, transparent 11px, hsl(0deg, 0%, 93%) 1px);
|
||||
background-image: linear-gradient(to left, transparent 11px, #ededed 1px);
|
||||
}
|
||||
.container[data-bg-grid=grid-24] {
|
||||
|
||||
.container[data-bg-grid="grid-24"] {
|
||||
background-size: 100% 24px;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
.container[data-bg-grid=grid-24] .heti--vertical {
|
||||
outline: 1px solid hsl(0deg, 0%, 93%);
|
||||
|
||||
.container[data-bg-grid="grid-24"] .heti--vertical {
|
||||
outline: 1px solid #ededed;
|
||||
background-size: 24px 100%;
|
||||
background-image: linear-gradient(to left, transparent 23px, hsl(0deg, 0%, 93%) 1px);
|
||||
background-image: linear-gradient(to left, transparent 23px, #ededed 1px);
|
||||
}
|
||||
[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"] {
|
||||
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] .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, hsl(0deg, 0%, 20%) 1px);
|
||||
background-image: linear-gradient(to left, transparent 11px, #333333 1px);
|
||||
}
|
||||
[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"] {
|
||||
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] .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, hsl(0deg, 0%, 20%) 1px);
|
||||
background-image: linear-gradient(to left, transparent 23px, #333333 1px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[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"] {
|
||||
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] .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, hsl(0deg, 0%, 20%) 1px);
|
||||
background-image: linear-gradient(to left, transparent 11px, #333333 1px);
|
||||
}
|
||||
[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"] {
|
||||
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] .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, hsl(0deg, 0%, 20%) 1px);
|
||||
background-image: linear-gradient(to left, transparent 23px, #333333 1px);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
.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-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-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);
|
||||
.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);
|
||||
}
|
||||
[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-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-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);
|
||||
[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);
|
||||
}
|
||||
}
|
||||
|
||||
@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, 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-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-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);
|
||||
[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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -431,6 +471,7 @@ 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%);
|
||||
|
|
@ -457,7 +498,8 @@ 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);
|
||||
|
|
@ -483,7 +525,8 @@ 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);
|
||||
|
|
@ -509,8 +552,9 @@ 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);
|
||||
|
|
@ -536,7 +580,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);
|
||||
|
|
@ -563,9 +607,11 @@ li {
|
|||
--text-highlight-color: hsl(0, 0%, 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.panel-list + .panel-list {
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
|
||||
.panel-list label {
|
||||
position: relative;
|
||||
display: block;
|
||||
|
|
@ -586,25 +632,31 @@ 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));
|
||||
|
|
@ -613,12 +665,14 @@ 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;
|
||||
|
|
@ -663,6 +717,7 @@ li {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
left: -12px;
|
||||
|
|
@ -674,12 +729,14 @@ li {
|
|||
padding-inline-start: 12px;
|
||||
padding-inline-end: 12px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 4px 16px hsla(0deg, 0%, 0%, 0.16);
|
||||
background-color: hsl(0deg, 0%, 100%);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.article .card {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.card > figcaption {
|
||||
display: inline-block;
|
||||
margin-block-start: 16px;
|
||||
|
|
@ -688,14 +745,14 @@ li {
|
|||
padding-inline-start: 0;
|
||||
padding-inline-end: 72px;
|
||||
line-height: 24px;
|
||||
border-block-start: 1px solid hsl(0deg, 0%, 93%);
|
||||
border-block-start: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.card__vertical-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 30em;
|
||||
border: 1px solid hsl(0deg, 0%, 93%);
|
||||
border: 1px solid #ededed;
|
||||
overflow: auto;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
|
@ -711,35 +768,39 @@ li {
|
|||
padding-inline-end: 32px;
|
||||
}
|
||||
}
|
||||
[data-darkmode=dark] .card {
|
||||
background-color: hsl(0deg, 0%, 16%);
|
||||
|
||||
[data-darkmode="dark"] .card {
|
||||
background-color: #292929;
|
||||
}
|
||||
[data-darkmode=dark] .card > figcaption {
|
||||
border-block-start: 1px solid hsl(0deg, 0%, 20%);
|
||||
|
||||
[data-darkmode="dark"] .card > figcaption {
|
||||
border-block-start: 1px solid #333333;
|
||||
}
|
||||
[data-darkmode=dark] .card .card__vertical-container {
|
||||
border-color: hsl(0deg, 0%, 20%);
|
||||
|
||||
[data-darkmode="dark"] .card .card__vertical-container {
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-darkmode=auto] .card {
|
||||
background-color: hsl(0deg, 0%, 16%);
|
||||
[data-darkmode="auto"] .card {
|
||||
background-color: #292929;
|
||||
}
|
||||
[data-darkmode=auto] .card > figcaption {
|
||||
border-block-start: 1px solid hsl(0deg, 0%, 20%);
|
||||
[data-darkmode="auto"] .card > figcaption {
|
||||
border-block-start: 1px solid #333333;
|
||||
}
|
||||
[data-darkmode=auto] .card .card__vertical-container {
|
||||
border-color: hsl(0deg, 0%, 20%);
|
||||
[data-darkmode="auto"] .card .card__vertical-container {
|
||||
border-color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
/** 基础样式 **/
|
||||
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: hsl(0deg, 0%, 100%);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: hsl(217deg, 89%, 61%);
|
||||
color: #4387f4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -756,6 +817,7 @@ a {
|
|||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.article__nav ol {
|
||||
margin-block-start: 24px;
|
||||
margin-block-end: 24px;
|
||||
|
|
@ -788,7 +850,7 @@ a {
|
|||
@media screen and (min-width: 640px) {
|
||||
body {
|
||||
min-width: 640px;
|
||||
background-color: hsl(0deg, 0%, 93%);
|
||||
background-color: #ededed;
|
||||
}
|
||||
.container {
|
||||
box-sizing: border-box;
|
||||
|
|
@ -804,14 +866,15 @@ a {
|
|||
padding-inline-start: 48px;
|
||||
padding-inline-end: 48px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 8px 32px hsla(0deg, 0%, 0%, 0.32);
|
||||
background-color: hsl(0deg, 0%, 100%);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
|
||||
background-color: white;
|
||||
}
|
||||
.section {
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.article__nav {
|
||||
position: relative;
|
||||
|
|
@ -826,7 +889,7 @@ a {
|
|||
padding-block-end: 12px;
|
||||
padding-inline-start: 8px;
|
||||
padding-inline-end: 8px;
|
||||
border: 1px solid hsl(0deg, 0%, 93%);
|
||||
border: 1px solid #ededed;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.article__nav ol {
|
||||
|
|
@ -837,38 +900,43 @@ a {
|
|||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
[data-darkmode=dark] body {
|
||||
background-color: hsl(0deg, 0%, 24%);
|
||||
|
||||
[data-darkmode="dark"] body {
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
[data-darkmode=dark] a {
|
||||
color: hsl(217deg, 49%, 61%);
|
||||
|
||||
[data-darkmode="dark"] a {
|
||||
color: #6b90cc;
|
||||
}
|
||||
[data-darkmode=dark] a:visited {
|
||||
color: hsl(217deg, 49%, 36%);
|
||||
|
||||
[data-darkmode="dark"] a:visited {
|
||||
color: #2f5189;
|
||||
}
|
||||
[data-darkmode=dark] .container {
|
||||
background-color: hsl(0deg, 0%, 16%);
|
||||
color: hsl(0deg, 0%, 64%);
|
||||
|
||||
[data-darkmode="dark"] .container {
|
||||
background-color: #292929;
|
||||
color: #a3a3a3;
|
||||
}
|
||||
[data-darkmode=dark] .article__nav {
|
||||
border-color: hsl(0deg, 0%, 20%);
|
||||
|
||||
[data-darkmode="dark"] .article__nav {
|
||||
border-color: #333333;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
[data-darkmode=auto] body {
|
||||
background-color: hsl(0deg, 0%, 24%);
|
||||
[data-darkmode="auto"] body {
|
||||
background-color: #3d3d3d;
|
||||
}
|
||||
[data-darkmode=auto] a {
|
||||
color: hsl(217deg, 49%, 61%);
|
||||
[data-darkmode="auto"] a {
|
||||
color: #6b90cc;
|
||||
}
|
||||
[data-darkmode=auto] a:visited {
|
||||
color: hsl(217deg, 49%, 36%);
|
||||
[data-darkmode="auto"] a:visited {
|
||||
color: #2f5189;
|
||||
}
|
||||
[data-darkmode=auto] .container {
|
||||
background-color: hsl(0deg, 0%, 16%);
|
||||
color: hsl(0deg, 0%, 64%);
|
||||
[data-darkmode="auto"] .container {
|
||||
background-color: #292929;
|
||||
color: #a3a3a3;
|
||||
}
|
||||
[data-darkmode=auto] .article__nav {
|
||||
border-color: hsl(0deg, 0%, 20%);
|
||||
[data-darkmode="auto"] .article__nav {
|
||||
border-color: #333333;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -622,7 +622,7 @@
|
|||
$$article.className = ['article', 'heti', e.target.value].join(' ')
|
||||
})
|
||||
|
||||
const heti = new Heti(document, '.article')
|
||||
const heti = new Heti('.article')
|
||||
heti.autoSpacing()
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -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 (rootDocument, rootSelector) {
|
||||
constructor (rootSelector) {
|
||||
let supportLookBehind = true
|
||||
|
||||
try {
|
||||
|
|
@ -46,7 +46,6 @@ 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')
|
||||
|
|
@ -74,8 +73,8 @@ class Heti {
|
|||
forceContext: this.funcForceContext,
|
||||
filterElements: this.funcFilterElements,
|
||||
}
|
||||
const getWrapper = (elementName, classList, text) => {
|
||||
const $$r = this.rootDocument.createElement(elementName)
|
||||
const getWrapper = function (elementName, classList, text) {
|
||||
const $$r = document.createElement(elementName)
|
||||
$$r.className = classList
|
||||
$$r.textContent = text.trim()
|
||||
return $$r
|
||||
|
|
@ -119,19 +118,13 @@ class Heti {
|
|||
}
|
||||
|
||||
autoSpacing () {
|
||||
const callback = () => {
|
||||
const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector)
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const $$rootList = document.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()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 定义块级元素样式
|
||||
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;
|
||||
|
|
@ -55,18 +73,37 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 非中文时不加间距
|
||||
letter-spacing: $letter-spacing-medium;
|
||||
@include non-cjk-block {
|
||||
letter-spacing: $letter-spacing-normal;
|
||||
}
|
||||
$format_pre_code: true !default;
|
||||
|
||||
a,
|
||||
abbr,
|
||||
code,
|
||||
heti-spacing,
|
||||
[lang="en-US"] {
|
||||
// There should be no leeter-spacing between English characters.
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,13 @@
|
|||
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;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,12 +54,6 @@ $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;
|
||||
|
|
@ -76,7 +70,7 @@ $line-height-size-h6: 24px !default;
|
|||
// 标准网格单位变量 Standard Length
|
||||
// 垂直方向标准单位 = 标准行高
|
||||
// 水平方向标准单位 = 标准字号
|
||||
$std-block-unit: 16px;
|
||||
$std-block-unit: $line-height-size-normal !default;
|
||||
$std-inline-unit: $font-size-normal !default;
|
||||
|
||||
// 示例：缩进单位 = 二倍文字宽度
|
||||
|
|
@ -103,7 +97,7 @@ $chinese-quote-presets: (
|
|||
)
|
||||
) !default;
|
||||
|
||||
$chinese-quote-set: "cn" !default;
|
||||
$chinese-quote-set: "common" !default;
|
||||
|
||||
// 栏 Columns
|
||||
// 分栏
|
||||
|
|
@ -114,7 +108,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: "normalize";
|
||||
$_css-reset-scheme: "reset";
|
||||
|
||||
// 混合 Mix-ins
|
||||
// Mix-in: Clear float
|
||||
|
|
|
|||
|
|
@ -1,55 +1,27 @@
|
|||
// Author: Sivan [sun.sivan@gmail.com], Pan RZ [c141028@gmail.com]
|
||||
// Author: Sivan [sun.sivan@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("Heiti SC Regular"),
|
||||
local("Microsoft YaHei"),
|
||||
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("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("Source Han Sans HK Regular"),
|
||||
local("Source Han Sans TW Regular"),
|
||||
local("Noto Sans CJK TC 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 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");
|
||||
}
|
||||
|
||||
|
|
@ -57,176 +29,69 @@
|
|||
@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("Heiti SC 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 SC Light"),
|
||||
local("Heiti TC Light"),
|
||||
local("Microsoft YaHei Light"),
|
||||
local("Microsoft Jhenghei Light"),
|
||||
local("Source Han Sans CN 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("Heiti SC Medium"),
|
||||
"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("Hiragino Sans GB W6"),
|
||||
local("PingFang TC Medium"),
|
||||
local("Heiti SC Medium"),
|
||||
local("Heiti TC Medium"),
|
||||
local("Microsoft YaHei Bold"),
|
||||
local("Microsoft Jhenghei Bold"),
|
||||
local("Source Han Sans CN 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("PingFang SC Semibold"),
|
||||
local("Heiti SC Medium"),
|
||||
"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 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"),
|
||||
local("Source Han Sans CN Heavy"),
|
||||
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 KR Heavy");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Heti Hei SC Black Fallback";
|
||||
font-weight: 800;
|
||||
src:
|
||||
local("Microsoft YaHei"),
|
||||
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("Droid Sans Fallback");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Author: Sivan [sun.sivan@gmail.com], Pan RZ [c141028@gmail.com]
|
||||
// Author: Sivan [sun.sivan@gmail.com]
|
||||
// Description: define font-face Heti Kai.
|
||||
|
||||
// 标准 Regular
|
||||
|
|
@ -7,8 +7,6 @@
|
|||
src:
|
||||
local("Kaiti SC Regular"),
|
||||
local("Kaiti TC Regular"),
|
||||
local("STKaiti"),
|
||||
local("Kaiti"),
|
||||
local("BiauKai");
|
||||
}
|
||||
|
||||
|
|
@ -21,22 +19,11 @@
|
|||
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("STKaiti"),
|
||||
local("Kaiti");
|
||||
local("Kaiti TC Black");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Author: Sivan [sun.sivan@gmail.com], Pan RZ [c141028@gmail.com]
|
||||
// Author: Sivan [sun.sivan@gmail.com]
|
||||
// Description: define font-face Heti Song.
|
||||
|
||||
// 标准 Regular
|
||||
|
|
@ -17,13 +17,8 @@
|
|||
src:
|
||||
local("Songti SC Light"),
|
||||
local("Songti TC Light"),
|
||||
"Heti Song Light Fallback";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Heti Song Light Fallback";
|
||||
font-weight: 200;
|
||||
src: local("SimSun");
|
||||
local("STSong"),
|
||||
local("SimSun");
|
||||
}
|
||||
|
||||
// 粗体 Bold
|
||||
|
|
@ -33,13 +28,7 @@
|
|||
src:
|
||||
local("Songti SC Bold"),
|
||||
local("Songti TC Bold"),
|
||||
"Heti Song Bold Fallback";
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Heti Song Bold Fallback";
|
||||
font-weight: 600;
|
||||
src: local("SimSun");
|
||||
local("SimSun");
|
||||
}
|
||||
|
||||
// 黑体 Black
|
||||
|
|
|
|||
|
|
@ -13,12 +13,9 @@
|
|||
#{$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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
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/
|
||||
|
|
|
|||
|
|
@ -16,13 +16,10 @@
|
|||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
6637
package-lock.json
generated
6637
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,10 +9,10 @@
|
|||
"lib"
|
||||
],
|
||||
"scripts": {
|
||||
"start": "sass -w --no-source-map _site/scss/:_site/",
|
||||
"start": "node-sass -w --output-style=expanded _site/scss/ -o _site/",
|
||||
"compile": "rollup -c -w",
|
||||
"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: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: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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue