index.styl

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Source+Code+Pro&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap')
@import "icons"

body
  font-family 'Source Sans Pro', sans-serif

code
  font-family 'Source Code Pro', monospace

body.theme-dark
body.theme-light
  code
    padding 0.2em
  code[class*='language-']
  pre[class*='language-']
    font-weight lighter
    font-family 'Source Code Pro', monospace
  :not(pre) > code[class*='language-']
    font-size: 0.85em;

.theme-default-content
  position relative
  pre
  pre[class*='language-']
    margin 0
    padding 0.5rem 0.5rem
  code
    font-family 'Source Code Pro', monospace
  h2#introduction
    visibility hidden
    display block
    position absolute
    height 1px
    padding 0
    margin 0
    top -70px

.home
  a img ~ span
    display none
  .features
    border-top 0 !important
  .hero
    h1
      font-family 'Comfortaa', cursive
      color var(--black)

@media (min-width: 719px)
  .nav-item > .nav-link:not([href="/"])
    &.router-link-active
      color var(--accent-color)
      &::after
        visibility visible
        transform scaleX(1)

.navbar
  .site-name
    font-family 'Comfortaa', cursive
    color var(--black) !important
  .links
    .color-picker
      .color-button
        cursor pointer
    .nav-links
      .nav-item
        .dropdown-wrapper
          button
            outline unset

@media (min-width ($MQMobile + 1px))
  .theme-container:not(.has-sidebar)
    .page
      padding-left 0
  .sidebar
    display none
    .has-sidebar &
      display block

.darkmode-switch
  .item
    border 1px solid var(--border-color) !important
    &:first-child
      border-left 1px solid var(--border-color) !important
    &.active
      background-color var(--arrow-bg-color) !important
  .icon
    color var(--text-color) !important

.footer-wrapper .footer
  width 100%
  .at-share-btn-elements
    a
      outline unset
      background-color var(--text-color) !important
      color var(--white) !important
      .at-icon-wrapper svg
        fill var(--white) !important
      .at-label
        color var(--white) !important

.meta-item.update-time
  float none !important
  text-align right
  margin-bottom 3px

.copy-code-button
  background-color var(--accent-color, #9941d3)

.line-numbers-wrapper
  padding 0.5rem 0 !important

.page-nav
  padding 0 2.5rem 0
  max-width 740px
  margin 0 auto
  .next
    float right
  .next, .prev
    .icon
      position relative
      top .125em
      width 1em
      height 1em
      color var(--accent-color)