hexo-theme-reimu/source/css/_partial/sidebar.styl

A Hakurei Reimu style Hexo theme

#sidebar
  display: none

.sidebar-left,
.sidebar-right
  #sidebar
    display: block
    @media mg-large
      display: none
    @media mq-large
      width: 23%
      margin: 0 1%
      height: inherit

[data-theme="dark"] .sidebar-wrap
  box-shadow: var(--shadow-card)

[data-theme="dark"] #mobile-nav .sidebar-wrap
  box-shadow: 0 0 0 0

.sidebar-wrapper
  transition: .3s

  .aos-animate
    transition-property: initial !important
    &:hover
      box-shadow: var(--shadow-card-hover)

  &:hover
    transform: scale(1.015)

  &.wrap-sticky
    position: sticky
    top: 5px

.sidebar-wrap
  width: 100%
  border-radius: post-radius
  background: var(--color-wrap)
  display: flex
  flex-shrink: 0
  flex-direction: column
  justify-content: center
  align-items: center
  transition: .3s
  interpolate-size: allow-keywords

  .hidden
    display: none

.sidebar-author
  display: flex
  flex-shrink: 0
  flex-direction: column
  align-items: center

  img
    display: block
    min-width: 100px
    min-height: 100px
    width: 100px
    height: 100px
    border-radius: 50%
    transition: opacity .3s
    opacity: 0
    object-fit: cover
    margin: 20px
    box-shadow: 0 0 15px 5px var(--color-red-6-shadow)
    will-change: transform
    transition: .3s

    &:hover
      transform: scale(1.05)

  img.lazyloaded
    opacity: 1
    animation: blur .8s forwards

  .sidebar-author-name
    font-weight: bold
    font-size: 20px
    color: var(--red-2)
    margin: 10px

  .sidebar-description
    color: var(--grey-7)
    margin: 0 20px

$sidebar-state-content
  display: flex
  flex-direction: column
  flex-shrink: 0
  align-items: center
  padding: 0 20px

  div
    margin: 5px 0

.sidebar-state
  display: flex
  justify-content: center
  padding: 25px 0
  color: var(--red-0)
  opacity: .8
  transition: opacity .5s, color .5s

  &:hover
    opacity: 1

.sidebar-state-article
  @extend $sidebar-state-content
  border-right: 1px solid var(--red-1)

.sidebar-state-category
  @extend $sidebar-state-content

.sidebar-state-tag
  @extend $sidebar-state-content
  border-left: 1px solid var(--red-1)

.sidebar-state-number
  font-weight bold
  font-size: 20px

.sidebar-social
  display: flex
  flex-shrink: 0
  justify-content: center
  width: 70%
  flex-wrap: wrap

  div a
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%

.sidebar-social-icon
  position: relative
  display: flex
  justify-content: center
  align-items: center
  width: 36px
  height: 25px
  if hexo-config("icon_font")
    font: 20px font-icon
  else
    font: 20px var(--font-icon)
  transition: transform .2s
  will-change: transform

  &:hover
    transform: scale(1.2)

if ('email' in social-keys)
  .icon-email
    color: var(--red-2)

if ('github' in social-keys)
  .icon-github
    color: #191717

  [data-theme="dark"] .icon-github
    color: #bc88ff

if ('google' in social-keys)
  .icon-google
    color: #4285F4

if ('facebook' in social-keys)
  .icon-facebook
    color: #3b5998

if ('twitter' in social-keys)
  .icon-twitter
    color: #191717

if ('instagram' in social-keys)
  .icon-instagram
    color: #e1306c

if ('linkedin' in social-keys)
  .icon-linkedin
    color: #0e76a8

if ('pinterest' in social-keys)
  .icon-pinterest
    color: #bd081c

if ('youtube' in social-keys)
  .icon-youtube
    color: #ff0000

if ('vimeo' in social-keys)
  .icon-vimeo
    color: #1ab7ea

if ('flickr' in social-keys)
  .icon-flickr
    color: #ff0084

if ('dribbble' in social-keys)
  .icon-dribbble
    color: #ea4c89

if ('behance' in social-keys)
  .icon-behance
    color: #1769ff

if ('bilibili' in social-keys)
  .icon-bilibili
    color: #00a1d6

if ('weibo' in social-keys)
  .icon-weibo
    color: #e6162d

if ('zhihu' in social-keys)
  .icon-zhihu
    color: #0084ff

if ('reddit' in social-keys)
  .icon-reddit
    color: #ff4500

if ('tumblr' in social-keys)
  .icon-tumblr
    color: #35465c

if ('medium' in social-keys)
  .icon-medium
    color: #00ab6c

if ('deviantart' in social-keys)
  .icon-deviantart
    color: #05cc47

if ('stackoverflow' in social-keys)
  .icon-stackoverflow
    color: #f48024

if ('keybase' in social-keys)
  .icon-keybase
    color: #33a0ff

if ('telegram' in social-keys)
  .icon-telegram
    color: #0088cc

if ('discord' in social-keys)
  .icon-discord
    color: #7289da

if ('steam' in social-keys)
  .icon-steam
    color: #171a21

$menu-link
  color: var(--color-link)
  opacity: 0.8
  text-decoration: none
  transition: opacity .2s, color .2s
  display: block
  padding: 10px 15px
  font-weight: 700

.sidebar-menu
  margin: 20px 0
  width: 100%

.sidebar-menu-link-wrap
  display: flex
  position: relative
  width: 70%
  max-width: 200px
  margin: 8px auto

  justify-content: center
  border: 10px var(--color-red-3-shadow) double
  transition: border .5s, background 0.5s, color 0.5s

  &:hover
    border: 10px var(--color-h2-after) double

  &:hover .sidebar-menu-icon:before
    transform: rotate(90deg) scale(1.1)

  &:hover .sidebar-menu-icon
    transform: scale(1.1)

  &:hover .sidebar-menu-icon.rotate
    transform: rotate(90deg) scale(1.1)

.sidebar-menu-icon
  @extend $menu-link
  font-size: 24px
  font-weight: 400
  transition: transform .3s, background 0.5s, color 0.5s
  will-change: transform

  &:before
    font-size: 24px
    font-weight: 400
    transform: rotate(90deg)
    transition: transform .3s
    will-change: transform
  
  &.rotate
    transform: rotate(90deg)

  pointer-events: none
  padding: 5px
  display: flex
  align-items: center

.sidebar-menu-link-dummy
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0

.sidebar-menu-link
  @extend $menu-link
  pointer-events: none

.link-active
  background: var(--red-0)
  border: 10px var(--color-wrap) double
  box-shadow: var(--shadow-red-6-shadow)
  opacity: 0.8

  &:hover
    opacity: 1

  .sidebar-menu-link
    color: #fff
    opacity: 1

  .sidebar-menu-icon
    opacity: 1
    color: #fff

.sidebar-toc
  width: 100%
  padding: 10px 20px
  box-sizing: border-box

.sidebar-toc-wrapper
  color: var(--color-link)
  max-height: calc(100vh - 150px)
  overflow: auto

  &::-webkit-scrollbar
    width: 5px
    height: 5px

  a, span
    color: var(--color-link)
    text-decoration: none
    opacity: 0.8
    transition: .3s

    &:hover
      color: var(--red-0)

  & ol
    margin-left: 15px
    list-style: none

  & li
    margin: 7px 0
    padding: 2px 0

    &:before
      content: ""
      width: 5px
      height: 10px
      background: var(--color-h2-after)
      display: inline-block
      vertical-align: middle
      margin-right: 11px
      box-shadow: var(--shadow-red-6-shadow)
      opacity: 0.5
      transition: .3s

    &:hover
      &:before
        width: 5px
        height: 5px
        border-radius: 50%
        opacity: 1

  .toc-level-1
    list-style: none

    &:before
      display: none
    >a
      width: 100%
      display: inline-block
      text-align: center

  .toc-child 
    transform: scaleY(0)
    height: 0
    overflow: hidden
    transition: .3s
    transform-origin: top

    >.toc-item:last-child
      margin-bottom: 0

  .active>.toc-child, .current>.toc-child
    height: auto
    transform: scaleY(1)

  .active>a, .current>a, .active>a>span, .current>a>span
    color: var(--red-0)
    opacity: 1

.toc-title
  letter-spacing: 2px
  color: var(--grey-9)
  line-height: 1em
  font-weight: bold
  padding: 10px 0

.toc-item 
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

$siderbar-btn-icon
  display: flex
  justify-content: center
  align-items: center
  width: 40px
  height: 40px
  background: var(--red-3)
  color: #fff
  font-weight: bold
  box-shadow: var(--shadow-red-6-shadow)
  border-radius: post-radius
  margin: 20px
  transition: .3s
  will-change: transform

  &:hover
    transform: scale(1.05)

  [data-theme="dark"] &
    filter: brightness(.8)

.sidebar-btn-wrapper
  display: flex
  justify-content: center
  position: absolute
  bottom: 10px
  left: 0
  right: 0

  .current
    background: var(--red-1)

  .sidebar-toc-btn, .sidebar-common-btn
    @extend $siderbar-btn-icon

.sidebar-common-sidebar
  display: flex
  flex-direction: column
  width: 100%
  align-items: center
  overflow-y: auto
  max-height: calc(100vh - 120px)

  &::-webkit-scrollbar
    width: 5px
    height: 5px

.sidebar-toc-sidebar
  width: 100%