Aloha

Mu-L · Feb 11, 2020 · f65382b · f65382b
commit f65382b
Show file tree

Hide file tree

Showing 19 changed files with 5,085 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -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
diff --git a/.gitignore b/.gitignore
@@ -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
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,11 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
+  "rules": {
+    "no-descending-specificity": [
+      true,
+      {
+        "ignore": ["selectors-within-list"]
+      }
+    ]
+  }
+}
diff --git a/README.md b/README.md
@@ -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 --
diff --git a/index.scss b/index.scss
@@ -0,0 +1,8 @@
+/*!
+ * Project: Heti
+ * URL: https://github.com/sivan/heti
+ * Author: Sivan [[email protected]]
+ * Date: 2020-01-22 00:00
+ */
+
+@import './lib/heti';
diff --git a/lib/_base.scss b/lib/_base.scss
@@ -0,0 +1,89 @@
+/**
+ * Author: Sivan [[email protected]]
+ * 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;
+  }
+}
diff --git a/lib/_font.scss b/lib/_font.scss
@@ -0,0 +1,57 @@
+/**
+ * Author: Sivan [[email protected]]
+ * 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;
+}
diff --git a/lib/_heading.scss b/lib/_heading.scss
@@ -0,0 +1,65 @@
+/**
+ * Author: Sivan [[email protected]]
+ * 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;
+  }
+}
diff --git a/lib/_helper-block.scss b/lib/_helper-block.scss
@@ -0,0 +1,59 @@
+/*
+ * Author: Sivan [[email protected]]
+ * 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;
+  }
+}