61 lines
1.2 KiB
SCSS
61 lines
1.2 KiB
SCSS
@use "blog.variable.module.scss" as blog;
|
|
|
|
.blog-container {
|
|
// height: 100%;
|
|
background-color: var(--color-bg);
|
|
padding: 0 5vw;
|
|
|
|
display: grid;
|
|
grid-template-columns: minmax(13vw, 200px) 1fr;
|
|
column-gap: 2vw;
|
|
|
|
aside {
|
|
display: grid;
|
|
grid-template-rows: 40vh 60vh;
|
|
row-gap: 2vh;
|
|
z-index: 2;
|
|
|
|
.blog-summary {
|
|
// 滚动到顶部固定
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
section {
|
|
z-index: 2;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2vh;
|
|
|
|
.blog-section {
|
|
// height: 100%;
|
|
min-height: 100vh;
|
|
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12),
|
|
0 3px 1px -2px rgba(0,0,0,0.06),
|
|
0 1px 5px 0 rgba(0,0,0,0.12),
|
|
0 -1px 0.5px 0 rgba(0,0,0,0.09);
|
|
|
|
.module-title {
|
|
background-color: blog.$theme-color;
|
|
padding: 5px;
|
|
border: 2px solid blog.$theme-color;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
font-size: blog.$large-font-size;
|
|
font-family: "华文楷体", serif;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-item {
|
|
background-color: var(--color-card-bg);
|
|
border: 1px solid var(--color-border-bg);
|
|
border-radius: blog.$border-radius;
|
|
// box-shadow: 3px 3px 3px #CFCFCF;
|
|
}
|
|
}
|
|
|
|
|