88 lines
1.6 KiB
SCSS
88 lines
1.6 KiB
SCSS
@use "blog.variable.module.scss" as blog;
|
|
|
|
$blog-content-list-item-height: 38vh;
|
|
$blog-content-title-font-size: 1.6rem;
|
|
$hr-color: #CFCFCF;
|
|
|
|
.blog-content-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 5vh;
|
|
padding: 10vh 2vw 2vh 2vw;
|
|
position: relative;
|
|
|
|
.blog-content {
|
|
width: 100%;
|
|
height: $blog-content-list-item-height;
|
|
padding: 4vh 1vw;
|
|
|
|
border: 1px solid blog.$border-color;
|
|
border-radius: 15px;
|
|
box-shadow: 0 0 5px blog.$border-color;
|
|
}
|
|
|
|
.blog-content-empty {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.blog-content-summary {
|
|
display: grid;
|
|
grid-template-rows: 1fr 1fr 8vh 1fr 1fr;
|
|
justify-items: center;
|
|
align-items: center;
|
|
gap: 2vh;
|
|
|
|
.title {
|
|
font-size: $blog-content-title-font-size;
|
|
font-family: "华文楷体", serif;
|
|
font-weight: bolder;
|
|
position: relative;
|
|
}
|
|
|
|
// 自动展开下划线
|
|
.title:after {
|
|
content: "";
|
|
width: 0;
|
|
height: 2px;
|
|
background: blog.$theme-color;
|
|
// 初始位置在底部中间
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
// 动画时间
|
|
transition: all .8s;
|
|
}
|
|
|
|
// 悬浮式展开到100%
|
|
.title:hover::after {
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.content {
|
|
font-size: blog.$normal-font-size;
|
|
line-height: 150%;
|
|
}
|
|
|
|
hr {
|
|
width: 10%;
|
|
height: 1px;
|
|
background-color: $hr-color;
|
|
border: none;
|
|
}
|
|
|
|
span, p {
|
|
font-family: '华为行楷',serif;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.blog-content-list {
|
|
padding: 10px;
|
|
}
|
|
}
|