80 lines
1.7 KiB
SCSS
80 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 {}
|
||
|
|
}
|
||
|
|
}
|