Updates
This commit is contained in:
Sivan
parent
0d1d5bb0ee
commit
ddd5664c17
3 changed files with 25 additions and 655 deletions
631
heti.css
631
heti.css
File diff suppressed because one or more lines are too long
10
index.css
10
index.css
|
|
@ -252,14 +252,6 @@ a {
|
|||
border-block-start: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/*
|
||||
heti-jiya {
|
||||
display: inline;
|
||||
width: 0;
|
||||
margin-inline-start: -0.5em;
|
||||
}
|
||||
*/
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
body {
|
||||
min-width: 900px;
|
||||
|
|
@ -327,7 +319,7 @@ heti-jiya {
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1080px) {
|
||||
@media screen and (min-width: 1000px) {
|
||||
.article__toc {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
|
|||
39
index.html
39
index.html
|
|
@ -47,7 +47,7 @@
|
|||
</nav>
|
||||
|
||||
<h2 id="intro">介绍<a class="anchor" href="#intro">#</a></h2>
|
||||
<p><dfn>赫蹏</dfn>（<code>hètí</code>）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。由于它不同于传统的网页样式重置，而是专注于<em>正文区域</em>的样式增强，因此可以很好的与常见的 CSS 样式重置方案共存。它的主要功能有：</p>
|
||||
<p><dfn>赫蹏</dfn>（<code>hètí</code>）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。由于它不同于传统的网页样式重置，而是专注于<em>正文区域</em>的样式增强，因此可以很好的与常见的CSS样式重置方案共存。</p>
|
||||
<ul>
|
||||
<li>全标签样式统一；</li>
|
||||
<li>贴合网格的排版；</li>
|
||||
|
|
@ -69,19 +69,18 @@
|
|||
<p>赫蹏的使用方法很简单，只需要引入样式文件并设定作用范围即可：</p>
|
||||
<ol>
|
||||
<li>
|
||||
在页面的 <code><head></code> 标签中引入 <code>heti.css</code> 文件：
|
||||
<pre><link rel="stylesheet" href="./heti.css"></pre>
|
||||
在页面的<code><head></code>标签中引入<code>heti.css</code>文件：
|
||||
<pre><code><link rel="stylesheet" href="./heti.css"></code></pre>
|
||||
</li>
|
||||
<li>
|
||||
在要作用的容器元素上增加 <code>class="heti"</code> 的类名即可：
|
||||
<pre>
|
||||
<article class="entry heti">
|
||||
在要作用的容器元素上增加<code>class="heti"</code>的类名即可：
|
||||
<pre><code><article class="entry heti">
|
||||
<h1>我的世界观</h1>
|
||||
<p>有钱人的生活就是这么朴实无华，且枯燥</p>
|
||||
……
|
||||
</article></pre>
|
||||
</article></code></pre>
|
||||
</li>
|
||||
<li>不建议将样式作用在根标签（比如 <code><body></code> 或 <code><div class="container"></code>）上，除非你的页面<u title="就像本页面一样">通篇都是文章的一部分</u>。</li>
|
||||
<li>不建议将样式作用在根标签（比如<code><body></code>或<code><div class="container"></code>）上，除非你的页面<u title="就像本页面一样">通篇都是文章的一部分</u>。</li>
|
||||
</ol>
|
||||
|
||||
<hr>
|
||||
|
|
@ -93,7 +92,7 @@
|
|||
<section class="demo__main">
|
||||
<div class="heti heti--ancient">
|
||||
<h1>出师表</h1>
|
||||
<p class="heti-meta heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年~234年10月8日）</p>
|
||||
<p class="heti-meta heti-small">作者：<abbr title="字孔明">諸葛亮</abbr>（181年～234年10月8日）</p>
|
||||
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
|
||||
<p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理；不宜偏私，使内外异法也。</p>
|
||||
<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下：愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
|
||||
|
|
@ -137,7 +136,7 @@
|
|||
<section class="demo__main">
|
||||
<div class="heti heti--ancient heti--annotation">
|
||||
<h2>庖丁解牛</h2>
|
||||
<p class="heti-meta heti-small">作者：<abbr title="庄子">庄周</abbr>（公元前369~公元前286年）</p>
|
||||
<p class="heti-meta heti-small">作者：<abbr title="庄子">庄周</abbr>（公元前369～公元前286年）</p>
|
||||
<p>吾生也有涯，而知也无涯。以有涯随无涯，殆已！已而为知者，殆而已矣！为善无近名，为恶无近刑。缘督以为经，可以保身，可以全生，可以养亲，可以尽年。</p>
|
||||
<p><u title="名丁的厨工。先秦古书往往以职业放在人名前"><ruby><rb>庖</rb><rp>(</rp><rt>páo</rt><rp>)</rp></ruby>丁</u>为文惠君解牛，手之所触，肩之所倚，足之所履，膝之所<u title="支撑，接触"><ruby><rb>踦</rb><rp>(</rp><rt>yǐ</rt><rp>)</rp></ruby></u>，<u title="砉然：砉，又读xū，象声词。砉然，皮骨相离的声音"><ruby><rb>砉</rb><rp>(</rp><rt>huā</rt><rp>)</rp></ruby>然</u><ruby><rb>向</rb><rp>(</rp><rt>xiǎng</rt><rp>)</rp></ruby>然，奏刀<u title="騞然：象声词，形容比砉然更大的进刀解牛声"><ruby><rb>騞</rb><rp>(</rp><rt>huō</rt><rp>)</rp></ruby>然</u>，莫不中音。合于《桑林》之舞，乃中《经首》之会。</p>
|
||||
<p>文惠君曰：「嘻，善哉！技<u title="通「盍」，何，怎样"><ruby><rb>盖</rb><rp>(</rp><rt>hé</rt><rp>)</rp></ruby></u>至此乎？」</p>
|
||||
|
|
@ -164,7 +163,7 @@
|
|||
<p>赫蹏预置了多种多栏布局类，可以按栏数或栏宽进行设置。</p>
|
||||
<details>
|
||||
<summary>查看使用说明</summary>
|
||||
<p>为容器元素添加名为 <code>heti--columns-2</code> 的 class 即可实现三栏排版。</p>
|
||||
<p>为容器元素添加名为<code>heti--columns-2</code>class即可实现三栏排版。</p>
|
||||
<pre><code><div class="heti heti--columns-2"></div></code></pre>
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -209,7 +208,7 @@
|
|||
<p>赫蹏预置了传统的垂直方向排版，同样贴合栅格。</p>
|
||||
<details>
|
||||
<summary>查看使用说明</summary>
|
||||
<p>为容器元素添加名为 <code>heti--vertical</code> 的 class 即可实现垂直布局：</p>
|
||||
<p>为容器元素添加名为<code>heti--vertical</code>class即可实现垂直布局：</p>
|
||||
<pre><code><div class="heti heti--vertical"></div></code></pre>
|
||||
</details>
|
||||
<figure class="card card--vertical">
|
||||
|
|
@ -234,9 +233,9 @@
|
|||
<h2 id="guidelines">排版原则<a class="anchor" href="#guidelines">#</a></h2>
|
||||
<h3>核心</h3>
|
||||
<p>以美化中文方块字排版为目标，假定作用范围是网页中的文章区域（含标题、正文、元信息等），不包含网页导航、表单、侧边栏等区域（它们也不需要这套格式排版）。</p>
|
||||
<p>使用<code>heti.css</code>时建议搭配良好的中文书写习惯，即：使用正确的 HTML 标签、正确的引号、中文全角标点等。使用 Markdown 书写文章将助你一臂之力。</p>
|
||||
<p>使用<code>heti.css</code>时建议搭配良好的中文书写习惯，即：使用正确的HTML标签、正确的引号、中文全角标点等。使用Markdown书写文章将助你一臂之力。</p>
|
||||
<h3>字号</h3>
|
||||
<p><code>heti.css</code> 采用 16px 作为默认字号。在文字较大时（作用于标题等情况），会适当地增加字间距以便获得更好地可读性。</p>
|
||||
<p><code>heti.css</code> 采用16px作为默认字号。在文字较大时（作用于标题等情况），会适当地增加字间距以便获得更好地可读性。</p>
|
||||
<h3>字体</h3>
|
||||
<p>参考《中文排版需求<sup><a href="#fn-03">[3]</a></sup>》中描述的四种常见书籍排版字体：宋体、楷体、黑体、仿宋。赫蹏提供黑体、宋体和<u title="以正文宋体、标题楷体构成的搭配">传统</u>三种字体风格，前两者分别对应无衬线、衬线字体族。</p>
|
||||
<details>
|
||||
|
|
@ -366,7 +365,7 @@
|
|||
|
||||
<h2 id="appendix">附录<a class="anchor" href="#appendix">#</a></h2>
|
||||
<h3 id="compatibility">兼容性<a class="anchor" href="#compatibility">#</a></h3>
|
||||
<p>赫蹏在间距、边框、位置属性上采用了 Logical properties，在所有现代浏览器上表现良好。</p>
|
||||
<p>赫蹏在间距、边框、位置属性上采用了Logical properties，在所有现代浏览器上表现良好。</p>
|
||||
<details>
|
||||
<summary>查看兼容性列表</summary>
|
||||
<table>
|
||||
|
|
@ -427,8 +426,8 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<td>文本更新</td>
|
||||
<td><code>最后我们决定把「蹏」字念为 <s>dí</s> tí。</code></td>
|
||||
<td>最后我们决定把「蹏」字念为 <s>dí</s> tí。</td>
|
||||
<td><code>最后我们决定把「蹏」字念为<s>dí</s> tí。</code></td>
|
||||
<td>最后我们决定把「蹏」字念为<s>dí</s>tí。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>引号</td>
|
||||
|
|
@ -459,7 +458,7 @@
|
|||
</details>
|
||||
|
||||
<h3 id="license">开源协议<a class="anchor" href="#tags">#</a></h3>
|
||||
<p>「赫蹏」遵循 MIT 协议开源。</p>
|
||||
<p>「赫蹏」遵循MIT协议开源。</p>
|
||||
|
||||
<hr>
|
||||
|
||||
|
|
@ -474,8 +473,8 @@
|
|||
</article>
|
||||
<footer class="fn">
|
||||
<ol class="fn__list">
|
||||
<li id="fn-01">CSS Reset：指代类似 Eric Meyer's Reset CSS 的样式重置方案</li>
|
||||
<li id="fn-02">BEM：由 Yandex 公司创造的命名方法 https://en.bem.info/</li>
|
||||
<li id="fn-01">CSS Reset：指代类似Eric Meyer's Reset CSS的样式重置方案</li>
|
||||
<li id="fn-02">BEM：由Yandex公司创造的命名方ttps://en.bem.info/</li>
|
||||
<li id="fn-03">《中文排版需求》：https://w3c.github.io/clreq/</li>
|
||||
</ol>
|
||||
</footer>
|
||||
|
|
|
|||
Loading…
Reference in a new issue