hexo-theme-volantis
Version:
Elegant and powerful theme for Hexo.
97 lines (92 loc) • 2.1 kB
text/stylus
.article-title
font-weight: 500
margin-bottom: $gap * 0.75
line-height: 1.4
a
color: var(--color-h1)
&:hover
color: $color-hover
&[pin]
margin-right: 36px
.article-desc
word-break: break-word
.post-v3
overflow: hidden
text-align: justify
.md
color: var(--color-p)
.pin
position: absolute
width: 20px
height: 20px
border-radius: 20px
right: $gap * 1.5
top: $gap * 1.5
z-index: 1
pointer-events: none
.meta-v3[line_style='solid']
border-top: 1px solid alpha($color-text, 0.1)
.meta-v3[line_style='dashed']
border-top: 2px dashed alpha($color-text, 0.1)
.meta-v3[line_style='dotted']
border-top: 4px dotted alpha($color-text, 0.1)
.meta-v3
margin-top: $gap
padding-top: $gap * 0.75
display: flex
flex-wrap: wrap
justify-content: space-between
color: var(--color-meta)
>div
display: flex
align-items: center
user-select: none
time
font-size: $fontsize-meta
.category-link
font-size: $fontsize-meta
color: var(--color-meta)
-webkit-font-smoothing: auto
-moz-osx-font-smoothing: auto
&:hover
color: $color-hover
.readmore
font-weight: bold
.avatar
line-height: 0
margin-right: .75em
img
width: 24px
height: 24px
display: block
border-radius: 12px
object-fit: cover
.headimg-div
display: block
margin-left: 0 - 1.5 * $gap
margin-top: 0 - 1.5 * $gap
margin-bottom: 1.25 * $gap
width: "calc(100% + 3 * %s)" % $gap
.headimg-a
display: block
overflow: hidden
height: 280px
@media screen and (max-width: $device-tablet)
height: 250px
@media screen and (max-width: $device-mobile)
height: 220px
@media screen and (max-width: $device-mobile-l)
height: 190px
.headimg
object-fit: cover
width: 100%
height: 100%
transition transform 3s ease-out
&:hover
transform: scale(1.1)
&.lazyload:not(.placeholder)
transition transform 3s ease-out, opacity .5s ease-out
&:not(.loaded)
opacity: 0
&.loaded
opacity: 1