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
Download patch file Download diff file 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}`; const REG_BD_HALF_START = `${REG_BD_HALF_OPEN}${REG_BD_HALF_CLOSE}`;
class Heti { class Heti {
constructor (rootDocument, rootSelector) { constructor (rootSelector) {
let supportLookBehind = true; let supportLookBehind = true;
try { try {
@ -695,7 +695,6 @@
supportLookBehind = false; supportLookBehind = false;
} }
this.rootDocument = rootDocument;
this.rootSelector = rootSelector || '.heti'; this.rootSelector = rootSelector || '.heti';
this.REG_FULL = new RegExp(supportLookBehind ? REG_CJK_FULL : REG_CJK_FULL_WITHOUT_LOOKBEHIND, 'g'); this.REG_FULL = new RegExp(supportLookBehind ? REG_CJK_FULL : REG_CJK_FULL_WITHOUT_LOOKBEHIND, 'g');
this.REG_START = new RegExp(REG_CJK_START, 'g'); this.REG_START = new RegExp(REG_CJK_START, 'g');
@ -723,8 +722,8 @@
forceContext: this.funcForceContext, forceContext: this.funcForceContext,
filterElements: this.funcFilterElements, filterElements: this.funcFilterElements,
}; };
const getWrapper = (elementName, classList, text) => { const getWrapper = function (elementName, classList, text) {
const $$r = this.rootDocument.createElement(elementName); const $$r = document.createElement(elementName);
$$r.className = classList; $$r.className = classList;
$$r.textContent = text.trim(); $$r.textContent = text.trim();
return $$r return $$r
@ -769,18 +768,14 @@
autoSpacing () { autoSpacing () {
const callback = () => { const callback = () => {
const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector); const $$rootList = document.querySelectorAll(this.rootSelector);
for (let $$root of $$rootList) { for (let $$root of $$rootList) {
this.spacingElement($$root); this.spacingElement($$root);
} }
}; };
if (this.rootDocument == document) { if (document.readyState === 'complete') setTimeout(callback);
if (this.rootDocument.readyState === 'complete') setTimeout(callback); else document.addEventListener('DOMContentLoaded', callback);
else this.rootDocument.addEventListener('DOMContentLoaded', callback);
} else {
callback();
}
} }
} }

115
_site/heti.css
View file

@ -167,6 +167,7 @@
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
line-height: 1.5;
overflow-wrap: break-word; overflow-wrap: break-word;
word-wrap: break-word; word-wrap: break-word;
hyphens: auto; hyphens: auto;
@ -189,6 +190,25 @@
.heti td > *:last-child { .heti td > *:last-child {
margin-block-end: 0 !important; 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 { .heti figure {
display: block; display: block;
text-align: center; text-align: center;
@ -201,8 +221,8 @@
.heti hr { .heti hr {
width: 30%; width: 30%;
height: 1px; height: 1px;
margin-block-start: 32px; margin-block-start: 48px;
margin-block-end: 31px; margin-block-end: 47px;
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
border: 0; border: 0;
@ -217,13 +237,45 @@
} }
} }
.heti p { .heti p {
margin-block-start: 8px; margin-block-start: 12px;
margin-block-end: 16px; margin-block-end: 24px;
text-align: justify; text-align: justify;
} }
.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti p:not(:lang(zh)) { .heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti p:not(:lang(zh)) {
text-align: start; 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)) { .heti:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti:not(:lang(zh)) {
letter-spacing: 0; letter-spacing: 0;
} }
@ -242,12 +294,12 @@
.heti h6 { .heti h6 {
position: relative; position: relative;
margin: 0; margin: 0;
margin-block-start: 16px; margin-block-start: 24px;
margin-block-end: 8px; margin-block-end: 12px;
font-weight: 600; font-weight: 600;
} }
.heti h1 { .heti h1 {
margin-block-end: 16px; margin-block-end: 24px;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
} }
@ -288,7 +340,7 @@
.heti h3 + h4, .heti h3 + h4,
.heti h4 + h5, .heti h4 + h5,
.heti h5 + h6 { .heti h5 + h6 {
margin-block-start: 8px; margin-block-start: 12px;
} }
.heti ul, .heti ul,
.heti ol, .heti ol,
@ -307,11 +359,30 @@
margin-block-start: 0; margin-block-start: 0;
margin-block-end: 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 { .heti table {
box-sizing: border-box; box-sizing: border-box;
table-layout: fixed; table-layout: fixed;
margin-block-start: 8px; margin-block-start: 12px;
margin-block-end: 16px; margin-block-end: 24px;
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
border-collapse: collapse; border-collapse: collapse;
@ -330,8 +401,8 @@
} }
.heti th, .heti th,
.heti td { .heti td {
padding-block-start: 4px; padding-block-start: 6px;
padding-block-end: 4px; padding-block-end: 6px;
padding-inline-start: 8px; padding-inline-start: 8px;
padding-inline-end: 8px; padding-inline-end: 8px;
border-width: 1px; border-width: 1px;
@ -373,6 +444,12 @@
.heti strong { .heti strong {
font-weight: 600; 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 { .heti dfn {
font-weight: 600; font-weight: 600;
} }
@ -416,7 +493,7 @@
} }
} }
.heti q { .heti q {
quotes: "“" "”" "‘" "’"; quotes: "「" "」" "『" "』";
} }
.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) { .heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) {
quotes: initial; quotes: initial;
@ -554,8 +631,8 @@
column-gap: 2em; 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 { .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-start: 6px;
margin-block-end: 8px; margin-block-end: 12px;
text-indent: 2em; text-indent: 2em;
} }
.heti--columns-1 { .heti--columns-1 {
@ -612,7 +689,7 @@
text-align: start; text-align: start;
} }
.heti--vertical q { .heti--vertical q {
quotes: "『" "』" "「" "」"; quotes: "「" "」" "『" "』";
} }
.heti--ancient, .heti--poetry { .heti--ancient, .heti--poetry {
font-family: "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 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; text-emphasis: none;
} }
.heti--annotation .heti-meta { .heti--annotation .heti-meta {
margin-block-start: 8px; margin-block-start: 12px;
margin-block-end: 16px; margin-block-end: 24px;
} }
.heti .heti-meta { .heti .heti-meta {
display: block; display: block;
@ -758,7 +835,7 @@
} }
} }
.heti .heti-fn ol { .heti .heti-fn ol {
margin-block-start: 8px; margin-block-start: 12px;
margin-block-end: 0; margin-block-end: 0;
} }
.heti .heti-fn li:target { .heti .heti-fn li:target {

2
_site/index.html
View file

@ -622,7 +622,7 @@
$$article.className = ['article', 'heti', e.target.value].join(' ') $$article.className = ['article', 'heti', e.target.value].join(' ')
}) })
const heti = new Heti(document, '.article') const heti = new Heti('.article')
heti.autoSpacing() heti.autoSpacing()
</script> </script>
</body> </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}` const REG_BD_HALF_START = `${REG_BD_HALF_OPEN}${REG_BD_HALF_CLOSE}`
class Heti { class Heti {
constructor (rootDocument, rootSelector) { constructor (rootSelector) {
let supportLookBehind = true let supportLookBehind = true
try { try {
@ -46,7 +46,6 @@ class Heti {
supportLookBehind = false supportLookBehind = false
} }
this.rootDocument = rootDocument
this.rootSelector = rootSelector || '.heti' this.rootSelector = rootSelector || '.heti'
this.REG_FULL = new RegExp(supportLookBehind ? REG_CJK_FULL : REG_CJK_FULL_WITHOUT_LOOKBEHIND, 'g') this.REG_FULL = new RegExp(supportLookBehind ? REG_CJK_FULL : REG_CJK_FULL_WITHOUT_LOOKBEHIND, 'g')
this.REG_START = new RegExp(REG_CJK_START, 'g') this.REG_START = new RegExp(REG_CJK_START, 'g')
@ -74,8 +73,8 @@ class Heti {
forceContext: this.funcForceContext, forceContext: this.funcForceContext,
filterElements: this.funcFilterElements, filterElements: this.funcFilterElements,
} }
const getWrapper = (elementName, classList, text) => { const getWrapper = function (elementName, classList, text) {
const $$r = this.rootDocument.createElement(elementName) const $$r = document.createElement(elementName)
$$r.className = classList $$r.className = classList
$$r.textContent = text.trim() $$r.textContent = text.trim()
return $$r return $$r
@ -120,18 +119,14 @@ class Heti {
autoSpacing () { autoSpacing () {
const callback = () => { const callback = () => {
const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector) const $$rootList = document.querySelectorAll(this.rootSelector)
for (let $$root of $$rootList) { for (let $$root of $$rootList) {
this.spacingElement($$root) this.spacingElement($$root)
} }
} }
if (this.rootDocument == document) { if (document.readyState === 'complete') setTimeout(callback)
if (this.rootDocument.readyState === 'complete') setTimeout(callback) else document.addEventListener('DOMContentLoaded', callback)
else this.rootDocument.addEventListener('DOMContentLoaded', callback)
} else {
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 { figure {
display: block; display: block;
text-align: center; 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; letter-spacing: $letter-spacing-medium;
@include non-cjk-block { @include non-cjk-block {

7
lib/_inline.scss
View file

@ -25,6 +25,13 @@
font-weight: $font-weight-bold; 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 { dfn {
font-weight: $font-weight-bold; font-weight: $font-weight-bold;

6
lib/_variables.scss
View file

@ -76,7 +76,7 @@ $line-height-size-h6: 24px !default;
// 标准网格单位变量 Standard Length // 标准网格单位变量 Standard Length
// 垂直方向标准单位 = 标准行高 // 垂直方向标准单位 = 标准行高
// 水平方向标准单位 = 标准字号 // 水平方向标准单位 = 标准字号
$std-block-unit: 16px; $std-block-unit: $line-height-size-normal !default;
$std-inline-unit: $font-size-normal !default; $std-inline-unit: $font-size-normal !default;
// 示例：缩进单位 = 二倍文字宽度 // 示例：缩进单位 = 二倍文字宽度
@ -103,7 +103,7 @@ $chinese-quote-presets: (
) )
) !default; ) !default;
$chinese-quote-set: "cn" !default; $chinese-quote-set: "common" !default;
// 栏 Columns // 栏 Columns
// 分栏 // 分栏
@ -114,7 +114,7 @@ $column-width-list: (16em, 20em, 24em, 28em, 32em, 36em, 40em, 44em, 48em) !defa
/// 预设重置方案 /// 预设重置方案
/// `reset`：假定 Eric Meyer 的 CSS Reset 或其它流行的 Reset /// `reset`：假定 Eric Meyer 的 CSS Reset 或其它流行的 Reset
/// `normalize`：指定为 normalize.css /// `normalize`：指定为 normalize.css
$_css-reset-scheme: "normalize"; $_css-reset-scheme: "reset";
// 混合 Mix-ins // 混合 Mix-ins
// Mix-in: Clear float // Mix-in: Clear float

1
lib/heti.scss
View file

@ -27,6 +27,7 @@
font-size: $font-size-normal; font-size: $font-size-normal;
font-weight: $font-weight-normal; font-weight: $font-weight-normal;
-webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: subpixel-antialiased;
line-height: $line-height-normal;
// 针对混合英文段落，采取按词折行，长单词通过连词符段行 // 针对混合英文段落，采取按词折行，长单词通过连词符段行
// https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/ // https://justmarkup.com/articles/2015-07-31-dealing-with-long-words-in-css/