docs_vue2/assets/styles/post.styl

@import "~highlight.js/styles/night-owl.css"

margin-y($top, $bottom = $top)
  margin-top $top
  margin-bottom $bottom

.post
  position relative
  padding 30px 60px
  font-size 14px
  line-height 1.8
  color #282c33
  font-weight 400
  hyphens auto

  .post-layout &
    min-height 100%
    margin-bottom -192px

    &::after
      content ""
      display block
      height 192px

  .post-layout.no-links &
    margin-bottom -58px

  .no-links &::after
    height 58px

  .one-demo
    margin 1em 0 1.25em

  .one-details
    margin-bottom 5px

  .icon-link
    position absolute
    transition-property transform, opacity
    transition-duration 0.2s
    transform translate(calc(-1px - 100%), -50%)
    opacity 0
    padding 0.1em

[data-target]
  .icon-link
    opacity 1
    transform translate(-100%, -50%)

[data-md]
  h1
  h1&
    margin-y(0, 1.25em)
    font-size 36px

    small
      vertical-align 0.1em
      color #999

  h2
  h2&
    margin-y(1.3em, 1.2em)
    font-size 30px

    & + h3
      margin-top 2em

  h3
  h3&
    margin-y(1.25em, 1.15em)
    font-size 24px

  h4
  h4&
    margin-y(1.4em, 1.2em)
    font-size 18px

  h5
  h5&
    margin-y(1.5em)
    font-size 14px

  h6
  h6&
    margin-y(1.3em)
    font-size 12px

  h1
  h1&
  h2
  h2&
  h3
  h3&
    font-weight 500
    clear both

  h1
  h1&
  h2
  h2&
  h3
  h3&
  h4
  h4&
  h5
  h5&
  h6
  h6&
    position relative
    display flex
    align-items center
    color #333
    line-height 1

    &:hover
      .icon-link
        opacity 1
        transform translate(-100%, -50%)

  br
  br&
    clear both

  p
  p&
    margin-y(0.5em)

  ul
  ul&
  ol
  ol&
    padding-left 1.5em

  blockquote
  blockquote&
    margin 1em 0
    padding-left 1em
    border-left 5px solid #f1f1f1
    color #666
    transition color 0.2s, border-color 0.2s

    &:hover
      color #333
      border-left-color #d3d3d3

  table
  table&
    width 100%
    border-collapse collapse
    border 1px solid #f1f1f1
    border-radius 4px
    margin-y(1.5em)

    thead
      position sticky
      top -1px
      background #f3f6f988
      backdrop-filter blur(4px)

      th
        position relative

        &::after
          content ""
          position absolute
          bottom 0
          width 100%
          height 1px
          left 0
          background #f1f1f1

  // pre
  // table
  //   max-width 480px

  th
  td
    min-width 90px
    padding 8px 14px
    border 1px solid #f1f1f1
    border-style solid none
    text-align left
    vertical-align top

    & > :first-child
      margin-top 0

    & > :last-child
      margin-bottom 0

    pre
      font-size 90%

    table
      margin-y(0.2em, 0.5em)

  td:first-child
    white-space nowrap

  a:link
  a&:link
  a:visited
  a&:visited
    text-decoration none
    color #0052cc
    transition color 0.2s

    &:hover
      color #06f

    &:active
      color #0046ad

  code
  code&
    font-size 90%
    hyphens none
    font-family Menlo, consolas, monospace

    &:not(pre > code)
      padding 2px 4px
      background-color #0066ff16
      overflow visible
      border-radius 3px

  hr
  hr&
    height 1px
    margin 2em 0
    padding 0
    background-color #eff0f1
    border 0
    clear both

  figure
  figure&
    float right
    width 60%
    margin 0 0 30px 20px

    & + h1
    & + h2
    & + h3
    & + h4
    & + h5
    & + h6
      margin-top 0

    img
      display block
      margin auto

    .preview
      padding 20px
      overflow hidden
      border 1px solid #e5e5e5
      transition box-shadow 0.2s
      cursor pointer
      text-align center

      &:hover
        box-shadow 0 0 5px rgba(0, 0, 0, 0.2)

    &.hero
      width 100%
      float none

  figcaption
  figcaption&
    margin-top 10px
    font-size 12px

    p
      margin 0
      line-height 20px

    .caption
      font-weight 500

    .desc
      color #999

  img
  img&
    max-width 100%
    max-height 100%

  pre
  pre&
    border-radius 4px
    white-space pre
    overflow auto
    line-height 1.6

    code
      border none
      padding 18px 24px

  var
    font-family "PT Serif", Georgia, serif

  kbd
    display inline-block
    padding 3px 5px 6px
    font-size 90%
    line-height 10px
    color #444d56
    vertical-align 1px
    background-color #fafbfc
    border solid 1px #c6cbd1
    border-bottom-color #959da5
    border-radius 3px
    box-shadow inset 0 -1px 0 #959da5

  .custom-block
  .custom-block&
    border 1px solid
    border-radius 4px
    margin 1em 0
    padding 0.75em 1em

    & > :first-child
      margin-top 0

    & > :last-child
      margin-bottom 0

  .veui-alert
  .veui-alert&
    margin 1em 0

    p:first-child
      margin-top 0

    p:last-child
      margin-bottom 0

  .badges
  .badges&
    border none
    padding 0

    code
      padding 2px 3px
      background #333
      border-radius 3px
      color #fff
      font-size 80%

  .oss-badges&
    border none
    padding 0

    a
      margin-right 10px

  .hljs-attr
    color #c5e478

  [data-target]
    animation target-blink 6s ease 1 both

.meta
  display flex
  justify-content center

  .one-edit-link
    margin-top 40px

@keyframes target-blink
  0%
    background-color #f2f7ff

  3%
  9%
    background-color #fff

  6%
  12%
  80%
    background-color #f2f7ff

@media (max-width 480px)
  .post
    padding 30px

  [data-md]
    h1
    h1&
      font-size 24px

    h2
    h2&
      font-size 20px

    h3
    h3&
      font-size 18px

    h4
    h4&
      font-size 16px

    h5
    h5&
      font-size 14px

  table
    display block
    max-width 100%
    width fit-content
    overflow-x auto

    table
      display table