hexo-theme-keep/source/css/layout/_partial/page-template.styl

158 lines
3.6 KiB
Stylus
Raw Normal View History

$friend-link-item-height = 82px
$friend-link-item-height-tablet = 68px
$friend-link-item-interval = 16px
$friend-link-item-border-radius = 6px
2021-01-29 15:06:06 +08:00
.page-template-container {
keep-container(false, 0, 0, 30px, 30px)
2020-06-04 22:11:27 +08:00
2021-01-29 15:06:06 +08:00
.page-template-content {
color var(--default-text-color)
h1
h2
h3
h4
h5
h6 {
&:first-child {
margin-top 0
}
}
}
2020-12-07 15:51:52 +08:00
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
2020-12-07 15:51:52 +08:00
+keep-tablet() {
height $friend-link-item-height-tablet
2020-12-07 15:51:52 +08:00
}
&: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)
2020-12-07 15:51:52 +08:00
2020-12-07 15:51:52 +08:00
+keep-tablet() {
padding-left $friend-link-item-height-tablet - $friend-link-item-interval
2020-12-07 15:51:52 +08:00
}
&:hover {
box-shadow 1px 1px 6px var(--shadow-color)
2021-01-22 19:04:05 +08:00
.info .name {
color var(--primary-color)
2021-01-22 19:04:05 +08:00
}
}
.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)
2020-12-07 15:51:52 +08:00
+keep-tablet() {
width $friend-link-item-height-tablet - $friend-link-item-interval
2020-12-07 15:51:52 +08:00
}
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
2020-12-07 15:51:52 +08:00
+keep-tablet() {
padding 6px
2020-12-07 15:51:52 +08:00
}
.name {
width 100%
height 60%
color var(--second-text-color)
font-size 1.28rem
2020-12-07 15:51:52 +08:00
+keep-tablet() {
font-size 1.08rem
2020-12-07 15:51:52 +08:00
}
}
.description {
width 100%
height 40%
color var(--third-text-color)
font-size 1rem
2020-12-07 15:51:52 +08:00
2020-12-07 15:51:52 +08:00
+keep-tablet() {
font-size 0.98rem
2020-12-07 15:51:52 +08:00
}
}
.ellipsis {
overflow hidden
white-space nowrap
text-overflow ellipsis
}
}
}
}
}
}
}
}