blexar/src/stylus/components/content.styl

CSS framework to establish your favorite websites in mints, with user experience in mind.

.content
  li + li
    margin-top: 0.25em

  p, dl, ol, ul, blockquote, pre, table
    &:not(:last-child)
      margin-bottom: 1em
      font-size: 1em

  h1
    font-size: 2.4em
    margin-bottom: 0.5em

    &:not(:first-child)
      margin-top: 1em

  h2
    font-size: 2.2em
    margin-bottom: 0.5714em

    &:not(:first-child)
      margin-top: 1.1428em

  h3
    font-size: 2em
    margin-bottom: 0.6666em

    &:not(:first-child)
      margin-top: 1.8em

  h4
    font-size: 1.6em
    margin-bottom: 0.8em

  h5
    font-size: 1.4em
    margin-bottom: 0.8888em

  h6
    font-size: 1.2em
    margin-bottom: 1em

  blockquote
    border-left: 0.5em solid $primary
    padding: $padding
    margin: 0

  ol
    list-style: decimal outside
    margin-left: 1em
    margin-top: 1em
    padding: 0

  ul
    list-style: disc outside
    margin-left: 1em
    margin-top: 1em
    padding: 0

    ul
      list-style-type: circle
      margin-top: 0.5em

      ul
        list-style-type: square

  dd
    margin-left: 2em

  figure
    margin-left: 2em
    margin-right: 2em
    text-align: center

    &:not(:first-child)
      margin-top: 2em

    &:not(:last-child)
      margin-bottom: 2em

    img
      display: inline-block

    figcaption
      font-style: italic

  pre
    overflow-x: auto
    padding: $padding
    white-space: pre
    word-wrap: normal

  sup, sub
    font-size: 75%

  generateSizes()