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

💥 Tweak for moments theme

Browse source
This commit is contained in:
zhbaor 2022-12-31 22:20:24 +08:00
parent 38b0fd865d
commit c49c8a8a91
8 changed files with 45 additions and 172 deletions
Show stats 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 (rootSelector) { constructor (rootDocument, rootSelector) {
let supportLookBehind = true; let supportLookBehind = true;
try { try {
@ -695,6 +695,7 @@
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');
@ -722,8 +723,8 @@
forceContext: this.funcForceContext, forceContext: this.funcForceContext,
filterElements: this.funcFilterElements, filterElements: this.funcFilterElements,
}; };
const getWrapper = function (elementName, classList, text) { const getWrapper = (elementName, classList, text) => {
const $$r = document.createElement(elementName); const $$r = this.rootDocument.createElement(elementName);
$$r.className = classList; $$r.className = classList;
$$r.textContent = text.trim(); $$r.textContent = text.trim();
return $$r return $$r
@ -768,14 +769,18 @@
autoSpacing () { autoSpacing () {
const callback = () => { const callback = () => {
const $$rootList = document.querySelectorAll(this.rootSelector); const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector);
for (let $$root of $$rootList) { for (let $$root of $$rootList) {
this.spacingElement($$root); this.spacingElement($$root);
} }
}; };
if (document.readyState === 'complete') setTimeout(callback); if (this.rootDocument == document) {
else document.addEventListener('DOMContentLoaded', callback); if (this.rootDocument.readyState === 'complete') setTimeout(callback);
else this.rootDocument.addEventListener('DOMContentLoaded', callback);
} else {
callback();
}
} }
} }

115
_site/heti.css
View file

@ -167,7 +167,6 @@
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;
@ -190,25 +189,6 @@
.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;
@ -221,8 +201,8 @@
.heti hr { .heti hr {
width: 30%; width: 30%;
height: 1px; height: 1px;
margin-block-start: 48px; margin-block-start: 32px;
margin-block-end: 47px; margin-block-end: 31px;
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
border: 0; border: 0;
@ -237,45 +217,13 @@
} }
} }
.heti p { .heti p {
margin-block-start: 12px; margin-block-start: 8px;
margin-block-end: 24px; margin-block-end: 16px;
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;
} }
@ -294,12 +242,12 @@
.heti h6 { .heti h6 {
position: relative; position: relative;
margin: 0; margin: 0;
margin-block-start: 24px; margin-block-start: 16px;
margin-block-end: 12px; margin-block-end: 8px;
font-weight: 600; font-weight: 600;
} }
.heti h1 { .heti h1 {
margin-block-end: 24px; margin-block-end: 16px;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
} }
@ -340,7 +288,7 @@
.heti h3 + h4, .heti h3 + h4,
.heti h4 + h5, .heti h4 + h5,
.heti h5 + h6 { .heti h5 + h6 {
margin-block-start: 12px; margin-block-start: 8px;
} }
.heti ul, .heti ul,
.heti ol, .heti ol,
@ -359,30 +307,11 @@
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: 12px; margin-block-start: 8px;
margin-block-end: 24px; margin-block-end: 16px;
margin-inline-start: auto; margin-inline-start: auto;
margin-inline-end: auto; margin-inline-end: auto;
border-collapse: collapse; border-collapse: collapse;
@ -401,8 +330,8 @@
} }
.heti th, .heti th,
.heti td { .heti td {
padding-block-start: 6px; padding-block-start: 4px;
padding-block-end: 6px; padding-block-end: 4px;
padding-inline-start: 8px; padding-inline-start: 8px;
padding-inline-end: 8px; padding-inline-end: 8px;
border-width: 1px; border-width: 1px;
@ -444,12 +373,6 @@
.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;
} }
@ -493,7 +416,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;
@ -631,8 +554,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: 6px; margin-block-start: 4px;
margin-block-end: 12px; margin-block-end: 8px;
text-indent: 2em; text-indent: 2em;
} }
.heti--columns-1 { .heti--columns-1 {
@ -689,7 +612,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";
@ -772,8 +695,8 @@
text-emphasis: none; text-emphasis: none;
} }
.heti--annotation .heti-meta { .heti--annotation .heti-meta {
margin-block-start: 12px; margin-block-start: 8px;
margin-block-end: 24px; margin-block-end: 16px;
} }
.heti .heti-meta { .heti .heti-meta {
display: block; display: block;
@ -835,7 +758,7 @@
} }
} }
.heti .heti-fn ol { .heti .heti-fn ol {
margin-block-start: 12px; margin-block-start: 8px;
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('.article') const heti = new Heti(document, '.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 (rootSelector) { constructor (rootDocument, rootSelector) {
let supportLookBehind = true let supportLookBehind = true
try { try {
@ -46,6 +46,7 @@ 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')
@ -73,8 +74,8 @@ class Heti {
forceContext: this.funcForceContext, forceContext: this.funcForceContext,
filterElements: this.funcFilterElements, filterElements: this.funcFilterElements,
} }
const getWrapper = function (elementName, classList, text) { const getWrapper = (elementName, classList, text) => {
const $$r = document.createElement(elementName) const $$r = this.rootDocument.createElement(elementName)
$$r.className = classList $$r.className = classList
$$r.textContent = text.trim() $$r.textContent = text.trim()
return $$r return $$r
@ -119,14 +120,18 @@ class Heti {
autoSpacing () { autoSpacing () {
const callback = () => { const callback = () => {
const $$rootList = document.querySelectorAll(this.rootSelector) const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector)
for (let $$root of $$rootList) { for (let $$root of $$rootList) {
this.spacingElement($$root) this.spacingElement($$root)
} }
} }
if (document.readyState === 'complete') setTimeout(callback) if (this.rootDocument == document) {
else document.addEventListener('DOMContentLoaded', callback) if (this.rootDocument.readyState === 'complete') setTimeout(callback)
else this.rootDocument.addEventListener('DOMContentLoaded', callback)
} else {
callback()
}
} }
} }

52
lib/_base.scss
View file

@ -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 { figure {
display: block; display: block;
text-align: center; text-align: center;
@ -73,40 +55,6 @@
} }
} }
$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,13 +25,6 @@
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: $line-height-size-normal !default; $std-block-unit: 16px;
$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: "common" !default; $chinese-quote-set: "cn" !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: "reset"; $_css-reset-scheme: "normalize";
// 混合 Mix-ins // 混合 Mix-ins
// Mix-in: Clear float // Mix-in: Clear float

1
lib/heti.scss
View file

@ -27,7 +27,6 @@
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/