#aside-content width: 26% +minWidth900() if hexo-config('aside.position') == 'right' padding-left: 15px else padding-right: 15px +maxWidth900() width: 100% > .card-widget:first-child margin-top: 0 +maxWidth900() margin-top: 20px .card-widget @extend .cardHover position: relative overflow: hidden margin-top: 20px padding: 20px 24px if hexo-config('aside.mobile') == false +maxWidth768() &:not(#card-toc) display: none .card-info .author-info &__name font-weight: 500 font-size: 1.57em &__description margin-top: -.42em .card-info-data display: table margin: 14px 0 4px 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: -.42em color: var(--text-highlight-color) font-size: 1.4em .card-info-social-icons margin: 6px 0 -6px .social-icon margin: 0 10px color: var(--font-color) font-size: 1.4em i transition: all .3s &:hover transform: rotate(540deg) #card-info-btn display: block margin-top: 14px background-color: var(--btn-bg) color: var(--btn-color) text-align: center line-height: 2.4 &:hover background-color: var(--btn-hover-color) span padding-left: 10px .item-headline padding-bottom: 6px font-size: 1.2em span margin-left: 6px .sticky_layout +minWidth900() position: sticky position: -webkit-sticky top: 20px transition: top .3s .card-tag-cloud a display: inline-block padding: 0 4px &:hover color: $text-hover !important .aside-list & > span display: block margin-bottom: 10px text-align: center & > .aside-list-item display: flex align-items: center padding: 6px 0 &:first-child padding-top: 0 &:not(:last-child) border-bottom: 1px dashed #f5f5f5 &:last-child padding-bottom: 0 .thumbnail overflow: hidden width: w = 4.2em height: w & > img @extend .imgHover .content flex: 1 padding-left: 10px word-break: break-all & > .name @extend .limit-more-line -webkit-line-clamp: 1 & > time, & > .name display: block color: $theme-meta-color font-size: 85% & > .title, & > .comment @extend .limit-more-line color: var(--font-color) font-size: 95% line-height: 1.5 -webkit-line-clamp: 2 &:hover color: $text-hover &.no-cover min-height: 4.4em .card-archives ul.card-archive-list, .card-categories ul.card-category-list margin: 0 padding: 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: flex flex-direction: row padding: 3px 10px color: var(--font-color) transition: all .4s &:hover padding: 3px 17px background-color: var(--text-bg-hover) span @extend .limit-one-line &:first-child flex: 1 .card-categories .card-category-list &.child padding: 0 0 0 16px > .parent > a .card-category-list &-name width: 70% !important &-count width: calc(100% - 70% - 20px) text-align: right i float: right margin-right: -.5em padding: .5em transition: transform .3s transform: rotate(0) &.expand transform: rotate(-90deg) if hexo-config('aside.card_categories.expand') == false > .child display: none .card-webinfo .webinfo .webinfo-item display: flex align-items: center padding: 2px 10px 0 div &:first-child flex: 1 padding-right: 20px // toc #card-toc +minWidth901() right: 0 !important +maxWidth900() position: fixed right: -100% bottom: 30px z-index: 100 max-width: $toc-mobile-maxWidth max-height: calc(100% - 60px) width: $toc-mobile-width opacity: 0 transition: initial transform-origin: right bottom .toc-percentage float: right margin-top: -9px color: #a9a9a9 font-style: italic font-size: 140% .toc-content overflow-y: scroll overflow-y: overlay margin: 0 -24px max-height: calc(100vh - 120px) +maxWidth900() max-height: calc(100vh - 140px) & > * margin: 0 20px !important & > .toc-item > .toc-child margin-left: 10px padding-left: 10px border-left: 1px solid var(--dark-grey) &:not(.is-expand) .toc-child display: none +maxWidth900() display: block !important .toc-item &.active .toc-child display: block ol, li list-style: none > ol padding: 0 !important ol margin: 0 padding-left: 18px .toc-link display: block margin: 4px 0 padding: 1px 6px color: var(--toc-link-color) transition: all .2s ease-in-out &:hover color: $theme-color &.active background: $theme-toc-color color: $toc-active-color :only-child > .card-widget margin-top: 0 .card-more-btn float: right color: inherit &:hover animation: more-btn-move 1s infinite .avatar-img overflow: hidden margin: 0 auto width: 110px height: 110px border-radius: 70px img width: 100% height: 100% transition: filter 375ms ease-in .2s, transform .3s object-fit: cover &:hover transform: rotate(360deg) @keyframes more-btn-move 0%, 100% transform: translateX(0) 50% transform: translateX(3px) @keyframes toc-open 0% transform: scale(.7) 100% transform: scale(1) @keyframes toc-close 0% transform: scale(1) 100% transform: scale(.7) +minWidth900() html.hide-aside .layout justify-content: center > .aside-content display: none > div:first-child width: 80% .page if hexo-config('aside.card_recent_post.sort_order') .card-recent-post order: hexo-config('aside.card_recent_post.sort_order') if hexo-config('newest_comments.sort_order') #card-newest-comments order: hexo-config('newest_comments.sort_order') if hexo-config('aside.card_categories.sort_order') .card-categories order: hexo-config('aside.card_categories.sort_order') if hexo-config('aside.card_tags.sort_order') .card-tags order: hexo-config('aside.card_tags.sort_order') if hexo-config('aside.card_archives.sort_order') .card-archives order: hexo-config('aside.card-archives.sort_order') if hexo-config('aside.card_webinfo.sort_order') .card-webinfo order: hexo-config('aside.card_webinfo.sort_order')