page.styl

@import "_common"
@import "_api"
@import "_animations"
@import "_header"
@import "_demo"
@import "_sponsors-page"
@import "_sponsors-sidebar"
@import "_search-page"
@import "_migration"
@import "_sidebar"
@import "_offline-menu"
@import "_team"
@import "_style-guide"
@import "_modal"
@import "_scrimba"
@import "_vue-mastery"

#header
  box-shadow: 0 0 1px rgba(0,0,0,.25)
  transition: background-color .3s ease-in-out

.content
  position: relative
  padding: 2.2em 0
  max-width: 600px
  margin: 0 auto
  padding-left: 50px
  &.api
    > a:first-of-type > h2
      margin-top: 0
      padding-top: 0
    ul
      padding-left: 1.25em
      line-height: 1.4em
      ul, p:not(.tip)
        padding-bottom: 0
        margin: 1.2em 0
  a.button
    font-size: .9em
    color: #fff
    margin: .2em 0
    width: 180px
    text-align: center
    padding: 12px 24px
    display: inline-block
    vertical-align: middle
  img
    max-width: 100%
  span.light
    color: $light
  span.info
    font-size: .85em
    display: inline-block
    vertical-align: middle
    width: 280px
    margin-left: 20px
  h1
    margin: 0 0 1em
  h2, h3
    pointer-events: none
    a, button
      pointer-events: auto
      color: $dark
    &:before
      content: ""
      display: block
      margin-top: -1 * $heading-link-padding-top
      height: $heading-link-padding-top
      visibility: hidden
  h2
    margin: $h2-margin-top 0 .8em
    padding-bottom: .7em
    border-bottom: 1px solid $border
  h3
    margin: $h3-margin-top 0 1.2em
    line-height: 1.2
    position: relative
    > a:before
      content: "#"
      color: $green
      position: absolute
      left: -0.7em
      margin-top: -0.05em
      padding-right: 0.5em
      font-size: 1.2em
      line-height: 1
      font-weight: bold
  figure
    margin: 1.2em 0
  p, ul, ol
    line-height: 1.6em
    // HACK: Create area underneath paragraphs
    // and lists that will be on top of heading
    // anchors, for easier text highlighting.
    margin: 1.2em 0 -1.2em
    padding-bottom: 1.2em
    position: relative
    z-index: 1
  ul, ol
    padding-left: 1.5em
    // FIX: Some link click targets are covered without this
    position: inherit
    // FIX: For nested lists, the top margins on ul/ol
    // creates extra space at the top. (Issue: 1308)
    ul, ol
      margin: 0;
  a
    color: $green
    font-weight: 600
  blockquote
    margin: 2em 0
    padding-left: 20px
    border-left: 4px solid $green
    p
      font-weight: 600
      margin-left: 0
      margin-bottom: 0
      padding-bottom: 0
  iframe
    margin: 1em 0
  > table
    border-spacing: 0
    border-collapse: collapse
    margin: 1.2em auto
    padding: 0
    display: block
    overflow-x: auto
    td, th
      line-height: 1.5em
      padding: .4em .8em
      border: none
      border: 1px solid #ddd
    th
      font-weight: bold
      text-align: left
    th, tr:nth-child(2n)
      background-color: #f8f8f8
      code
        background-color: #efefef
  p
    &.tip, &.success
      padding: 12px 24px 12px 30px
      margin: 2em 0
      border-left-width: 4px
      border-left-style: solid
      background-color: $codebg
      position: relative
      border-bottom-right-radius: $radius
      border-top-right-radius: $radius
      &:before
        position: absolute
        top: 14px
        left: -12px
        color: #fff
        width: 20px
        height: 20px
        border-radius: 100%
        text-align: center
        line-height: 20px
        font-weight: bold
        font-family: $logo-font
        font-size: 14px
      code
        background-color: #efefef
      em
        color: $medium
    &.tip
      border-left-color: $red
      &:before
        content: "!"
        background-color: $red
    &.success
      border-left-color: $green
      &:before
        content: "\f00c"
        font-family: FontAwesome
        background-color: $green
    &.updated
      margin-top 0
      margin-bottom 6px
      padding 0
      display inline-block
      text-align right
      width: 100%

.guide-links
  margin-top: 2em
  height: 1em

.footer
  color: $light
  margin-top: 2em
  padding-top: 2em
  border-top: 1px solid #e5e5e5
  font-size: .9em

#main.fix-sidebar
  position: static
  .sidebar
    position: fixed

@media screen and (min-width: 1590px)
  #header
    background-color: rgba(255,255,255,.4)

@media screen and (max-width: 1300px)
  .content.with-sidebar
    margin-left: 290px
  #ad
    z-index: 1
    position: relative
    padding: 0
    bottom: 0
    right: 0
    float: right
    padding: 0 0 20px 30px

@media screen and (max-width: 900px)
  body
    -webkit-text-size-adjust: none
    font-size: 14px
  #header
    display: none
  #logo
    display: none
  .nav-link
    padding-bottom: 1px
    &:hover, &.current
      border-bottom: 2px solid $green
  #mobile-bar
    display: block
  #main
    padding: 2em 1.4em 0
  .highlight pre
    padding: 1.2em 1em
  .content
    padding-left: 0
    &.with-sidebar
      margin: auto
    h2, h3
      &:before
        content: ""
        display: block
        margin-top: -1 * $mobile-heading-link-padding-top
        height: $mobile-heading-link-padding-top
        visibility: hidden
  .footer
    margin-left: 0
    text-align: center

@media screen and (max-width: 560px)
  #downloads
    text-align: center
    margin-bottom: 25px
    .info
      margin-top: 5px
      margin-left: 0
  iframe
    margin: 0 !important

@media print
  .footer
    display: none
  .content
    padding-left: 0px
  .content p
    line-height: 1.35em
    &.tip
      background-color: rgb(255,255,255)
      border: 2px solid #e8e8e8
      border-left: 4px solid $red