223 lines
3.6 KiB
Stylus
223 lines
3.6 KiB
Stylus
$avatarWidth = 46px
|
|
$arrow-icon-width = 16px
|
|
$post-nav-max-width = 220px
|
|
$article-title-font-size = 1.6rem
|
|
|
|
.article-content-container {
|
|
|
|
keep-container(false, 0, 0, 2rem, 2rem)
|
|
|
|
+keep-mobile() {
|
|
padding 1.2rem 0.2rem
|
|
box-shadow none
|
|
|
|
&:hover {
|
|
box-shadow none
|
|
}
|
|
}
|
|
|
|
.article-title {
|
|
color var(--second-text-color)
|
|
font-weight 600
|
|
font-size $article-title-font-size
|
|
|
|
+keep-tablet() {
|
|
font-size $article-title-font-size * 0.9
|
|
}
|
|
|
|
+keep-mobile() {
|
|
font-size $article-title-font-size * 0.8
|
|
}
|
|
}
|
|
|
|
|
|
.article-header {
|
|
position relative
|
|
box-sizing border-box
|
|
width 100%
|
|
height $avatarWidth
|
|
padding-left $avatarWidth
|
|
|
|
.avatar {
|
|
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%
|
|
|
|
img {
|
|
width 100%
|
|
height 100%
|
|
background var(--avatar-background-color)
|
|
border-radius 50%
|
|
}
|
|
}
|
|
|
|
|
|
.info {
|
|
display flex
|
|
flex-direction column
|
|
justify-content space-between
|
|
box-sizing border-box
|
|
width 100%
|
|
height 100%
|
|
margin-left 10px
|
|
padding 2px 0
|
|
|
|
.author {
|
|
display flex
|
|
align-items center
|
|
font-weight 600
|
|
font-size 1.18rem
|
|
|
|
.name {
|
|
color var(--default-text-color)
|
|
}
|
|
|
|
.author-label {
|
|
margin-left 10px
|
|
padding 0 5px
|
|
color #fff
|
|
font-weight 500
|
|
font-size 0.8rem
|
|
background var(--selection-color)
|
|
border-radius 5px
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.article-header
|
|
.article-header-meta-info {
|
|
margin-top 16px
|
|
+keep-tablet() {
|
|
transform scale(0.9)
|
|
transform-origin left top
|
|
}
|
|
}
|
|
|
|
|
|
.article-content {
|
|
margin-top $component-spacing-value
|
|
padding-bottom 10px
|
|
color var(--default-text-color)
|
|
word-wrap break-word
|
|
border-bottom 1px solid var(--border-color)
|
|
}
|
|
|
|
|
|
.post-tags-box {
|
|
display none
|
|
justify-content center
|
|
margin-top 1.6rem
|
|
font-size 1.1rem
|
|
|
|
+keep-tablet() {
|
|
display flex
|
|
}
|
|
|
|
+keep-mobile() {
|
|
margin-top 1.2rem
|
|
font-size 1rem
|
|
}
|
|
|
|
|
|
.tag-item {
|
|
margin 0 0.25rem
|
|
}
|
|
}
|
|
|
|
.post-copyright-info {
|
|
width 100%
|
|
margin-top $component-spacing-value
|
|
|
|
+keep-tablet() {
|
|
margin-top $component-spacing-value * 0.8
|
|
}
|
|
}
|
|
|
|
|
|
.article-nav {
|
|
height 40px
|
|
margin-top $component-spacing-value
|
|
|
|
.article-prev
|
|
.article-next {
|
|
box-sizing border-box
|
|
max-width $post-nav-max-width
|
|
height 100%
|
|
|
|
keep-container(true, 1.03, 1.03, 10px, 0)
|
|
|
|
a {
|
|
position relative
|
|
display block
|
|
box-sizing border-box
|
|
width 100%
|
|
height 100%
|
|
|
|
&.prev {
|
|
padding-left $arrow-icon-width
|
|
}
|
|
|
|
&.next {
|
|
padding-right $arrow-icon-width
|
|
}
|
|
|
|
.arrow-icon {
|
|
position absolute
|
|
top 0
|
|
width $arrow-icon-width
|
|
height 100%
|
|
|
|
&.left {
|
|
left 0
|
|
}
|
|
|
|
&.right {
|
|
right 0
|
|
}
|
|
}
|
|
|
|
.title {
|
|
width 100%
|
|
height 100%
|
|
}
|
|
}
|
|
}
|
|
|
|
.article-prev {
|
|
float left
|
|
}
|
|
|
|
.article-next {
|
|
float right
|
|
}
|
|
|
|
.post-nav-item {
|
|
display none
|
|
|
|
+keep-tablet() {
|
|
display inline-block
|
|
}
|
|
}
|
|
|
|
|
|
.post-nav-title-item {
|
|
overflow hidden
|
|
white-space nowrap
|
|
text-overflow ellipsis
|
|
|
|
+keep-tablet() {
|
|
display none
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|