Files
hexo-theme-butterfly/source/css/_layout/flink.styl
2020-03-28 03:20:36 +08:00

86 lines
1.9 KiB
Stylus

.flink#article-container
.post-cards
margin: -10px 10px 0
.md-links
overflow: auto
text-align: center
& > .md-links-item
position: relative
float: left
overflow: hidden
margin: 20px 7px
width: calc(100% / 3 - 15px)
height: 90px
border-radius: 8px
line-height: 17px
transform: perspective(1px) translateZ(0)
&:hover
img
transform: rotate(540deg)
&:before
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: -1
background: $light-blue
content: ''
transition-timing-function: ease-out
transition-duration: .3s
transition-property: transform
transform: scale(0)
&:hover:before,
&:focus:before,
&:active:before
transform: scale(1)
a
color: $font-color
text-decoration: none
img
float: left
margin: 13px 0 0 10px
width: 65px
height: 65px
border-radius: 35px
transition: all .3s
.img-alt
display: none
.md-links-title
overflow: hidden
padding: 16px 10px 0 0
height: 40px
text-overflow: ellipsis
white-space: nowrap
font-weight: bold
font-size: 20px
.md-links-des
overflow: hidden
padding: 16px 10px
height: 50px
text-overflow: ellipsis
white-space: nowrap
font-size: 13px
@media screen and (max-width: 1100px)
.flink
.md-links
.md-links-item
width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
.flink
.md-links
.md-links-item
width: calc(100% - 15px) !important