This commit is contained in:
Sivan 2020-02-18 18:59:09 +08:00
parent ddd5664c17
commit 8555840ba3
2 changed files with 270 additions and 238 deletions

View file

@ -101,8 +101,12 @@ a {
background-image: linear-gradient(to left, transparent 11px, #eee 1px);
}
.anchor {
margin-inline-start: 0.25em;
}
/** 导航样式 **/
.article__toc details ol {
.article .article__toc ol {
margin-block-start: 24px;
margin-block-end: 24px;
}
@ -206,37 +210,22 @@ a {
color: rgba(255, 255, 255, 0.95);
}
/** 演示区块 **/
.demo__main {
margin-block-start: 24px;
margin-block-end: 24px;
}
/** 演示卡片 **/
.card {
box-sizing: border-box;
position: relative;
left: -12px;
width: 100%;
margin-block-start: 24px;
margin-block-end: 72px;
padding-block-start: 24px;
padding-block-end: 24px;
padding-inline-start: 16px;
padding-inline-end: 16px;
margin-block-end: 48px;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 12px;
padding-inline-end: 12px;
border-radius: 2px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
background-color: #fff;
}
.card__vertical-container {
box-sizing: border-box;
width: 100%;
height: 30em;
border: 1px solid #eee;
overflow: auto;
writing-mode: vertical-rl;
}
.article .card {
text-align: left;
}
@ -249,7 +238,30 @@ a {
padding-inline-start: 0;
padding-inline-end: 72px;
line-height: 24px;
border-block-start: 1px solid #ccc;
border-block-start: 1px solid #eee;
}
.card__vertical-container {
box-sizing: border-box;
width: 100%;
height: 30em;
border: 1px solid #eee;
overflow: auto;
writing-mode: vertical-rl;
}
/** 演示区块 **/
.demo {
margin-block-start: 24px;
margin-block-end: 24px;
}
.section {
width: 100%;
max-height: 85vh;
margin-block-start: 12px;
margin-block-end: 12px;
overflow: auto;
}
@media screen and (min-width: 640px) {
@ -298,6 +310,7 @@ a {
position: absolute;
left: -1em;
width: 1em;
margin-inline-start: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: inherit;
@ -312,23 +325,33 @@ a {
}
.card {
box-sizing: border-box;
left: -20%;
width: 140%;
margin-block-start: 24px;
margin-block-end: 72px;
padding-block-start: 24px;
padding-block-end: 24px;
padding-inline-start: 32px;
padding-inline-end: 32px;
}
.section {
height: auto;
overflow: visible;
}
}
@media screen and (min-width: 1000px) {
@media screen and (min-width: 900px) {
.article__toc {
position: relative;
z-index: 1;
float: right;
width: 192px;
margin-block-start: 0;
margin-block-start: -1px;
margin-block-end: 12px;
margin-inline-start: 32px;
margin-inline-end: -48px;
margin-inline-end: -16px;
padding-block-start: 12px;
padding-block-end: 12px;
padding-inline-start: 8px;
@ -338,7 +361,8 @@ a {
background-color: #fff;
}
.article__toc details ol {
.article .article__toc ol {
margin-block-start: 12px;
margin-block-end: 0;
}
}