vuepress-theme-ououe/styles/content.styl

A blog theme for VuePress by tolking

.content,
.markdown-body
  padding: 3rem
  font-size: 16px
  a
    font-weight 500
    color $accentColor
    text-decoration none
    transition color .5s ease-in-out
    @media (prefers-color-scheme: dark)
      color $accentDarkColor
    @media print
      color $accentColor
      &[href^="http://"]::after
      &[href^="https://"]::after
        content " [" attr(href) "] "
      .icon.outbound
        display none

  p a code
    font-weight 400
    color $accentColor
    transition color .5s ease-in-out
    @media (prefers-color-scheme: dark)
      color: $accentDarkColor
    @media print
      color $accentColor

  kbd
    padding 0 0.15em
    border solid 0.15rem $borderColor
    border-bottom solid 0.25rem $borderColor
    border-radius 0.15rem
    background #eee
    transition all .5s ease-in-out
    @media (prefers-color-scheme: dark)
      border solid 0.15rem $borderDarkColor
      border-bottom solid 0.25rem $borderDarkColor
    @media print
      border solid 0.15rem $borderColor
      border-bottom solid 0.25rem $borderColor

  blockquote
    font-size 1em
    color #999
    border-left .5rem solid $accentColor
    margin 0.5rem 0
    padding .25rem 0 .25rem 1rem
    @media (prefers-color-scheme: dark)
      border-left .5rem solid $accentDarkColor
    & > p
      margin 0

  ul, ol
    padding-left 1.2em
    li
      font-size 1em
      color $textColor
      transition color .5s ease-in-out
      @media (prefers-color-scheme: dark)
        color $textDarkColor
      @media print
        color $textColor

  strong
    font-weight 600

  h1, h2, h3, h4, h5, h6
    color $titleColor
    font-weight 600
    line-height 1.25
    transition color .5s ease-in-out
    @media (prefers-color-scheme: dark)
      color $titleDarkColor
    &:hover .header-anchor
      opacity: 1
    @media print
      color $titleColor
      page-break-after avoid
      page-break-before avoid

  h1
    margin: 1.5rem 0
    font-size 2em

  h2
    margin: 1.5rem 0 1rem
    font-size 1.65em
    &+p
      @media print
        page-break-before avoid

  h3
    margin: 1rem 0
    font-size 1.35em

  h4
    margin: .5rem 0
    font-size 1.3em

  h5
    margin: .5rem 0
    font-size 1.2em

  h6
    margin: .5rem 0
    font-size 1em

  a.header-anchor
    font-size 0.85em
    float left
    margin-left -0.87em
    padding-right 0.23em
    margin-top 0.125em
    opacity 0
    &:hover
      text-decoration none

  code, kbd, .line-number
    font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace

  p, ul, ol
    margin: .6rem 0
    line-height 1.6

  p
    font-size 1em
    color $textColor
    transition color .5s ease-in-out
    @media (prefers-color-scheme: dark)
      color $textDarkColor
    @media print
      color $textColor

  img
    max-width: 100%
    @media print
      page-break-inside avoid

  hr
    border 0
    border-top 1px solid $borderColor
    transition border .5s ease-in-out
    @media (prefers-color-scheme: dark)
      border-top 1px solid $borderDarkColor

  table
    border-collapse collapse
    margin 1rem 0
    display: block
    overflow-x: auto
    @media print
      page-break-inside avoid

  tr
    border-top 1px solid $shadowColor
    transition all .5s ease-in-out
    &:nth-child(2n)
      background-color #f6f8fa
      @media (prefers-color-scheme: dark)
        background-color #444
      @media print
        background-color transparent

  th, td
    padding .6em 1em
    border 1px solid $shadowColor
    color $textColor
    transition all .5s ease-in-out
    @media (prefers-color-scheme: dark)
      border 1px solid $shadowDarkColor
      color $textDarkColor
    @media print
      color $textColor

  .theme-container
    &.sidebar-open
      .sidebar-mask
        display: block
    &.no-navbar
      .content:not(.custom) > h1, h2, h3, h4, h5, h6
          margin-top 1.5rem
          padding-top 0
      .sidebar
        top 0
@media (max-width $phoneWidth)
  .content
  .markdown-body
    padding: 1rem 0
    font-size: 15px