From c49c8a8a91fce82c764beff45f11ec8e82d76080 Mon Sep 17 00:00:00 2001 From: Zhao Zuohong <1040110848@qq.com> Date: Sat, 31 Dec 2022 22:20:24 +0800 Subject: [PATCH] :boom: Tweak for moments theme --- _site/heti-addon.js | 17 ++++--- _site/heti.css | 115 ++++++++------------------------------------ _site/index.html | 2 +- js/heti-addon.js | 17 ++++--- lib/_base.scss | 52 -------------------- lib/_inline.scss | 7 --- lib/_variables.scss | 6 +-- lib/heti.scss | 1 - 8 files changed, 45 insertions(+), 172 deletions(-) diff --git a/_site/heti-addon.js b/_site/heti-addon.js index 03d53bf..f039050 100644 --- 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 @@ -768,14 +769,18 @@ autoSpacing () { const callback = () => { - const $$rootList = document.querySelectorAll(this.rootSelector); + const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector); for (let $$root of $$rootList) { this.spacingElement($$root); } }; - if (document.readyState === 'complete') setTimeout(callback); - else document.addEventListener('DOMContentLoaded', callback); + if (this.rootDocument == document) { + if (this.rootDocument.readyState === 'complete') setTimeout(callback); + else this.rootDocument.addEventListener('DOMContentLoaded', callback); + } else { + callback(); + } } } diff --git a/_site/heti.css b/_site/heti.css index 78d93bc..8dcf5a3 100644 --- a/_site/heti.css +++ b/_site/heti.css @@ -167,7 +167,6 @@ 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; @@ -190,25 +189,6 @@ .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; @@ -221,8 +201,8 @@ .heti hr { width: 30%; height: 1px; - margin-block-start: 48px; - margin-block-end: 47px; + margin-block-start: 32px; + margin-block-end: 31px; margin-inline-start: auto; margin-inline-end: auto; border: 0; @@ -237,45 +217,13 @@ } } .heti p { - margin-block-start: 12px; - margin-block-end: 24px; + margin-block-start: 8px; + margin-block-end: 16px; 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; } @@ -294,12 +242,12 @@ .heti h6 { position: relative; margin: 0; - margin-block-start: 24px; - margin-block-end: 12px; + margin-block-start: 16px; + margin-block-end: 8px; font-weight: 600; } .heti h1 { - margin-block-end: 24px; + margin-block-end: 16px; font-size: 32px; line-height: 48px; } @@ -340,7 +288,7 @@ .heti h3 + h4, .heti h4 + h5, .heti h5 + h6 { - margin-block-start: 12px; + margin-block-start: 8px; } .heti ul, .heti ol, @@ -359,30 +307,11 @@ 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: 12px; - margin-block-end: 24px; + margin-block-start: 8px; + margin-block-end: 16px; margin-inline-start: auto; margin-inline-end: auto; border-collapse: collapse; @@ -401,8 +330,8 @@ } .heti th, .heti td { - padding-block-start: 6px; - padding-block-end: 6px; + padding-block-start: 4px; + padding-block-end: 4px; padding-inline-start: 8px; padding-inline-end: 8px; border-width: 1px; @@ -444,12 +373,6 @@ .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; } @@ -493,7 +416,7 @@ } } .heti q { - quotes: "「" "」" "『" "』"; + quotes: "“" "”" "‘" "’"; } .heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) { quotes: initial; @@ -631,8 +554,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: 6px; - margin-block-end: 12px; + margin-block-start: 4px; + margin-block-end: 8px; text-indent: 2em; } .heti--columns-1 { @@ -689,7 +612,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"; @@ -772,8 +695,8 @@ text-emphasis: none; } .heti--annotation .heti-meta { - margin-block-start: 12px; - margin-block-end: 24px; + margin-block-start: 8px; + margin-block-end: 16px; } .heti .heti-meta { display: block; @@ -835,7 +758,7 @@ } } .heti .heti-fn ol { - margin-block-start: 12px; + margin-block-start: 8px; margin-block-end: 0; } .heti .heti-fn li:target { diff --git a/_site/index.html b/_site/index.html index 65ae70e..a8a6e94 100644 --- 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() diff --git a/js/heti-addon.js b/js/heti-addon.js index afd8276..aa8e584 100644 --- 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 @@ -119,14 +120,18 @@ class Heti { autoSpacing () { const callback = () => { - const $$rootList = document.querySelectorAll(this.rootSelector) + const $$rootList = this.rootDocument.querySelectorAll(this.rootSelector) for (let $$root of $$rootList) { this.spacingElement($$root) } } - if (document.readyState === 'complete') setTimeout(callback) - else document.addEventListener('DOMContentLoaded', callback) + if (this.rootDocument == document) { + if (this.rootDocument.readyState === 'complete') setTimeout(callback) + else this.rootDocument.addEventListener('DOMContentLoaded', callback) + } else { + callback() + } } } diff --git a/lib/_base.scss b/lib/_base.scss index c44d88b..f0c58e8 100644 --- 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,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; @include non-cjk-block { diff --git a/lib/_inline.scss b/lib/_inline.scss index 8e9e9b5..8bcaabd 100644 --- 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; diff --git a/lib/_variables.scss b/lib/_variables.scss index fe086c6..0d7fd1d 100644 --- a/lib/_variables.scss +++ b/lib/_variables.scss @@ -76,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; // 示例：缩进单位 = 二倍文字宽度 @@ -103,7 +103,7 @@ $chinese-quote-presets: ( ) ) !default; -$chinese-quote-set: "common" !default; +$chinese-quote-set: "cn" !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: "reset"; +$_css-reset-scheme: "normalize"; // 混合 Mix-ins // Mix-in: Clear float diff --git a/lib/heti.scss b/lib/heti.scss index 2d86c7e..be693b2 100644 --- 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/