158 lines
3.6 KiB
Stylus
158 lines
3.6 KiB
Stylus
$friend-link-item-height = 82px
|
|
$friend-link-item-height-tablet = 68px
|
|
$friend-link-item-interval = 16px
|
|
$friend-link-item-border-radius = 6px
|
|
|
|
.page-template-container {
|
|
|
|
keep-container(false, 0, 0, 2rem, 2rem)
|
|
|
|
.page-template-content {
|
|
color var(--default-text-color)
|
|
|
|
h1
|
|
h2
|
|
h3
|
|
h4
|
|
h5
|
|
h6 {
|
|
|
|
&:first-child {
|
|
margin-top 0
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
if (hexo-config('menu.Links')) {
|
|
.friends-link-container {
|
|
|
|
.friends-link-list {
|
|
position relative
|
|
|
|
.friends-link-item {
|
|
position relative
|
|
float left
|
|
box-sizing border-box
|
|
width 50%
|
|
height $friend-link-item-height
|
|
padding-bottom $friend-link-item-interval
|
|
cursor pointer
|
|
|
|
+keep-tablet() {
|
|
height $friend-link-item-height-tablet
|
|
}
|
|
|
|
&:nth-child(odd) {
|
|
padding-right $friend-link-item-interval * 0.5
|
|
}
|
|
|
|
&:nth-child(even) {
|
|
padding-left $friend-link-item-interval * 0.5
|
|
}
|
|
|
|
.content {
|
|
position relative
|
|
box-sizing border-box
|
|
width 100%
|
|
height 100%
|
|
padding-left $friend-link-item-height - $friend-link-item-interval
|
|
border-radius $friend-link-item-border-radius
|
|
box-shadow 1px 1px 2px var(--shadow-color)
|
|
|
|
|
|
+keep-tablet() {
|
|
padding-left $friend-link-item-height-tablet - $friend-link-item-interval
|
|
}
|
|
|
|
&:hover {
|
|
box-shadow 1px 1px 6px var(--shadow-color)
|
|
|
|
.info .name {
|
|
color var(--primary-color)
|
|
}
|
|
}
|
|
|
|
.radius {
|
|
border-top-left-radius $friend-link-item-border-radius
|
|
border-bottom-left-radius $friend-link-item-border-radius
|
|
}
|
|
|
|
.avatar {
|
|
position absolute
|
|
top 0
|
|
left 0
|
|
display flex
|
|
align-items center
|
|
justify-content center
|
|
width $friend-link-item-height - $friend-link-item-interval
|
|
height 100%
|
|
color var(--second-text-color)
|
|
font-size 2rem
|
|
background var(--second-background-color)
|
|
|
|
|
|
+keep-tablet() {
|
|
width $friend-link-item-height-tablet - $friend-link-item-interval
|
|
}
|
|
|
|
img {
|
|
position relative
|
|
box-sizing border-box
|
|
width 100%
|
|
height 100%
|
|
}
|
|
}
|
|
|
|
|
|
.info {
|
|
position relative
|
|
display flex
|
|
flex-direction column
|
|
align-items center
|
|
justify-items flex-start
|
|
box-sizing border-box
|
|
width 100%
|
|
height 100%
|
|
padding 10px
|
|
|
|
+keep-tablet() {
|
|
padding 6px
|
|
}
|
|
|
|
.name {
|
|
width 100%
|
|
height 60%
|
|
color var(--second-text-color)
|
|
font-size 1.28rem
|
|
|
|
+keep-tablet() {
|
|
font-size 1.08rem
|
|
}
|
|
}
|
|
|
|
.description {
|
|
width 100%
|
|
height 40%
|
|
color var(--third-text-color)
|
|
font-size 1rem
|
|
|
|
|
|
+keep-tablet() {
|
|
font-size 0.98rem
|
|
}
|
|
}
|
|
|
|
.ellipsis {
|
|
overflow hidden
|
|
white-space nowrap
|
|
text-overflow ellipsis
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|