feat: update BEM naming

lib/modifiers/ancient.scss

@@ -0,0 +1,60 @@
+/*
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define ancient styles.
+ */
+@import "../variables";
+
+@mixin hetiAncientModifier {
+  // 定义古文、古诗样式
+  &--ancient,
+  &--poetry {
+    // 古文、古诗用宋体（覆盖全局字体）
+    font-family: $font-family-song;
+
+    // 古文标题用楷体（覆盖全局字体）
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-family: $font-family-kai;
+      font-weight: $font-weight-bolder;
+      text-align: center;
+
+      // 标题内元信息仅在桌面端采取悬挂处理，且不占据空间影响文字居中
+      #{$root-selector}-meta {
+        font-weight: 400;
+
+        @media screen and (min-width: 640px) {
+          @include hang();
+
+          display: inline;
+          margin-block-start: 4px;
+          margin-inline-start: 8px;
+        }
+      }
+    }
+
+    #{$root-selector}-meta {
+      line-height: $line-height-size-normal;
+      text-align: center;
+      text-indent: 0;
+    }
+  }
+
+  &--ancient {
+    // 古文（文言文、词）首行缩进
+    p {
+      text-indent: $text-indent-length;
+    }
+  }
+
+  &--poetry {
+    // 诗节无缩进，居中显示
+    p {
+      text-align: center;
+      text-indent: 0;
+    }
+  }
+}

lib/modifiers/annotation.scss

@@ -0,0 +1,37 @@
+/*
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define interlinear annotation styles.
+ */
+@import "../variables";
+
+@mixin hetiAnnotationModifier {
+  &--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;
+      }
+    }
+
+    // 元信息保持间距
+    #{$root-selector}-meta {
+      margin-block-start: $std-block-unit / 2;
+      margin-block-end: $std-block-unit;
+    }
+
+    // ruby 不应影响行间距，经测试最小可用行高为 2
+    //ruby {}
+  }
+}

lib/modifiers/column.scss

@@ -0,0 +1,35 @@
+/*
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define column styles.
+ */
+@import "../variables";
+
+@mixin hetiColumnModifier {
+  // 定义多栏排版
+  $selector-list: batch-fix-list(join($column-count-list, $column-width-list), '&--columns-');
+
+  #{join($selector-list, comma)} {
+    // 多行时不再设总宽度限制
+    max-width: none;
+    column-gap: 2em;
+
+    // 多栏排版时减半段间距
+    p {
+      margin-block-start: $std-block-unit / 2 / 2;
+      margin-block-end: $std-block-unit / 2;
+      text-indent: $text-indent-length;
+    }
+  }
+
+  @each $columns in $column-count-list {
+    &--columns-#{$columns} {
+      column-count: #{$columns};
+    }
+  }
+
+  @each $column-width in $column-width-list {
+    &--columns-#{$column-width} {
+      column-width: #{$column-width};
+    }
+  }
+}

lib/modifiers/font-stack.scss

@@ -0,0 +1,55 @@
+/*
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define global font stacks.
+ */
+@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,
+    th {
+      font-family: $font-family-hei;
+    }
+  }
+}

lib/modifiers/writing-mode.scss

@@ -0,0 +1,24 @@
+/*
+ * Author: Sivan [sun.sivan@gmail.com]
+ * Description: define writing mode styles.
+ */
+@import "../variables";
+
+@mixin hetiWritingModeModifier {
+  // 定义垂直布局
+  &--vertical {
+    max-width: none;
+    max-height: $line-length;
+    writing-mode: vertical-rl;
+    letter-spacing: 0.125em;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      text-align: start;
+    }
+  }
+}