hexo-theme-butterfly/source/css/_layout/aside.styl
Jerry 4aacafdae1 feat: 適配hexo 5.1.0 prismjs caption
feat: code-font-size 也會影響行內代碼塊字體大小 #325
fix: 修復aside recent post的 time 在safari沒有顯示的bug
fix: 修復 prismjs 在 tags-toggle 外掛標簽裏,代碼塊顯示一行的bugs
style: 刪除不必要的css
2020-08-22 23:17:28 +08:00

266 lines
5.0 KiB
Stylus

#aside_content
width: 25%
> .card-widget:first-child
margin-top: 0
.card-widget
overflow: hidden
margin-top: 1rem
border-radius: 8px
background: var(--card-bg)
box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06)
transition: all .3s
&:hover
box-shadow: 0 4px 12px 12px rgba(7, 17, 27, .15)
.card-info
img
width: 110px
height: 110px
border-radius: 70px
transition: all .5s
&:hover
transform: rotate(360deg)
.author-info
&__name
font-weight: 500
font-size: 1.57em
&__description
margin-top: -.3rem
.card-info-data
display: table
padding: .7rem 0
width: 100%
table-layout: fixed
& > .card-info-data-item
display: table-cell
a
.headline
@extend .limit-one-line
color: var(--font-color)
font-size: 1em
.length_num
margin-top: -.3rem
color: var(--text-highlight-color)
font-size: 1.4em
.card-info-social-icons
margin: .3rem 0 -.3rem
.social-icon
margin: 0 .5rem
color: var(--font-color)
font-size: 1.4em
cursor: pointer
i
transition: all .3s
&:hover
transform: rotate(540deg)
#card-info-btn
display: block
background-color: var(--btn-bg)
color: var(--btn-color)
text-align: center
line-height: 2.4
span
padding-left: .5rem
.card-content
padding: 1rem 1.2rem
.item-headline
font-size: 1.2em
span
margin-left: .5rem
.sticky_layout
+minWidth900()
position: sticky
position: -webkit-sticky
top: 20px
.card-tag-cloud
a
display: inline-block
padding: 0 .1rem
&:hover
color: $text-hover !important
.aside-list
margin: 10px 0 -15px
& > .aside-list-item
display: flex
align-items: center
margin-bottom: 10px
// padding 8px 0
// border-bottom: 1px dashed #f5f5f5
// height: 4.72em
.thumbnail
// float: left
overflow: hidden
width: w = 4.2em
height: w
border-radius: w
& > img
width: 100%
height: 100%
transition: all .6s
object-fit: cover
&:hover
transform: scale(1.1)
.content
flex: 1
padding-left: 10px
word-break: break-all
& > .name
@extend .limit-one-line
& > time
color: $theme-meta-color
font-size: 85%
& > .comment
font-size: 90%
& > .title,
& > .comment
@extend .limit-more-line
color: var(--font-color)
line-height: 1.5
-webkit-line-clamp: 2
&:hover
color: $text-hover
.card-recent-post
.thumbnail
border-radius: 0 !important
.no-aside-cover
title
height: auto
.card-archives ul.card-archive-list,
.card-categories ul.card-category-list
margin: 0
padding: .2rem 0 0
list-style: none
.card-archives ul.card-archive-list > .card-archive-list-item,
.card-categories ul.card-category-list > .card-category-list-item
a
display: inline-block
padding: .15rem .5rem
width: 100%
color: var(--font-color)
transition: all .4s
&:hover
padding: .15rem .85rem
background-color: var(--text-bg-hover)
span
@extend .limit-one-line
display: inline-block
vertical-align: bottom
&:first-child
width: 80%
&:last-child
width: 20%
text-align: right
&.more
span
padding-right: .3rem
width: auto !important
transition: .5s
&:hover
span
padding-right: .6rem
.card-categories
.card-category-list
&.child
padding: 0 0 0 .8rem
> .parent
.card-category-list
&-name
width: 70% !important
&-count
width: calc(100% - 70% - 20px)
text-align: right
i
float: right
margin-right: -.35rem
padding: .35rem
transition: transform .3s
transform: rotate(0)
&.expand
transform: rotate(-90deg)
if hexo-config('aside.card_categories.expand') == false
+ .child
display: none
.card-webinfo
.webinfo
padding: .2rem .5rem
.webinfo-item
display: flex
align-items: center
padding: 4px 0 0
div
&:first-child
flex: 1
padding-right: 1rem
+maxWidth900()
#aside_content
width: 100% !important
#aside_content
.card-widget:first-child
margin-top: 1rem
+minWidth900()
#aside_content
.card-widget
if hexo-config('aside.position') == 'right'
margin-left: 15px
else
margin-right: 15px
if hexo-config('aside.mobile') == false
+maxWidth768()
#aside_content
display: none