heti/heti.css
2020-02-12 12:33:20 +08:00

627 lines
18 KiB
CSS

@charset "UTF-8";
/**
* Author: Sivan [sun.sivan@gmail.com]
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: base reset and entry styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: heading styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: list styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: table styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: inline element styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/*
* Author: Sivan [sun.sivan@gmail.com]
* Description: define global font stacks.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/*
* Author: Sivan [sun.sivan@gmail.com]
* Description: define writing mode styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/*
* Author: Sivan [sun.sivan@gmail.com]
* Description: define column styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/*
* Author: Sivan [sun.sivan@gmail.com]
* Description: define ancient styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/*
* Author: Sivan [sun.sivan@gmail.com]
* Description: define interlinear annotation styles.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/*
* Author: Sivan [sun.sivan@gmail.com]
* Description: define block helper classes.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
/*
* Author: Sivan [sun.sivan@gmail.com]
* Description: define inline helper classes.
*/
/**
* Author: Sivan [sun.sivan@gmail.com]
* Description: define variables, alias etc.
*/
/* 字体 Fonts */
/* 行 Lines */
/* 段落 Paragraphs */
/* 栏 Columns */
/* 开发用配置项 Develop Configs */
/* 混合 Mix-ins */
/* 函数 Functions */
.heti {
max-width: 42em;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
/* 兼容性处理 */
/* 段落相关 */
/* 列表相关 */ }
.heti::before, .heti::after {
content: "";
display: table; }
.heti::after {
clear: both; }
.heti > *:first-child,
.heti section > *:first-child,
.heti td > *:first-child {
margin-block-start: 0 !important; }
.heti > *:last-child,
.heti section > *:last-child,
.heti td > *:last-child {
margin-block-end: 0 !important; }
.heti blockquote {
margin-block-start: 12px;
margin-block-end: 24px;
margin-inline-start: 32px;
margin-inline-end: 32px;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 16px;
padding-inline-end: 16px;
background-color: rgba(0, 0, 0, 0.054); }
.heti figure {
display: block;
text-align: center; }
.heti figure > img {
display: block;
margin-inline-start: auto;
margin-inline-end: auto; }
.heti hr {
width: 30%;
height: 1px;
margin-block-start: 48px;
margin-block-end: 47px;
margin-inline-start: auto;
margin-inline-end: auto;
border: 0;
background-color: #ddd; }
.heti p {
margin-block-start: 12px;
margin-block-end: 24px;
text-align: justify; }
.heti p:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti p:not(:lang(zh)) {
text-align: start; }
.heti pre {
margin-block-start: 12px;
margin-block-end: 12px;
margin-inline-start: 0;
margin-inline-end: 0;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 16px;
padding-inline-end: 16px;
overflow: auto;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
white-space: pre;
word-wrap: normal;
background-color: rgba(0, 0, 0, 0.054);
border-radius: 4px; }
.heti h1,
.heti h2,
.heti h3,
.heti h4,
.heti h5,
.heti h6 {
position: relative;
margin: 0;
margin-block-start: 24px;
margin-block-end: 12px;
font-weight: 600; }
.heti h1 {
margin-block-end: 24px;
font-size: 32px;
line-height: 48px;
letter-spacing: 1.6px; }
.heti h2 {
font-size: 24px;
line-height: 36px;
letter-spacing: 1.2px; }
.heti h3 {
font-size: 20px;
line-height: 36px;
letter-spacing: 1px; }
.heti h4 {
font-size: 18px;
line-height: 24px; }
.heti h5 {
font-size: 16px;
line-height: 24px; }
.heti h6 {
font-size: 14px;
line-height: 24px; }
.heti h1 + h2,
.heti h2 + h3,
.heti h3 + h4,
.heti h4 + h5,
.heti h5 + h6 {
margin-block-start: 12px; }
.heti ul,
.heti ol,
.heti dl {
margin-block-start: 12px;
margin-block-end: 24px; }
.heti ul,
.heti ol {
padding-inline-start: 2em; }
.heti ul ul,
.heti ul ol,
.heti ol ul,
.heti ol ol {
margin-block-start: 0;
margin-block-end: 0; }
.heti ul {
list-style-type: disc; }
.heti ol {
list-style-type: decimal; }
.heti ul ul,
.heti ol ul {
list-style-type: circle; }
.heti ul ul ul,
.heti ul ol ul,
.heti ol ul ul,
.heti ol ol ul {
list-style-type: square; }
.heti li {
list-style-type: unset; }
.heti table {
box-sizing: border-box;
table-layout: fixed;
border-collapse: collapse;
border: 1px solid #ccc;
margin-block-start: 12px;
margin-block-end: 24px;
margin-inline-start: auto;
margin-inline-end: auto; }
.heti th,
.heti td {
border: 1px solid #ccc;
padding: 8px 16px; }
.heti caption {
caption-side: bottom;
margin-block-start: 2px;
margin-block-end: -4px;
font-size: 14px;
line-height: 24px; }
.heti a {
text-decoration: none; }
.heti a:hover {
padding-block-end: 1px;
border-block-end: 1px solid currentColor;
text-decoration: none; }
.heti abbr[title] {
padding-block-end: 1px;
border-block-end: 1px dotted;
text-decoration: none;
cursor: help; }
.heti b,
.heti strong {
font-weight: 600; }
.heti code {
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px; }
.heti dfn {
font-weight: 600; }
.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti dfn:not(:lang(zh)) {
font-weight: 400; }
.heti em {
font-weight: 600; }
.heti figcaption {
display: inline-block;
vertical-align: top;
font-size: 14px;
text-align: start; }
.heti i {
font-style: italic; }
.heti ins,
.heti u {
padding-block-end: 1px;
border-block-end: 1px solid;
text-decoration: none; }
.heti mark {
padding-block-start: 2px;
padding-block-end: 2px;
padding-inline-start: 1px;
padding-inline-end: 1px;
margin-inline-start: 1px;
margin-inline-end: 1px;
background-color: rgba(255, 247, 0, 0.88); }
.heti q {
quotes: "「" "」" "『" "』"; }
.heti q:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti q:not(:lang(zh)) {
quotes: initial;
quotes: auto; }
.heti rt {
font-size: 0.875em;
color: rgba(0, 0, 0, 0.88); }
.heti small {
font-size: 0.875em; }
.heti strong {
font-weight: 600; }
.heti sub,
.heti sup {
position: relative;
margin-inline-start: 0.25em;
margin-inline-end: 0.25em;
font-size: 0.75em;
font-family: "Helvetica Neue", Helvetica, Arial, "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1;
vertical-align: baseline; }
.heti sub {
bottom: -0.25em; }
.heti sup {
top: -0.5em; }
.heti summary {
padding-left: 1em;
outline: 0;
cursor: pointer; }
.heti summary::-webkit-details-marker {
width: 0.6em;
margin-inline-end: 0.4em; }
.heti u[title] {
cursor: help;
border-block-end-color: rgba(0, 0, 0, 0.54);
border-block-end-width: 3px;
border-block-end-style: double; }
.heti address,
.heti cite,
.heti dfn,
.heti dt,
.heti em {
font-style: normal; }
.heti address:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti address:not(:lang(zh)),
.heti cite:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
.heti cite:not(:lang(zh)),
.heti dfn:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
.heti dfn:not(:lang(zh)),
.heti dt:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
.heti dt:not(:lang(zh)),
.heti em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)),
.heti em:not(:lang(zh)) {
font-style: italic; }
.heti, .heti--sans {
font-family: "Helvetica Neue", Helvetica, Arial, "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.heti--serif {
font-family: "Times New Roman", Times, "Songti SC", STSong, SimSun, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.heti--classic {
font-family: "Times New Roman", Times, "Songti SC", STSong, SimSun, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.heti--classic h1,
.heti--classic h2,
.heti--classic h3,
.heti--classic h4,
.heti--classic h5,
.heti--classic h6 {
font-weight: 800; }
.heti--classic h1,
.heti--classic h2,
.heti--classic h3,
.heti--classic h4,
.heti--classic h5,
.heti--classic h6,
.heti--classic blockquote,
.heti--classic cite,
.heti--classic q {
font-family: "Times New Roman", Times, "Kaiti SC", STKaiti, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.heti--classic figcaption,
.heti--classic caption,
.heti--classic th {
font-family: "Helvetica Neue", Helvetica, Arial, "Pingfang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.heti--columns-1, .heti--columns-2, .heti--columns-3, .heti--columns-4, .heti--columns-16em, .heti--columns-20em, .heti--columns-24em, .heti--columns-28em, .heti--columns-32em, .heti--columns-36em, .heti--columns-40em, .heti--columns-44em, .heti--columns-48em, .heti comma {
max-width: none;
column-gap: 2em; }
.heti--columns-1 p, .heti--columns-2 p, .heti--columns-3 p, .heti--columns-4 p, .heti--columns-16em p, .heti--columns-20em p, .heti--columns-24em p, .heti--columns-28em p, .heti--columns-32em p, .heti--columns-36em p, .heti--columns-40em p, .heti--columns-44em p, .heti--columns-48em p, .heti comma p {
margin-block-start: 6px;
margin-block-end: 12px;
text-indent: 2em; }
.heti--columns-1 {
column-count: 1; }
.heti--columns-2 {
column-count: 2; }
.heti--columns-3 {
column-count: 3; }
.heti--columns-4 {
column-count: 4; }
.heti--columns-16em {
column-width: 16em; }
.heti--columns-20em {
column-width: 20em; }
.heti--columns-24em {
column-width: 24em; }
.heti--columns-28em {
column-width: 28em; }
.heti--columns-32em {
column-width: 32em; }
.heti--columns-36em {
column-width: 36em; }
.heti--columns-40em {
column-width: 40em; }
.heti--columns-44em {
column-width: 44em; }
.heti--columns-48em {
column-width: 48em; }
.heti--vertical {
max-width: none;
max-height: 42em;
writing-mode: vertical-rl;
letter-spacing: 0.125em; }
.heti--vertical h1,
.heti--vertical h2,
.heti--vertical h3,
.heti--vertical h4,
.heti--vertical h5,
.heti--vertical h6 {
text-align: start; }
.heti--ancient, .heti--poetry {
font-family: "Times New Roman", Times, "Songti SC", STSong, SimSun, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.heti--ancient h1,
.heti--ancient h2,
.heti--ancient h3,
.heti--ancient h4,
.heti--ancient h5,
.heti--ancient h6, .heti--poetry h1,
.heti--poetry h2,
.heti--poetry h3,
.heti--poetry h4,
.heti--poetry h5,
.heti--poetry h6 {
font-family: "Times New Roman", Times, "Kaiti SC", STKaiti, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-weight: 800;
text-align: center; }
.heti--ancient h1 .heti-meta,
.heti--ancient h2 .heti-meta,
.heti--ancient h3 .heti-meta,
.heti--ancient h4 .heti-meta,
.heti--ancient h5 .heti-meta,
.heti--ancient h6 .heti-meta, .heti--poetry h1 .heti-meta,
.heti--poetry h2 .heti-meta,
.heti--poetry h3 .heti-meta,
.heti--poetry h4 .heti-meta,
.heti--poetry h5 .heti-meta,
.heti--poetry h6 .heti-meta {
font-weight: 400; }
@media screen and (min-width: 640px) {
.heti--ancient h1 .heti-meta,
.heti--ancient h2 .heti-meta,
.heti--ancient h3 .heti-meta,
.heti--ancient h4 .heti-meta,
.heti--ancient h5 .heti-meta,
.heti--ancient h6 .heti-meta, .heti--poetry h1 .heti-meta,
.heti--poetry h2 .heti-meta,
.heti--poetry h3 .heti-meta,
.heti--poetry h4 .heti-meta,
.heti--poetry h5 .heti-meta,
.heti--poetry h6 .heti-meta {
position: absolute;
line-height: inherit;
text-indent: 0;
display: inline;
margin-block-start: 4px;
margin-inline-start: 8px; } }
.heti--ancient .heti-meta, .heti--poetry .heti-meta {
line-height: 24px;
text-align: center;
text-indent: 0; }
.heti--ancient p {
text-indent: 2em; }
.heti--poetry p {
text-align: center;
text-indent: 0; }
.heti--annotation p {
margin-block-start: 0;
margin-block-end: 0;
line-height: 2.25;
text-indent: 2em; }
.heti--annotation em {
-webkit-text-emphasis: filled circle;
-webkit-text-emphasis-position: under;
font-weight: 400; }
.heti--annotation em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti--annotation em:not(:lang(zh)) {
-webkit-text-emphasis: none; }
.heti--annotation .heti-meta {
margin-block-start: 12px;
margin-block-end: 24px; }
.heti .heti-meta {
display: block;
text-indent: 0; }
.heti .heti-verse {
text-align: center;
text-indent: 0; }
.heti .heti-large {
font-size: 18px;
line-height: 24px; }
.heti .heti-x-large {
font-size: 20px;
line-height: 30px; }
.heti .heti-small {
font-size: 14px;
line-height: 24px; }
.heti .heti-x-small {
font-size: 12px;
line-height: 18px; }
.heti .heti-list-latin {
list-style-type: upper-latin; }
.heti .heti-list-latin ol {
list-style-type: lower-roman; }
.heti .heti-list-latin ol ol {
list-style-type: lower-latin; }
.heti .heti-list-han {
list-style-type: cjk-ideographic; }
.heti .heti-list-han ol {
list-style-type: decimal; }
.heti .heti-list-han ol ol {
list-style-type: decimal-leading-zero; }
.heti .heti-hang {
position: absolute;
line-height: inherit;
text-indent: 0; }
.heti .heti-em {
-webkit-text-emphasis: filled circle;
-webkit-text-emphasis-position: under; }
.heti .heti-em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti .heti-em:not(:lang(zh)) {
-webkit-text-emphasis: none; }
eti .heti-em:not(:lang(zh)):not(:lang(ja)):not(:lang(kr)), .heti .heti-em:not(:lang(zh)) {
-webkit-text-emphasis: none; }