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

Updates

Browse source
This commit is contained in:
Sivan 2020-02-18 20:07:04 +08:00
parent 8555840ba3
commit 563b077d1d
3 changed files with 21 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
heti.css
View file

File diff suppressed because one or more lines are too long

60
index.css
View file

@ -45,60 +45,35 @@ a {
.article {
margin-inline-start: auto;
margin-inline-end: auto;
padding-block-end: 24px;
outline: 1px solid transparent;
}
.article[data-bg-grid="grid-24"] {
background-size: 100% 24px;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #f8f8f8 1px, rgba(255, 255, 255, 0) 33px),
linear-gradient(rgba(255, 255, 255, 0) 23px, #f8f8f8 1px);
outline-color: #eee;
}
.article[data-debug-mode][data-bg-grid="grid-24"],
.article[data-bg-grid="grid-24"]:hover {
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
linear-gradient(rgba(255, 255, 255, 0) 23px, #eee 1px);
outline-color: #eee;
}
.article[data-bg-grid="grid-24"] .heti--vertical {
background-size: 24px 100%;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 23px, #f8f8f8 1px);
outline: 1px solid #eee;
}
.article[data-debug-mode][data-bg-grid="grid-24"] .heti--vertical,
.article[data-bg-grid="grid-24"]:hover .heti--vertical {
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 23px, #eee 1px);
outline: 1px solid #eee;
}
.article[data-bg-grid="grid-12"] {
background-size: 100% 12px;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #f8f8f8 1px, rgba(255, 255, 255, 0) 33px),
linear-gradient(rgba(255, 255, 255, 0) 11px, #f8f8f8 12px);
outline-color: #eee;
}
.article[data-debug-mode][data-bg-grid="grid-12"],
.article[data-bg-grid="grid-12"]:hover {
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0) 31px, #eee 1px, rgba(255, 255, 255, 0) 33px),
linear-gradient(rgba(255, 255, 255, 0) 11px, #eee 12px);
outline-color: #eee;
}
.article[data-bg-grid="grid-12"] .heti--vertical {
background-size: 12px 100%;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 11px, #f8f8f8 1px);
outline: 1px solid #eee;
}
.article[data-debug-mode][data-bg-grid="grid-12"] .heti--vertical,
.article[data-bg-grid="grid-12"]:hover .heti--vertical {
background-image: linear-gradient(to left, transparent 11px, #eee 1px);
outline: 1px solid #eee;
}
.anchor {
@ -111,29 +86,6 @@ a {
margin-block-end: 24px;
}
/** 页脚样式 **/
.fn {
position: relative;
max-width: 42em;
margin-inline-start: auto;
margin-inline-end: auto;
padding-block-start: 4px;
border-block-start: 1px solid #ccc;
}
.fn__list {
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 2em;
list-style-type: decimal;
font-size: 14px;
line-height: 24px;
}
.fn__list li {
list-style-type: unset;
}
/** 控制栏样式 **/
.panel {
position: fixed;
@ -328,8 +280,6 @@ a {
box-sizing: border-box;
left: -20%;
width: 140%;
margin-block-start: 24px;
margin-block-end: 72px;
padding-block-start: 24px;
padding-block-end: 24px;
padding-inline-start: 32px;
@ -337,7 +287,7 @@ a {
}
.section {
height: auto;
max-height: none;
overflow: visible;
}
}

29
index.html
View file

@ -5,13 +5,13 @@
<title>赫蹏 - 一个简约又简单的网页中文排版增强</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./normalize.css">
<link rel="stylesheet" href="./index.css?1">
<link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="./heti.css">
<link rel="icon" href="./favicon.svg">
</head>
<body>
<main class="container">
<article class="article heti heti--classic" data-debug-mode>
<article class="article heti heti--classic">
<h1>赫蹏</h1>
<blockquote>古代称用以书写的小幅绢帛。后亦以借指纸。《汉书·外戚传下·孝成赵皇后》：<q>武（籍武 ）发篋中，有裹药二枚，赫蹏书。</q><u>颜师古</u>注：<q><u>邓展</u>曰：<q>赫音兄弟鬩墙之鬩。</q><u>应劭</u>曰：<q>赫蹏，薄小纸也。</q></q><u>宋</u> <u>赵彦卫</u> 《云麓漫钞》卷七：<q>《赵后传》所谓『赫蹏』者，注云<q>薄小纸</q>，然其寔亦縑帛。</q></blockquote>
@ -402,9 +402,9 @@
<table>
<caption>常用标签样式示例表</caption>
<tr>
<th style="width: 40px;">类型</th>
<th style="width: 240px;">标签</th>
<th style="width: 240px;">效果</th>
<th style="width: 80px;">类型</th>
<th style="width: 300px;">标签</th>
<th style="width: 300px;">效果</th>
</tr>
<tr>
<td>链接</td>
@ -478,17 +478,18 @@
<li>✅ 诗词版式</li>
<li>✅ 行间注版式</li>
</ul>
<footer class="heti-fn">
<ol>
<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>
</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公司创造的命名方ttps://en.bem.info/</li>
<li id="fn-03">《中文排版需求》：https://w3c.github.io/clreq/</li>
</ol>
</footer>
</main>
<div class="panel">
<aside class="panel">
<ul class="switch-list">
<li><input type="radio" class="J_fontStack" value="heti--classic" name="font" id="font-classic" checked><label for="font-classic">传统</label></li>
<li><input type="radio" class="J_fontStack" value="heti--sans" name="font" id="font-sans"><label for="font-sans">黑体</label></li>
@ -499,7 +500,7 @@
<li><input type="radio" class="J_radioGrid" value="grid-24" name="grid" id="grid-24"><label for="grid-24">大</label></li>
<li><input type="radio" class="J_radioGrid" value="grid-12" name="grid" id="grid-12"><label for="grid-12">小</label></li>
</ul>
</div>
</aside>
<script>
const $$root = document.getElementsByTagName('article')[0]