80 lines
1.3 KiB
Stylus
80 lines
1.3 KiB
Stylus
.links
|
|
.card
|
|
box-shadow none
|
|
min-width 33%
|
|
background-color transparent
|
|
border 0
|
|
|
|
.card-body
|
|
margin 1rem 0
|
|
padding 1rem
|
|
border-radius .3rem
|
|
display block
|
|
width 100%
|
|
height 100%
|
|
|
|
&:hover
|
|
.link-avatar
|
|
transform scale(1.1)
|
|
|
|
.card-content
|
|
display flex
|
|
flex-wrap nowrap
|
|
width 100%
|
|
height 3.5rem
|
|
|
|
.link-avatar
|
|
flex none
|
|
width 3rem
|
|
height 3rem
|
|
margin-right .75rem
|
|
object-fit cover
|
|
transition-duration .2s
|
|
transition-timing-function ease-in-out
|
|
|
|
img
|
|
width 100%
|
|
height 100%
|
|
border-radius 50%
|
|
background-color transparent
|
|
object-fit cover
|
|
|
|
.link-text
|
|
flex 1
|
|
display grid
|
|
flex-direction column
|
|
line-height 1.5
|
|
|
|
.link-title
|
|
overflow hidden
|
|
text-overflow ellipsis
|
|
white-space nowrap
|
|
color var(--text-color)
|
|
font-weight bold
|
|
|
|
.link-intro
|
|
max-height 2rem
|
|
font-size 0.85rem
|
|
line-height 1.2
|
|
color var(--sec-text-color)
|
|
display -webkit-box
|
|
-webkit-box-orient vertical
|
|
-webkit-line-clamp 2
|
|
text-overflow ellipsis
|
|
overflow hidden
|
|
|
|
@media (max-width 767px)
|
|
.links
|
|
display flex
|
|
flex-direction column
|
|
justify-content center
|
|
align-items center
|
|
|
|
.card
|
|
padding-left 2rem
|
|
padding-right 2rem
|
|
|
|
@media (min-width 768px)
|
|
.link-text:only-child
|
|
margin-left 1rem
|