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;
|
||||
|
|
|
|||
19
index.html
19
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>
|
||||
|
|
@ -70,16 +70,15 @@
|
|||
<ol>
|
||||
<li>
|
||||
在页面的<code><head></code>标签中引入<code>heti.css</code>文件：
|
||||
<pre><link rel="stylesheet" href="./heti.css"></pre>
|
||||
<pre><code><link rel="stylesheet" href="./heti.css"></code></pre>
|
||||
</li>
|
||||
<li>
|
||||
在要作用的容器元素上增加<code>class="heti"</code>的类名即可：
|
||||
<pre>
|
||||
<article class="entry heti">
|
||||
<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>
|
||||
</ol>
|
||||
|
|
@ -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">
|
||||
|
|
@ -475,7 +474,7 @@
|
|||
<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-02">BEM：由Yandex公司创造的命名方ttps://en.bem.info/</li>
|
||||
<li id="fn-03">《中文排版需求》：https://w3c.github.io/clreq/</li>
|
||||
</ol>
|
||||
</footer>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue