heti/lib/_modifier-layout.scss
2020-02-11 20:47:29 +08:00

79 lines
1.7 KiB
SCSS

/*
* 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 {}
}
}