hexo-theme-stellar/source/css/_layout/partial/cover.styl

76 lines
1.5 KiB
Stylus

.l_cover
height: 100vh
text-align: center
display: flex
flex-direction: column
justify-content: center
align-items: center
position: relative
&.post
height: inherit
.l_cover .cover-wrap
margin-bottom: 0
display: flex
flex-direction: column
justify-content: center
align-items: center
.cover-title
font-weight: 700
font-size: 1.5rem
margin: 1rem 0
line-height: 1.2
color: var(--text-p0)
.description
margin: 1rem 0
.start-wrap
margin: 2rem 0
flex-shrink: 0
a.start
display: inline-block
.l_cover.post
.cover
z-index: -1
width: 100%
height: 30vh
max-width: $device-2k
min-height: 150px
max-height: 400px
@media screen and (max-width: $device-tablet)
height: 25vh
@media screen and (max-width: $device-mobile)
height: 20vh
@media screen and (min-width: $device-2k)
margin-top: 4rem
.img
border-radius: 2rem
.l_cover.post .cover-wrap
z-index: 1
.article-title
text-align: center
padding: 1rem
margin: 1em 0 0 0
@media screen and (min-width: $device-2k)
font-size: 3rem
.l_cover.wiki .cover-wrap
max-width: $device-mobile
.preview
margin-bottom: 2rem
img
object-fit: contain
min-width: 96px
min-height: 96px
max-height: 35vh
max-width: 100%
@media screen and (max-width: $device-mobile)
max-width: 60%
.cover-title
&:first-child
font-size: 3rem