Aloha

lib/_modifier-layout.scss

@@ -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 {}
+  }
+}