blog-web/themes/yilia/source-src/css/article-inner.scss
2022-03-14 19:33:05 +08:00

190 lines
3.3 KiB
SCSS

.article-inner {
border-color: #d1d1d1;
// 目录标题
h1,h2,h3,h4,h5,h6 {
font-weight: 900;
&:first-child {
margin-top: 0;
}
}
h1 {
font-size: 28px;
font-size: 1.75rem;
line-height: 1.25;
margin-top: 2em;
margin-bottom: 1em;
&:first-child {
display: inline;
}
}
h2 {
font-size: 23px;
font-size: 1.4375rem;
line-height: 1.2173913043;
}
h3 {
font-size: 19px;
font-size: 1.1875rem;
line-height: 1.1052631579;
}
h4,h5,h6{
font-size: 16px;
font-size: 1rem;
line-height: 1.3125;
}
h6 {
font-style: italic;
}
}
.article-entry{
line-height: 1.8em;
padding-right: $articlePadding;
padding-left: $articlePadding;
.post-count { // 字数统计
color: rgb(185, 185, 185);
font-size: 14px;
.count-item {
display: inline-block;
padding-right: 10px;
span {
font-weight: bold;
}
}
}
img {
transition: transform 0.3s ease-out,box-shadow 0.4s ease;
cursor: zoom-in;
&:hover {
transform: scale(1.05,1.05);
box-shadow: 0px 0px 10px 2px #87afea;
}
}
p{
margin-top: 1em;
}
p code,li code{
padding: 3px 4px;
margin: 0 3px;
background: #f5ecee;
color: #c7254e;
font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New","Microsoft YaHei";
word-wrap: break-word;
font-size: 14px;
border-radius: $radiusSmall;
}
blockquote {
padding: 15px 20px;
margin-top: 10px;
border-left: 5px solid #657b83;
background: #f6f6f6;
p{
margin-top: 0;
margin-bottom: 0;
}
}
em {
font-style: italic;
}
ul {
li:before{
content: "";
width: 6px;
height: 6px;
border: 1px solid $color9;
border-radius: 10px;
background: #aaa;
display: inline-block;
margin-right: 10px;
margin-top: 10px;
}
}
ol {
counter-reset: item;
li:before{
counter-increment: item;
content: counter(item)".";
margin-right: 10px;
}
}
ul,ol{
margin-top: 1em;
}
li{
ul,ol{
margin-left: 30px;
li:before{
content: "";
background: #dedede;
}
}
}
h1{
margin-top: 30px;
}
h2,h3,h4,h5,h6{
margin-top: 20px;
font-weight: bold;
color: #574C4C;
padding-bottom: 5px;
padding-left: 20px;
border-bottom: 1px solid #ddd;
}
video{
max-width: 100%;
}
strong {
font-weight: bold;
}
.caption{
display: block;
font-size: 0.8em;
color: #aaa;
}
hr{
height: 0;
margin-top: 20px;
margin-bottom: 20px;
border-left: 0;
border-right: 0;
border-top: 1px solid #DDD;
border-bottom: 1px solid #FFF;
}
pre {
line-height: 1.5;
margin-top: 10px;
padding: 5px 15px;
overflow-x: auto;
border: 1px solid #ccc;
font-family: Menlo,Monaco,"Andale Mono","lucida console","Courier New",monospace;
code{
font-size: 14px;
}
}
table{
margin: 15px 0;
border-collapse:collapse;
tr,td{
height:35px;
}
thead tr{
background: #f8f8f8;
}
tbody tr:hover{
background: #efefef;
}
td,th{
border: 1px solid #bbb;
padding: 0 10px;
}
}
figure table{
border: none;
width: auto;
margin: 0;
tbody tr:hover{
background: none;
}
}
}