Aloha
This commit is contained in:
Sivan
commit
f65382b12a
19 changed files with 5085 additions and 0 deletions
14
.editorconfig
Normal file
14
.editorconfig
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
# EditorConfig from https://github.com/sivan/dotfiles
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
end_of_line = lf
|
||||||
|
indent_size = 2
|
||||||
|
indent_style = space
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
indent_size = 4
|
||||||
|
trim_trailing_whitespace = false
|
||||||
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
# Editor generate files
|
||||||
|
.idea/
|
||||||
|
.settings/
|
||||||
|
|
||||||
|
# Dev dependencies and cache files
|
||||||
|
dist/
|
||||||
|
node_modules/
|
||||||
|
npm-debug.log
|
||||||
|
|
||||||
|
# Folder view configuration files
|
||||||
|
.DS_Store
|
||||||
|
Desktop.ini
|
||||||
|
|
||||||
|
# Thumbnail cache files
|
||||||
|
*~
|
||||||
|
._*
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Files that might appear on external disks
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
11
.stylelintrc
Normal file
11
.stylelintrc
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
{
|
||||||
|
"extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
|
||||||
|
"rules": {
|
||||||
|
"no-descending-specificity": [
|
||||||
|
true,
|
||||||
|
{
|
||||||
|
"ignore": ["selectors-within-list"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
40
README.md
Normal file
40
README.md
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
# 赫蹏
|
||||||
|
|
||||||
|
赫蹏（hètí）是专为中文内容展示设计的排版样式增强。它基于通行的中文排版规范而来，可以为网站的读者带来更好的文章阅读体验。
|
||||||
|
|
||||||
|
主要特性：
|
||||||
|
- 全标签样式统一；
|
||||||
|
- 贴合网格的排版；
|
||||||
|
- 内置多种预设字体族（仅限桌面端）；
|
||||||
|
- 支持横排、竖排两种排版；
|
||||||
|
- 支持诗词、行间注版式；
|
||||||
|
- 兼容 *normalize.css*、**CSS Reset** 等大部分重置样式；
|
||||||
|
- 移动端支持；
|
||||||
|
- ……
|
||||||
|
|
||||||
|
## 使用方法
|
||||||
|
|
||||||
|
1. 在页面的 `<head>` 标签中引入 `heti.css` 文件：
|
||||||
|
```
|
||||||
|
<link rel="stylesheet" href="./heti.css">
|
||||||
|
```
|
||||||
|
1. 在要作用的容器元素上增加 `class="heti"` 的类名即可：。
|
||||||
|
```
|
||||||
|
<article class="entry heti">
|
||||||
|
<h1>我的世界观</h1>
|
||||||
|
<p>有钱人的生活就是这么朴实无华，且枯燥</p>
|
||||||
|
……
|
||||||
|
</article>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## WIP
|
||||||
|
|
||||||
|
- [ ] 繁体中文支持
|
||||||
|
- [ ] 中、西文混排
|
||||||
|
- [ ] 标点挤压
|
||||||
|
- [ ] 标点悬挂
|
||||||
|
- [x] 诗词版式
|
||||||
|
- [x] 行间注版式
|
||||||
|
|
||||||
|
-- EOF --
|
||||||
8
index.scss
Normal file
8
index.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/*!
|
||||||
|
* Project: Heti
|
||||||
|
* URL: https://github.com/sivan/heti
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Date: 2020-01-22 00:00
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import './lib/heti';
|
||||||
89
lib/_base.scss
Normal file
89
lib/_base.scss
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: base reset and entry styles.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiBase {
|
||||||
|
// 清容器浮动
|
||||||
|
@include clear-float();
|
||||||
|
|
||||||
|
// 清容器内首尾元素外边距
|
||||||
|
&,
|
||||||
|
section,
|
||||||
|
td {
|
||||||
|
> *:first-child {
|
||||||
|
margin-block-start: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
> *:last-child {
|
||||||
|
margin-block-end: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义块级元素样式
|
||||||
|
blockquote {
|
||||||
|
margin-block-start: $std-block-unit / 2;
|
||||||
|
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 / 2;
|
||||||
|
padding-block-end: $std-block-unit / 2;
|
||||||
|
padding-inline-start: $std-inline-unit;
|
||||||
|
padding-inline-end: $std-inline-unit;
|
||||||
|
background-color: rgba(0, 0, 0, 0.054);
|
||||||
|
//border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
display: block;
|
||||||
|
margin-inline-start: auto;
|
||||||
|
margin-inline-end: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
width: 30%;
|
||||||
|
height: 1px;
|
||||||
|
margin-block-start: $std-block-unit * 2;
|
||||||
|
margin-block-end: $std-block-unit * 2 - 1px;
|
||||||
|
margin-inline-start: auto;
|
||||||
|
margin-inline-end: auto;
|
||||||
|
border: 0;
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-block-start: $std-block-unit / 2;
|
||||||
|
margin-block-end: $std-block-unit;
|
||||||
|
text-align: justify;
|
||||||
|
|
||||||
|
@include non-cjk-block {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
//+ pre {
|
||||||
|
// margin-block-start: -$std-block-unit / 2;
|
||||||
|
//}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
margin-block-start: $std-block-unit / 2;
|
||||||
|
margin-block-end: $std-block-unit / 2;
|
||||||
|
margin-inline-start: 0;
|
||||||
|
margin-inline-end: 0;
|
||||||
|
padding-block-start: $std-block-unit / 2;
|
||||||
|
padding-block-end: $std-block-unit / 2;
|
||||||
|
padding-inline-start: $std-inline-unit;
|
||||||
|
padding-inline-end: $std-inline-unit;
|
||||||
|
overflow: auto;
|
||||||
|
white-space: pre;
|
||||||
|
word-wrap: normal;
|
||||||
|
background-color: rgba(0, 0, 0, 0.054);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
57
lib/_font.scss
Normal file
57
lib/_font.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: define font-face.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
// 黑体
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Hei";
|
||||||
|
src: local("PingFang SC Light"), local("Heiti SC Light"), local("STXihei");
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Hei";
|
||||||
|
src: local("Pingfang SC Regular"), local("Heiti SC Medium"), local(STHeiti);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Hei";
|
||||||
|
src: local("PingFang SC Medium"), local("Heiti SC Light");
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Hei";
|
||||||
|
src: local("Pingfang SC Semibold"), local("Heiti SC Light");
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 宋体
|
||||||
|
|
||||||
|
// 楷体
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Kai";
|
||||||
|
src: local("Kaiti SC Regular"), local("Heiti SC Light");
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Kai";
|
||||||
|
src: local("Kaiti SC Regular"), local(STKaiti);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Kai";
|
||||||
|
src: local("Kaiti SC Bold"), local(STKaiti);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Heti-Kai";
|
||||||
|
src: local("Kaiti SC Black"), local(STKaiti);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
65
lib/_heading.scss
Normal file
65
lib/_heading.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: heading styles.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiHeading {
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// 顶边距默认为一行间距，且不因边距重叠原因减半
|
||||||
|
// 底边距考虑到亲密性，默认为半行间距
|
||||||
|
margin-block-start: $std-block-unit;
|
||||||
|
margin-block-end: $std-block-unit / 2;
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-block-end: $std-block-unit;
|
||||||
|
font-size: $font-size-h1;
|
||||||
|
line-height: $line-height-size-h1;
|
||||||
|
letter-spacing: $font-size-h1 * 0.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: $font-size-h2;
|
||||||
|
line-height: $line-height-size-h2;
|
||||||
|
letter-spacing: $font-size-h2 * 0.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: $font-size-h3;
|
||||||
|
line-height: $line-height-size-h3;
|
||||||
|
letter-spacing: $font-size-h3 * 0.05;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: $font-size-h4;
|
||||||
|
line-height: $line-height-size-h4;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: $font-size-h5;
|
||||||
|
line-height: $line-height-size-h5;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6 {
|
||||||
|
font-size: $font-size-h6;
|
||||||
|
line-height: $line-height-size-h6;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 压缩两个标题之间的间距
|
||||||
|
h1 + h2,
|
||||||
|
h2 + h3,
|
||||||
|
h3 + h4,
|
||||||
|
h4 + h5,
|
||||||
|
h5 + h6 {
|
||||||
|
margin-block-start: $std-block-unit / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
59
lib/_helper-block.scss
Normal file
59
lib/_helper-block.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
/*
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: define block helper classes.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiBlockHelperClasses {
|
||||||
|
// 定义拉丁字母的有序列表
|
||||||
|
#{$root-selector}-list-latin {
|
||||||
|
list-style-type: upper-latin;
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: lower-roman;
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: lower-latin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义中文序号的有序列表
|
||||||
|
#{$root-selector}-list-han {
|
||||||
|
list-style-type: cjk-ideographic;
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal-leading-zero;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义多栏布局
|
||||||
|
@each $columns in (2, 3, 4) {
|
||||||
|
#{$root-selector}-columns-#{$columns} {
|
||||||
|
// 多行时不再设总宽度限制
|
||||||
|
max-width: none;
|
||||||
|
column-count: #{$columns};
|
||||||
|
column-gap: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@each $column-width in (16em, 20em, 24em, 28em, 32em, 36em, 40em, 44em, 48em) {
|
||||||
|
#{$root-selector}-columns-#{$column-width} {
|
||||||
|
// 多行时不再设总宽度限制
|
||||||
|
max-width: none;
|
||||||
|
column-width: #{$column-width};
|
||||||
|
column-gap: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 元信息、诗节居中显示
|
||||||
|
#{$root-selector}-meta {
|
||||||
|
line-height: $line-height-size-normal;
|
||||||
|
text-align: center;
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
47
lib/_helper-inline.scss
Normal file
47
lib/_helper-inline.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
/*
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: define inline helper classes.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiInlineHelperClasses {
|
||||||
|
// 标题内锚点
|
||||||
|
#{$root-selector}-anchor {
|
||||||
|
position: absolute;
|
||||||
|
left: -1em;
|
||||||
|
width: 1em;
|
||||||
|
font-family: $font-family-hei;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: inherit;
|
||||||
|
text-align: center;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s linear;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
border-block-end: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@at-root {
|
||||||
|
#{$root-selector} {
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover #{$root-selector}-anchor {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// @todo: 用于标点悬挂用的样式
|
||||||
|
#{$root-selector}-hang {
|
||||||
|
@include hang();
|
||||||
|
}
|
||||||
|
}
|
||||||
173
lib/_inline.scss
Normal file
173
lib/_inline.scss
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: inline element styles.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiInline {
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
padding-block-end: 1px;
|
||||||
|
border-block-end: 1px solid currentColor;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
padding-block-end: 1px;
|
||||||
|
border-block-end: 1px dotted;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: $font-family-mono;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
|
||||||
|
// 非中文时显示斜体
|
||||||
|
@include non-cjk-block {
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题单行时居中，多行时居左
|
||||||
|
figcaption {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
text-align: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 显式斜体标签予以保留
|
||||||
|
i {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
ins,
|
||||||
|
u {
|
||||||
|
padding-block-end: 1px;
|
||||||
|
border-block-end: 1px solid;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark {
|
||||||
|
padding-block-start: 2px;
|
||||||
|
padding-block-end: 2px;
|
||||||
|
padding-inline-start: 1px;
|
||||||
|
padding-inline-end: 1px;
|
||||||
|
margin-inline-start: 1px;
|
||||||
|
margin-inline-end: 1px;
|
||||||
|
background-color: rgba(255, 247, 0, 0.88);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置引用文本为中文引号
|
||||||
|
q {
|
||||||
|
quotes: "「" "」" "『" "』";
|
||||||
|
|
||||||
|
@include non-cjk-block {
|
||||||
|
quotes: initial;
|
||||||
|
quotes: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
rt {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: rgba(0, 0, 0, 0.88);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 完美 <small> 字号 by Sivan
|
||||||
|
/// 12px * 0.875 => 11px
|
||||||
|
/// 14px * 0.875 => 12px
|
||||||
|
/// 16px * 0.875 => 14px
|
||||||
|
/// 18px * 0.875 => 16px
|
||||||
|
/// 20px * 0.875 => 18px
|
||||||
|
small {
|
||||||
|
font-size: 0.875em;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
position: relative;
|
||||||
|
margin-inline-start: 0.25em;
|
||||||
|
margin-inline-end: 0.25em;
|
||||||
|
font-size: 0.75em;
|
||||||
|
line-height: 1;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
padding-left: 1em;
|
||||||
|
outline: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary::-webkit-details-marker {
|
||||||
|
width: 0.6em;
|
||||||
|
margin-inline-end: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
u[title] {
|
||||||
|
cursor: help;
|
||||||
|
border-block-end-color: rgba(0, 0, 0, 0.54);
|
||||||
|
border-block-end-width: 3px;
|
||||||
|
border-block-end-style: double;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认禁用中文斜体 https://www.zhihu.com/question/20120243
|
||||||
|
address,
|
||||||
|
cite,
|
||||||
|
dfn,
|
||||||
|
dt,
|
||||||
|
em {
|
||||||
|
font-style: normal;
|
||||||
|
|
||||||
|
// 非中文时显示斜体
|
||||||
|
@include non-cjk-block {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//b,
|
||||||
|
//cite,
|
||||||
|
//dfn,
|
||||||
|
//em,
|
||||||
|
//strong {
|
||||||
|
// margin-inline-start: 1px;
|
||||||
|
// margin-inline-end: 1px;
|
||||||
|
//}
|
||||||
|
|
||||||
|
// 带边框的元素，两个相连时添加间距，以防止视觉上混为一个元素
|
||||||
|
// @todo: 此处有一个问题：如果结构是 <u>倚天</u>和<u>屠龙</u>，「屠龙」前面仍然会有边距。此处跟预期不一致，应该只在两个同名元素紧邻时增加边距，即：<u>倚天剑</u><u>屠龙刀</u>
|
||||||
|
//@each $tag in (abbr, del, ins, s, u) {
|
||||||
|
// #{$tag} + #{$tag} {
|
||||||
|
// margin-inline-start: 0.125em;
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
}
|
||||||
55
lib/_list.scss
Normal file
55
lib/_list.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: list styles.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiList {
|
||||||
|
// 标准化间距
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
dl {
|
||||||
|
margin-block-start: $line-height-size-normal / 2;
|
||||||
|
margin-block-end: $line-height-size-normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-inline-start: $text-indent-length;
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置部分 CSS Reset 中 ul, ol { list-style: none; } 造成的样式污染
|
||||||
|
// 如果搭配 normalize.css 使用，则不存在这些样式污染
|
||||||
|
@if $_css-reset-scheme == "reset" {
|
||||||
|
ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul,
|
||||||
|
ol ul {
|
||||||
|
list-style-type: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul ul,
|
||||||
|
ul ol ul,
|
||||||
|
ol ul ul,
|
||||||
|
ol ol ul {
|
||||||
|
list-style-type: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置不知道哪里散播出来的垃圾代码 ul, li { list-style: none; }
|
||||||
|
li {
|
||||||
|
list-style-type: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
78
lib/_modifier-font.scss
Normal file
78
lib/_modifier-font.scss
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
/*
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: define font stack classes.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiFontModifier {
|
||||||
|
// 定义无衬线字体为黑体
|
||||||
|
&-sans {
|
||||||
|
font-family: $font-family-hei;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义衬线字体为宋体
|
||||||
|
&-serif {
|
||||||
|
font-family: $font-family-song;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义传统字体
|
||||||
|
&-classic {
|
||||||
|
font-family: $font-family-song;
|
||||||
|
|
||||||
|
// 标题使用 800 字重
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-weight: $font-weight-bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标题、引用使用楷体
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
blockquote,
|
||||||
|
cite,
|
||||||
|
q {
|
||||||
|
font-family: $font-family-kai;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 说明文字、角标、表头使用黑体
|
||||||
|
figcaption,
|
||||||
|
caption,
|
||||||
|
sup,
|
||||||
|
sub,
|
||||||
|
th {
|
||||||
|
font-family: $font-family-hei;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义超大号字
|
||||||
|
&-x-large {
|
||||||
|
font-size: $font-size-x-large;
|
||||||
|
line-height: $line-height-size-x-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义大号字
|
||||||
|
&-large {
|
||||||
|
font-size: $font-size-large;
|
||||||
|
line-height: $line-height-size-large;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义小号字
|
||||||
|
&-small {
|
||||||
|
font-size: $font-size-small;
|
||||||
|
line-height: $line-height-size-small;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义超小号字
|
||||||
|
&-x-small {
|
||||||
|
font-size: $font-size-x-small;
|
||||||
|
line-height: $line-height-size-x-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
79
lib/_modifier-layout.scss
Normal file
79
lib/_modifier-layout.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
/*
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: define vertical layout classes.
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiLayoutModifier {
|
||||||
|
// 定义垂直布局
|
||||||
|
&-vertical {
|
||||||
|
max-width: none;
|
||||||
|
max-height: $line-length;
|
||||||
|
writing-mode: vertical-rl;
|
||||||
|
letter-spacing: 0.125em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义古文、诗词样式
|
||||||
|
&-poetry,
|
||||||
|
&-ancient {
|
||||||
|
font-family: $font-family-song;
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3 {
|
||||||
|
font-family: $font-family-song;
|
||||||
|
font-weight: $font-weight-bolder;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
// 标题内元信息，不应占据空间影响标题文字居中
|
||||||
|
#{$root-selector}-meta {
|
||||||
|
display: block;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
@media screen and (min-width: 640px) {
|
||||||
|
@include hang();
|
||||||
|
|
||||||
|
display: inline;
|
||||||
|
margin-block-start: 4px;
|
||||||
|
margin-inline-start: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#{$root-selector}-verse {
|
||||||
|
text-align: center;
|
||||||
|
text-indent: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 古文（文言文、词）默认首行缩进
|
||||||
|
p {
|
||||||
|
text-indent: $text-indent-length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 定义行间注样式
|
||||||
|
// @todo: 类名太长了，得简化一下
|
||||||
|
&-interlinear-annotation {
|
||||||
|
// 首行缩进且行间距大，无需添加段落边距
|
||||||
|
p {
|
||||||
|
margin-block-start: 0;
|
||||||
|
margin-block-end: 0;
|
||||||
|
line-height: $line-height-expanded-ultra;
|
||||||
|
text-indent: $text-indent-length;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 着重号不应影响行间距，经测试最小可用行高为 1.7
|
||||||
|
em {
|
||||||
|
-webkit-text-emphasis: filled circle;
|
||||||
|
-webkit-text-emphasis-position: under;
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
|
||||||
|
@include non-cjk-block {
|
||||||
|
-webkit-text-emphasis: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ruby 不应影响行间距，经测试最小可用行高为 2
|
||||||
|
//ruby {}
|
||||||
|
}
|
||||||
|
}
|
||||||
30
lib/_table.scss
Normal file
30
lib/_table.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: 表格样式
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
|
||||||
|
@mixin hetiTable {
|
||||||
|
table {
|
||||||
|
box-sizing: border-box;
|
||||||
|
table-layout: fixed;
|
||||||
|
border-collapse: collapse;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin-block-start: $std-block-unit / 2;
|
||||||
|
margin-block-end: $std-block-unit;
|
||||||
|
margin-inline-start: auto;
|
||||||
|
margin-inline-end: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 8px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
caption-side: bottom;
|
||||||
|
font-size: $font-size-small;
|
||||||
|
line-height: $line-height-size-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
108
lib/_variables.scss
Normal file
108
lib/_variables.scss
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
* Description: define variables, alias etc.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 定义赫蹏根 class 名
|
||||||
|
$root-selector: '.heti' !default;
|
||||||
|
|
||||||
|
// 字体 Fonts
|
||||||
|
/// 字体栈 Font Stacks
|
||||||
|
$_font-stack-hei: "Pingfang SC", "Pingfang TC", "Heiti SC", "Heiti TC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei" !default;
|
||||||
|
$_font-stack-song: 'Noto Serif','Noto Serif CJK SC', 'Noto Serif CJK', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc, "Songti SC", "Songti TC", STSong, SimSun !default;
|
||||||
|
$_font-stack-kai: "Kaiti SC", STKaiti !default;
|
||||||
|
$_font-stack-sans: "Helvetica Neue", Helvetica, Arial !default;
|
||||||
|
$_font-stack-serif: "Times New Roman", Times !default;
|
||||||
|
$_font-stack-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier !default;
|
||||||
|
$_font-stack-symbol: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||||
|
|
||||||
|
/// 字体族 Font Families
|
||||||
|
$font-family-hei: $_font-stack-sans, $_font-stack-hei, sans-serif, $_font-stack-symbol !default;
|
||||||
|
$font-family-song: $_font-stack-serif, $_font-stack-song, serif, $_font-stack-symbol !default;
|
||||||
|
$font-family-kai: $_font-stack-serif, $_font-stack-kai, serif, $_font-stack-symbol !default;
|
||||||
|
$font-family-mono: $_font-stack-mono, monospace, $_font-stack-symbol !default;
|
||||||
|
|
||||||
|
/// 字重 Font Weights
|
||||||
|
$font-weight-bolder: 800 !default;
|
||||||
|
$font-weight-bold: 600 !default;
|
||||||
|
$font-weight-normal: 400 !default;
|
||||||
|
$font-weight-lighter: 200 !default;
|
||||||
|
|
||||||
|
/// 字号 Font Sizes
|
||||||
|
$font-size-normal: 16px !default;
|
||||||
|
$font-size-x-large: 20px !default;
|
||||||
|
$font-size-large: 18px !default;
|
||||||
|
$font-size-small: 14px !default;
|
||||||
|
$font-size-x-small: 12px !default;
|
||||||
|
|
||||||
|
$font-size-h1: 32px !default;
|
||||||
|
$font-size-h2: 24px !default;
|
||||||
|
$font-size-h3: 20px !default;
|
||||||
|
$font-size-h4: 18px !default;
|
||||||
|
$font-size-h5: 16px !default;
|
||||||
|
$font-size-h6: 14px !default;
|
||||||
|
|
||||||
|
// 行宽
|
||||||
|
$line-length: 42em !default;
|
||||||
|
|
||||||
|
// 行高 Line Heights
|
||||||
|
$line-height-normal: 1.5 !default;
|
||||||
|
//$line-height-expanded: 1.875 !default;
|
||||||
|
$line-height-expanded-ultra: 2.25 !default;
|
||||||
|
//$line-height-condensed: 1.25 !default;
|
||||||
|
//$line-height-condensed-ultra: 1 !default;
|
||||||
|
|
||||||
|
$line-height-size-normal: $font-size-normal * $line-height-normal !default;
|
||||||
|
$line-height-size-large: $line-height-size-normal !default;
|
||||||
|
$line-height-size-x-large: $font-size-x-large * $line-height-normal !default;
|
||||||
|
$line-height-size-small: $line-height-size-normal !default;
|
||||||
|
$line-height-size-x-small: 18px !default;
|
||||||
|
$line-height-size-h1: 48px !default;
|
||||||
|
$line-height-size-h2: 36px !default;
|
||||||
|
$line-height-size-h3: 36px !default;
|
||||||
|
$line-height-size-h4: 24px !default;
|
||||||
|
$line-height-size-h5: 24px !default;
|
||||||
|
$line-height-size-h6: 24px !default;
|
||||||
|
|
||||||
|
// 标准网格单位变量 Standard Length
|
||||||
|
// 垂直方向标准单位 = 标准行高
|
||||||
|
// 水平方向标准单位 = 标准字号
|
||||||
|
$std-block-unit: $line-height-size-normal !default;
|
||||||
|
$std-inline-unit: $font-size-normal !default;
|
||||||
|
|
||||||
|
// 示例：缩进单位 = 二倍文字宽度
|
||||||
|
$text-indent-length: 2em !default;
|
||||||
|
|
||||||
|
// 开发用配置项 Develop Configs
|
||||||
|
|
||||||
|
/// 预设重置方案 "reset" | "normalize"
|
||||||
|
/// reset：假定 Eric Meyer 的 CSS Reset 或其它流行的 Reset
|
||||||
|
/// normalize：指定为 normalize.css
|
||||||
|
$_css-reset-scheme: "reset";
|
||||||
|
|
||||||
|
// Mix-in: Clear float
|
||||||
|
@mixin clear-float {
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mix-in: Include Non-cjk styles
|
||||||
|
@mixin non-cjk-block {
|
||||||
|
&:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
|
||||||
|
&:not(:lang(zh)) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mix-in: Hang Punctuation Mark
|
||||||
|
@mixin hang {
|
||||||
|
position: absolute;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
41
lib/heti.scss
Normal file
41
lib/heti.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
/**
|
||||||
|
* Author: Sivan [sun.sivan@gmail.com]
|
||||||
|
*/
|
||||||
|
@import "variables";
|
||||||
|
@import "base";
|
||||||
|
@import "heading";
|
||||||
|
@import "list";
|
||||||
|
@import "table";
|
||||||
|
@import "inline";
|
||||||
|
@import "modifier-layout";
|
||||||
|
@import "modifier-font";
|
||||||
|
@import "helper-block";
|
||||||
|
@import "helper-inline";
|
||||||
|
|
||||||
|
#{$root-selector} {
|
||||||
|
// 中文每行展示文字（CPL）建议在 30~50 之间，默认 42
|
||||||
|
max-width: $line-length;
|
||||||
|
|
||||||
|
// 默认字体大小为 16px，行高 1.5
|
||||||
|
font-size: $font-size-normal;
|
||||||
|
font-weight: $font-weight-normal;
|
||||||
|
line-height: $line-height-normal;
|
||||||
|
|
||||||
|
// 自动在中西文间加 1/4 空格（暂无浏览器支持）
|
||||||
|
//text-spacing: ideograph-alpha;
|
||||||
|
|
||||||
|
// 引入各模块
|
||||||
|
@include hetiBase();
|
||||||
|
@include hetiHeading();
|
||||||
|
@include hetiList();
|
||||||
|
@include hetiTable();
|
||||||
|
@include hetiInline();
|
||||||
|
|
||||||
|
// 定义所有状态样式（与 .heti 并列使用）
|
||||||
|
@include hetiLayoutModifier();
|
||||||
|
@include hetiFontModifier();
|
||||||
|
|
||||||
|
// 定义所有内嵌样式（仅在 .heti 内使用有效）
|
||||||
|
@include hetiBlockHelperClasses();
|
||||||
|
@include hetiInlineHelperClasses();
|
||||||
|
}
|
||||||
4074
package-lock.json
generated
Normal file
4074
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
36
package.json
Normal file
36
package.json
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"name": "heti",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "赫蹏",
|
||||||
|
"main": "index.scss",
|
||||||
|
"directories": {
|
||||||
|
"lib": "lib"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "node-sass -w --output-style=compressed index.scss dist/heti.css",
|
||||||
|
"build": "node-sass index.scss dist/heti.css --output-style=compressed",
|
||||||
|
"deploy": "gh-pages -d dist",
|
||||||
|
"test": "npx stylelint --config .stylelintrc 'lib/**/*.scss'"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/sivan/heti.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"typography"
|
||||||
|
],
|
||||||
|
"author": "Sivan <sun.sivan@gmail.com>",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/sivan/heti/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/sivan/heti#readme",
|
||||||
|
"devDependencies": {
|
||||||
|
"gh-pages": "^2.2.0",
|
||||||
|
"node-sass": "^4.13.1",
|
||||||
|
"stylelint": "^13.0.0",
|
||||||
|
"stylelint-config-recommended-scss": "^4.1.0",
|
||||||
|
"stylelint-config-standard": "^19.0.0",
|
||||||
|
"stylelint-scss": "^3.13.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue