$page-container-gap = 2rem
.page-template-container {
&.keep-container {
keep-container(1, 0, $page-container-gap)
.page-template-bottom {
padding $page-container-gap
}
}
&.has-page-cover {
.page-template-bottom {
padding-top $page-container-gap
padding-bottom $page-container-gap
}
}
.page-template-top {
width 100%
overflow hidden
background-color var(--background-color-2)
border-top-left-radius var(--box-border-radius)
border-top-right-radius var(--box-border-radius)
.page-cover {
position absolute
top 0
left 0
box-sizing border-box
width 100%
height 100%
object-fit cover
}
.page-cover-title {
position absolute
bottom 1rem
left 1rem
box-sizing border-box
padding 1rem 1.6rem
overflow-y auto
color var(--text-color-3)
font-weight 600
font-size 1.6rem
line-height 1.6
background var(--background-color-1-transparent)
border-radius var(--box-border-radius)
-webkit-backdrop-filter blur(1px)
backdrop-filter blur(1px)
}
}
.page-template-bottom {
width 100%
.page-content {
color var(--text-color-3)
&.has-data {
margin-top $page-container-gap
}
h1
h2
h3
h4
h5
h6 {
&:first-child {
margin-top 0
}
}
}
}
}