zhao/heti
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: zhao:master
Branches Tags
zhao:master
zhao:gh-pages
zhao:chore/dart-sass
zhao:develop
..
compare: zhao:chore/dart-sass
Branches Tags
zhao:master
zhao:gh-pages
zhao:chore/dart-sass
zhao:develop

No commits in common. "master" and "chore/dart-sass" have entirely different histories.
master ... chore/dart

8 changed files with 172 additions and 45 deletions
Show stats Expand all files Collapse all files

17
_site/heti-addon.js
View file

@ -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
@ -769,18 +768,14 @@
autoSpacing () {
const callback = () => {
const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector);
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();
}
if (document.readyState === 'complete') setTimeout(callback);
else document.addEventListener('DOMContentLoaded', callback);
}
}

115
_site/heti.css
View file

@ -167,6 +167,7 @@
font-size: 16px;
font-weight: 400;
-webkit-font-smoothing: subpixel-antialiased;
line-height: 1.5;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
@ -189,6 +190,25 @@
.heti td > *:last-child {
margin-block-end: 0 !important;
}
.heti blockquote {
margin-block-start: 12px;
margin-block-end: 24px;
margin-inline-start: 32px;
margin-inline-end: 32px;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 16px;
padding-inline-end: 16px;
background-color: hsla(0deg, 0%, 0%, 0.054);
}
[data-darkmode=dark] .heti blockquote {
background-color: hsla(0deg, 0%, 100%, 0.054);
}
@media (prefers-color-scheme: dark) {
[data-darkmode=auto] .heti blockquote {
background-color: hsla(0deg, 0%, 100%, 0.054);
}
}
.heti figure {
display: block;
text-align: center;
@ -201,8 +221,8 @@
.heti hr {
width: 30%;
height: 1px;
margin-block-start: 32px;
margin-block-end: 31px;
margin-block-start: 48px;
margin-block-end: 47px;
margin-inline-start: auto;
margin-inline-end: auto;
border: 0;
@ -217,13 +237,45 @@
}
}
.heti p {
margin-block-start: 8px;
margin-block-end: 16px;
margin-block-start: 12px;
margin-block-end: 24px;
text-align: justify;
}
.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti p:not(:lang(zh)) {
text-align: start;
}
.heti pre {
margin-block-start: 12px;
margin-block-end: 12px;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 16px;
padding-inline-end: 16px;
overflow: auto;
font-family: "SFMono-Regular", consolas, "Liberation Mono", menlo, courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
white-space: pre;
word-wrap: normal;
border-radius: 4px;
background-color: hsla(0deg, 0%, 0%, 0.054);
}
[data-darkmode=dark] .heti pre {
background-color: hsla(0deg, 0%, 100%, 0.054);
}
@media (prefers-color-scheme: dark) {
[data-darkmode=auto] .heti pre {
background-color: hsla(0deg, 0%, 100%, 0.054);
}
}
.heti pre code {
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background-color: transparent;
color: inherit;
}
.heti:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti:not(:lang(zh)) {
letter-spacing: 0;
}
@ -242,12 +294,12 @@
.heti h6 {
position: relative;
margin: 0;
margin-block-start: 16px;
margin-block-end: 8px;
margin-block-start: 24px;
margin-block-end: 12px;
font-weight: 600;
}
.heti h1 {
margin-block-end: 16px;
margin-block-end: 24px;
font-size: 32px;
line-height: 48px;
}
@ -288,7 +340,7 @@
.heti h3 + h4,
.heti h4 + h5,
.heti h5 + h6 {
margin-block-start: 8px;
margin-block-start: 12px;
}
.heti ul,
.heti ol,
@ -307,11 +359,30 @@
margin-block-start: 0;
margin-block-end: 0;
}
.heti ul {
list-style-type: disc;
}
.heti ol {
list-style-type: decimal;
}
.heti ul ul,
.heti ol ul {
list-style-type: circle;
}
.heti ul ul ul,
.heti ul ol ul,
.heti ol ul ul,
.heti ol ol ul {
list-style-type: square;
}
.heti li {
list-style-type: unset;
}
.heti table {
box-sizing: border-box;
table-layout: fixed;
margin-block-start: 8px;
margin-block-end: 16px;
margin-block-start: 12px;
margin-block-end: 24px;
margin-inline-start: auto;
margin-inline-end: auto;
border-collapse: collapse;
@ -330,8 +401,8 @@
}
.heti th,
.heti td {
padding-block-start: 4px;
padding-block-end: 4px;
padding-block-start: 6px;
padding-block-end: 6px;
padding-inline-start: 8px;
padding-inline-end: 8px;
border-width: 1px;
@ -373,6 +444,12 @@
.heti strong {
font-weight: 600;
}
.heti code {
margin-inline-start: 0.25em;
margin-inline-end: 0.25em;
font-family: "SFMono-Regular", consolas, "Liberation Mono", menlo, courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 0.875em;
}
.heti dfn {
font-weight: 600;
}
@ -416,7 +493,7 @@
}
}
.heti q {
quotes: "“" "”" "‘" "’";
quotes: "「" "」" "『" "』";
}
.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) {
quotes: initial;
@ -554,8 +631,8 @@
column-gap: 2em;
}
.heti--columns-1 p, .heti--columns-2 p, .heti--columns-3 p, .heti--columns-4 p, .heti--columns-16em p, .heti--columns-20em p, .heti--columns-24em p, .heti--columns-28em p, .heti--columns-32em p, .heti--columns-36em p, .heti--columns-40em p, .heti--columns-44em p, .heti--columns-48em p, .heti comma p {
margin-block-start: 4px;
margin-block-end: 8px;
margin-block-start: 6px;
margin-block-end: 12px;
text-indent: 2em;
}
.heti--columns-1 {
@ -612,7 +689,7 @@
text-align: start;
}
.heti--vertical q {
quotes: "『" "』" "「" "」";
quotes: "「" "」" "『" "』";
}
.heti--ancient, .heti--poetry {
font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@ -695,8 +772,8 @@
text-emphasis: none;
}
.heti--annotation .heti-meta {
margin-block-start: 8px;
margin-block-end: 16px;
margin-block-start: 12px;
margin-block-end: 24px;
}
.heti .heti-meta {
display: block;
@ -758,7 +835,7 @@
}
}
.heti .heti-fn ol {
margin-block-start: 8px;
margin-block-start: 12px;
margin-block-end: 0;
}
.heti .heti-fn li:target {

2
_site/index.html
View file

@ -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>

17
js/heti-addon.js
View file

@ -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
@ -120,18 +119,14 @@ class Heti {
autoSpacing () {
const callback = () => {
const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector)
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()
}
if (document.readyState === 'complete') setTimeout(callback)
else document.addEventListener('DOMContentLoaded', callback)
}
}

52
lib/_base.scss
View file

@ -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,6 +73,40 @@
}
}
$format_pre_code: true !default;
@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;
}
}
}
// 非中文时不加间距
letter-spacing: $letter-spacing-medium;
@include non-cjk-block {

7
lib/_inline.scss
View file

@ -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;

6
lib/_variables.scss
View file

@ -76,7 +76,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 +103,7 @@ $chinese-quote-presets: (
)
) !default;
$chinese-quote-set: "cn" !default;
$chinese-quote-set: "common" !default;
// 栏 Columns
// 分栏
@ -114,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: "normalize";
$_css-reset-scheme: "reset";
// 混合 Mix-ins
// Mix-in: Clear float

1
lib/heti.scss
View file

@ -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/