heti/lib/helpers/_block.scss

99 lines
1.9 KiB
SCSS
Raw Permalink Normal View History

2020-02-20 21:37:10 +08:00
// Author: Sivan [sun.sivan@gmail.com]
// Description: define block helper classes.
2020-02-11 21:01:13 +08:00
@import "../variables";
2020-02-11 20:47:29 +08:00
@mixin hetiBlockHelperClasses {
2020-02-20 21:37:10 +08:00
// 段落相关
2020-02-11 21:01:13 +08:00
// 元信息无缩进
#{$root-selector}-meta {
display: block;
text-indent: 0;
}
// 诗节无缩进,居中显示
#{$root-selector}-verse {
text-align: center;
text-indent: 0;
}
// 定义扩展字号
#{$root-selector} {
&-large {
font-size: $font-size-large;
line-height: $line-height-size-large;
}
&-x-large {
font-size: $font-size-x-large;
line-height: $line-height-size-x-large;
2020-02-21 01:49:22 +08:00
letter-spacing: 0.05em;
2020-02-11 21:01:13 +08:00
}
&-small {
font-size: $font-size-small;
line-height: $line-height-size-small;
}
&-x-small {
font-size: $font-size-x-small;
line-height: $line-height-size-x-small;
}
}
2020-02-20 21:37:10 +08:00
// 列表相关
2020-02-11 20:47:29 +08:00
// 定义拉丁字母的有序列表
#{$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;
}
}
}
2020-02-18 19:51:44 +08:00
2020-02-20 21:37:10 +08:00
// 页脚
2020-02-18 19:51:44 +08:00
#{$root-selector}-fn {
margin-block-start: 59px;
2020-05-04 23:29:03 +08:00
border-block-start: 1px solid;
border-block-start-color: hsl(0, 0%, 80%);
2020-02-18 19:51:44 +08:00
font-size: $font-size-small;
font-family: $font-family-hei;
line-height: $line-height-size-normal;
2020-05-18 00:49:59 +08:00
@include darkmode-style {
2020-05-04 23:29:03 +08:00
border-block-start-color: hsl(0, 0%, 25%);
}
2020-02-18 19:51:44 +08:00
ol {
margin-block-start: $std-block-unit * 0.5;
2020-02-18 19:51:44 +08:00
margin-block-end: 0;
}
2020-02-21 01:49:22 +08:00
li {
&:target {
2020-05-04 23:29:03 +08:00
background-color: hsl(210, 100%, 93%);
2020-05-18 00:49:59 +08:00
@include darkmode-style {
2020-05-04 23:29:03 +08:00
background-color: hsl(210, 40%, 38%);
}
2020-02-21 01:49:22 +08:00
}
}
2020-02-18 19:51:44 +08:00
}
2020-02-11 20:47:29 +08:00
}