2022-09-30 10:51:42 +08:00
|
|
|
$avatarWidth = 46px
|
|
|
|
$arrow-icon-width = 16px
|
|
|
|
$post-nav-max-width = 220px
|
|
|
|
$article-title-font-size = 1.6rem
|
2020-10-27 18:11:10 +08:00
|
|
|
|
2020-04-01 12:09:06 +08:00
|
|
|
.article-content-container {
|
2020-03-18 23:14:09 +08:00
|
|
|
|
2022-09-30 10:51:42 +08:00
|
|
|
keep-container(false, 0, 0, 30px, 30px)
|
2020-04-24 22:49:10 +08:00
|
|
|
|
2022-09-27 15:45:18 +08:00
|
|
|
+keep-mobile() {
|
2022-09-30 10:51:42 +08:00
|
|
|
padding 1.2rem 0.2rem
|
|
|
|
box-shadow none
|
2022-09-27 15:45:18 +08:00
|
|
|
}
|
|
|
|
|
2020-03-19 22:12:09 +08:00
|
|
|
.article-title {
|
2022-09-30 10:51:42 +08:00
|
|
|
color var(--second-text-color)
|
|
|
|
font-weight 600
|
|
|
|
font-size $article-title-font-size
|
2020-03-14 16:17:04 +08:00
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-tablet() {
|
2022-09-30 10:51:42 +08:00
|
|
|
font-size $article-title-font-size * 0.9
|
2020-10-27 18:11:10 +08:00
|
|
|
}
|
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-mobile() {
|
2022-09-30 10:51:42 +08:00
|
|
|
font-size $article-title-font-size * 0.8
|
2020-10-27 18:11:10 +08:00
|
|
|
}
|
|
|
|
}
|
2020-06-04 22:11:27 +08:00
|
|
|
|
2020-11-13 14:43:22 +08:00
|
|
|
|
2020-10-27 18:11:10 +08:00
|
|
|
.article-header {
|
2022-09-30 10:51:42 +08:00
|
|
|
position relative
|
|
|
|
box-sizing border-box
|
|
|
|
width 100%
|
|
|
|
height $avatarWidth
|
|
|
|
padding-left $avatarWidth
|
2020-10-27 18:11:10 +08:00
|
|
|
|
|
|
|
.avatar {
|
2022-09-30 10:51:42 +08:00
|
|
|
position absolute
|
|
|
|
top 0
|
|
|
|
left 0
|
|
|
|
box-sizing border-box
|
|
|
|
width $avatarWidth
|
|
|
|
height $avatarWidth
|
|
|
|
padding 1px
|
|
|
|
border 1px solid var(--border-color)
|
|
|
|
border-radius 50%
|
2020-10-27 18:11:10 +08:00
|
|
|
|
|
|
|
img {
|
2022-09-30 10:51:42 +08:00
|
|
|
width 100%
|
|
|
|
height 100%
|
|
|
|
background var(--avatar-background-color)
|
|
|
|
border-radius 50%
|
2020-06-04 22:11:27 +08:00
|
|
|
}
|
2020-03-18 23:14:09 +08:00
|
|
|
}
|
2020-03-14 16:17:04 +08:00
|
|
|
|
2020-10-27 18:11:10 +08:00
|
|
|
|
|
|
|
.info {
|
2022-09-30 10:51:42 +08:00
|
|
|
display flex
|
|
|
|
flex-direction column
|
|
|
|
justify-content space-between
|
|
|
|
box-sizing border-box
|
|
|
|
width 100%
|
|
|
|
height 100%
|
|
|
|
margin-left 10px
|
|
|
|
padding 2px 0
|
2020-10-27 18:11:10 +08:00
|
|
|
|
|
|
|
.author {
|
2022-09-30 10:51:42 +08:00
|
|
|
display flex
|
|
|
|
align-items center
|
|
|
|
font-weight 600
|
|
|
|
font-size 1.18rem
|
2020-10-27 18:11:10 +08:00
|
|
|
|
2021-01-21 16:47:13 +08:00
|
|
|
.name {
|
2022-09-30 10:51:42 +08:00
|
|
|
color var(--default-text-color)
|
2021-01-21 16:47:13 +08:00
|
|
|
}
|
|
|
|
|
2021-01-28 16:23:47 +08:00
|
|
|
.author-label {
|
2022-09-30 10:51:42 +08:00
|
|
|
margin-left 10px
|
|
|
|
padding 0 5px
|
|
|
|
color #fff
|
|
|
|
font-weight 500
|
|
|
|
font-size 0.8rem
|
|
|
|
background var(--selection-color)
|
|
|
|
border-radius 5px
|
2020-10-27 18:11:10 +08:00
|
|
|
}
|
|
|
|
}
|
2020-03-14 16:17:04 +08:00
|
|
|
}
|
2020-03-15 15:45:38 +08:00
|
|
|
}
|
|
|
|
|
2020-03-14 16:17:04 +08:00
|
|
|
|
2022-09-30 10:51:42 +08:00
|
|
|
.article-header
|
|
|
|
.article-header-meta-info {
|
|
|
|
margin-top 16px
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-tablet() {
|
2022-09-30 10:51:42 +08:00
|
|
|
transform scale(0.9)
|
|
|
|
transform-origin left top
|
2020-10-28 22:25:26 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-13 14:43:22 +08:00
|
|
|
|
2020-03-19 22:12:09 +08:00
|
|
|
.article-content {
|
2022-09-30 10:51:42 +08:00
|
|
|
margin-top $component-spacing-value
|
|
|
|
padding-bottom 10px
|
|
|
|
color var(--default-text-color)
|
|
|
|
word-wrap break-word
|
|
|
|
border-bottom 1px solid var(--border-color)
|
2020-03-19 14:51:48 +08:00
|
|
|
}
|
|
|
|
|
2021-11-17 23:20:02 +08:00
|
|
|
|
|
|
|
.post-tags-box {
|
2022-09-30 10:51:42 +08:00
|
|
|
display none
|
|
|
|
justify-content center
|
|
|
|
margin-top 1.6rem
|
|
|
|
font-size 1.1rem
|
2021-11-17 23:20:02 +08:00
|
|
|
|
|
|
|
+keep-tablet() {
|
2022-09-30 10:51:42 +08:00
|
|
|
display flex
|
2021-11-17 23:20:02 +08:00
|
|
|
}
|
|
|
|
|
2021-11-22 21:25:07 +08:00
|
|
|
+keep-mobile() {
|
2022-09-30 10:51:42 +08:00
|
|
|
margin-top 1.2rem
|
|
|
|
font-size 1rem
|
2021-11-22 21:25:07 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
|
2021-11-17 23:20:02 +08:00
|
|
|
.tag-item {
|
2022-09-30 10:51:42 +08:00
|
|
|
margin 0 0.25rem
|
2021-11-17 23:20:02 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-18 18:45:45 +08:00
|
|
|
.post-copyright-info {
|
2022-09-30 10:51:42 +08:00
|
|
|
width 100%
|
|
|
|
margin-top $component-spacing-value
|
2021-11-22 21:25:07 +08:00
|
|
|
|
|
|
|
+keep-tablet() {
|
2022-09-30 10:51:42 +08:00
|
|
|
margin-top $component-spacing-value * 0.8
|
2021-11-22 21:25:07 +08:00
|
|
|
}
|
2020-11-18 18:45:45 +08:00
|
|
|
}
|
2020-03-19 14:51:48 +08:00
|
|
|
|
2021-11-17 23:20:02 +08:00
|
|
|
|
2020-03-19 22:12:09 +08:00
|
|
|
.article-nav {
|
2022-09-30 10:51:42 +08:00
|
|
|
height 40px
|
|
|
|
margin-top $component-spacing-value
|
2020-03-19 18:11:13 +08:00
|
|
|
|
2022-09-30 10:51:42 +08:00
|
|
|
.article-prev
|
|
|
|
.article-next {
|
|
|
|
box-sizing border-box
|
|
|
|
max-width $post-nav-max-width
|
|
|
|
height 100%
|
2020-11-19 11:58:54 +08:00
|
|
|
|
2022-09-30 10:51:42 +08:00
|
|
|
keep-container(true, 1.03, 1.03, 10px, 0)
|
2020-11-19 11:58:54 +08:00
|
|
|
|
|
|
|
a {
|
2022-09-30 10:51:42 +08:00
|
|
|
position relative
|
|
|
|
display block
|
|
|
|
box-sizing border-box
|
|
|
|
width 100%
|
|
|
|
height 100%
|
2020-11-19 11:58:54 +08:00
|
|
|
|
|
|
|
&.prev {
|
2022-09-30 10:51:42 +08:00
|
|
|
padding-left $arrow-icon-width
|
2020-11-19 11:58:54 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
&.next {
|
2022-09-30 10:51:42 +08:00
|
|
|
padding-right $arrow-icon-width
|
2020-11-19 11:58:54 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.arrow-icon {
|
2022-09-30 10:51:42 +08:00
|
|
|
position absolute
|
|
|
|
top 0
|
|
|
|
width $arrow-icon-width
|
|
|
|
height 100%
|
2020-11-19 11:58:54 +08:00
|
|
|
|
|
|
|
&.left {
|
2022-09-30 10:51:42 +08:00
|
|
|
left 0
|
2020-11-19 11:58:54 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
&.right {
|
2022-09-30 10:51:42 +08:00
|
|
|
right 0
|
2020-11-19 11:58:54 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
2022-09-30 10:51:42 +08:00
|
|
|
width 100%
|
|
|
|
height 100%
|
2020-11-19 11:58:54 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-03-19 22:12:09 +08:00
|
|
|
.article-prev {
|
2022-09-30 10:51:42 +08:00
|
|
|
float left
|
2020-03-19 18:11:13 +08:00
|
|
|
}
|
|
|
|
|
2020-03-19 22:12:09 +08:00
|
|
|
.article-next {
|
2022-09-30 10:51:42 +08:00
|
|
|
float right
|
2020-06-06 18:16:50 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.post-nav-item {
|
2022-09-30 10:51:42 +08:00
|
|
|
display none
|
2020-06-06 18:16:50 +08:00
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-tablet() {
|
2022-09-30 10:51:42 +08:00
|
|
|
display inline-block
|
2020-06-06 18:16:50 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-11-19 11:58:54 +08:00
|
|
|
|
2020-06-06 18:16:50 +08:00
|
|
|
.post-nav-title-item {
|
2022-09-30 10:51:42 +08:00
|
|
|
overflow hidden
|
|
|
|
white-space nowrap
|
|
|
|
text-overflow ellipsis
|
2020-11-19 11:58:54 +08:00
|
|
|
|
2020-11-20 12:02:22 +08:00
|
|
|
+keep-tablet() {
|
2022-09-30 10:51:42 +08:00
|
|
|
display none
|
2020-06-06 18:16:50 +08:00
|
|
|
}
|
2020-03-19 18:11:13 +08:00
|
|
|
}
|
|
|
|
}
|
2020-04-28 23:20:17 +08:00
|
|
|
}
|
|
|
|
|