hexo-theme-butterfly/source/css/_layout/flink.styl

77 lines
1.6 KiB
Stylus

.flink#article-container
.flink-desc
margin: .2rem 0 .5rem
.flink-list
overflow: auto
padding: 10px 10px 0
text-align: center
& > .flink-list-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)
@media screen and (max-width: 1100px)
width: calc(50% - 15px) !important
@media screen and (max-width: 600px)
width: calc(100% - 15px) !important
&:hover
img
transform: rotate(360deg)
&: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
.flink-item-name
@extend .limit-one-line
padding: 16px 10px 0 0
height: 40px
font-weight: bold
font-size: 20px
.flink-item-desc
@extend .limit-one-line
padding: 16px 10px
height: 50px
font-size: 13px