.limit-one-line
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap

.limit-more-line
  display: -webkit-box
  overflow: hidden
  -webkit-box-orient: vertical

.fontawesomeIcon
  display: inline-block
  font-weight: 600
  font-style: normal
  font-variant: normal
  font-family: 'Font Awesome 5 Free'
  text-rendering: auto
  -webkit-font-smoothing: antialiased

maxWidth600()
  @media screen and (max-width: 600px)
    {block}

maxWidth768()
  @media screen and (max-width: 768px)
    {block}

minWidth768()
  @media screen and (min-width: 768px)
    {block}

maxWidth1024()
  @media screen and (max-width: 1024px)
    {block}

maxWidth900()
  @media screen and (max-width: 900px)
    {block}

minWidth901()
  @media screen and (min-width: 901px)
    {block}

minWidth900()
  @media screen and (min-width: 900px)
    {block}

minWidth2000()
  @media screen and (min-width: 2000px)
    {block}

// animation
if hexo-config('enter_transitions')
  #content-inner,
  #footer
    animation: bottom-top 1s

  #page-header
    animation: header-effect 1s

  #site-title,
  #site-subtitle
    animation: titlescale 1s

  #nav.show
    animation: headerNoOpacity 1s

  canvas:not(#ribbon-canvas),
  #web_bg
    animation: to_show 4s

  #ribbon-canvas
    animation: ribbon_to_show 4s

  #sidebar-menus
    &.open
      for i in 1 2 3 4
        > :nth-child({i})
          animation: sidebarItem (i / 5)s

.card-announcement-animation
  color: #FF0000
  animation: announ_animation .8s linear infinite

.scroll-down-effects
  animation: scroll-down-effect 1.5s infinite

if hexo-config('avatar.effect') == true
  .avatar-img
    animation: avatar_turn_around 2s linear infinite

.reward-main
  animation: donate_effcet .3s .1s ease both

@keyframes scroll-down-effect
  0%
    top: 0
    opacity: .4

  50%
    top: -16px
    opacity: 1

  100%
    top: 0
    opacity: .4

@keyframes header-effect
  0%
    opacity: 0
    transform: translateY(-50px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes headerNoOpacity
  0%
    transform: translateY(-50px)

  100%
    transform: translateY(0)

@keyframes bottom-top
  0%
    opacity: 0
    margin-top: 50px

  100%
    opacity: 1
    margin-top: 0

@keyframes titlescale
  0%
    opacity: 0
    transform: scale(.7)

  100%
    opacity: 1
    transform: scale(1)

@keyframes search_close
  0%
    opacity: 1
    transform: scale(1)

  100%
    opacity: 0
    transform: scale(.7)

@keyframes to_show
  0%
    opacity: 0

  100%
    opacity: 1

@keyframes to_hide
  0%
    opacity: 1

  100%
    opacity: 0

@keyframes ribbon_to_show
  0%
    opacity: 0

  100%
    opacity: hexo-config('canvas_ribbon.alpha')

@keyframes avatar_turn_around
  from
    transform: rotate(0)

  to
    transform: rotate(360deg)

@keyframes sub_menus
  0%
    opacity: 0
    transform: translateY(10px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes donate_effcet
  0%
    opacity: 0
    transform: translateY(-20px)

  100%
    opacity: 1
    transform: translateY(0)

@keyframes announ_animation
  0%,
  to
    transform: scale(1)

  50%
    transform: scale(1.2)

@keyframes sidebarItem
  0%
    transform: translateX(200px)

  100%
    transform: translateX(0)