graphene/docs/css/main.styl

@import 'nib'
@import 'jeet'

@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,200,100&.css'

normalize-css()

@import 'hljs.css'
@import 'bm.css'

$wrapper
  center(960px, pad:20px)

.wrapper
  @extend $wrapper
  position relative

a, a:hover
  text-decoration none

a
  color rgb(42,93,173)

p
  margin-bottom 1em

html, body
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif
  font-weight 300
  font-size 16px
  color #606060
  line-height 1.5
  height 100%
  margin 0
  width 100%

.header
  clearfix()
  position relative
  text-align center
  background: #DB594C;
  background-image: radial-gradient(95% 101%, #E46643 5%, rgba(226,91,72,0.00) 100%)
  .logo
    width 42px
    height @width
    vertical-align middle

  h1
    max-width 380px
    font-family 'Raleway', sans-serif
    font-weight 200
    font-size 42px
    color #FFFFFF
    line-height 49px
    margin 80px auto 40px
    z-index 110
  
  .get-started
    font-family 'Raleway'
    display inline-block
    margin 0 auto
    font-size 13px
    color #FFFFFF
    padding 0 18px
    text-transform uppercase
    font-weight 600
    line-height 15px
    border 1px solid #FFFFFF
    border-radius 2px
    padding 12px 18px
    z-index 111
    position relative
    &:hover
      background white
      color #E05B49
      text-decoration none

.header-wrapper
  @extend $wrapper
  text-align left
  padding-top 32px
  padding-bottom 32px
  position relative
  z-index 100

.header-extended
  padding-bottom 100px

.header-nav
  margin-top 8px
  a
    font-family 'Raleway'
    font-size 13px
    color #FFFFFF
    margin 0 16px
    padding 0 2px
    text-transform uppercase
    font-weight 600
    line-height 15px
    position relative
    &.active:before
      content: ''
      width 5px
      height 5px
      border-radius 3px
      display block
      position absolute
      background white
      left 50%
      margin-left -3px
      bottom -24px

  +below(600px)
    display none

.bm-burger-button, .bm-menu-wrap, .bm-overlay
  display none
  +below(600px)
    display block

.bm-burger-button
  z-index 300!important

.bm-overlay
  z-index 1000!important

.bm-item-list
  a
    font-family 'Raleway'
    display block
    font-size 15px
    color #CCC
    margin 6px 0
    padding 10px 6px
    text-transform uppercase
    font-weight 500
    line-height 20px
    position relative
    &:hover
      color white

.header-logo
  font-family 'Raleway'
  font-size 22px
  color #FFFFFF
  float left
  font-weight 500
  text-transform uppercase
  text-decoration none

.header-nav
  float right

.logo
  path
    stroke-dasharray 250
    stroke-dashoffset 250
    animation logo-dash .9s ease-in-out forwards
    animation-delay .12s
  g
    ellipse
      animation logo-dot .3s ease forwards
      animation-fill-mode both
      transform-origin 50% 50%
    &:nth-child(2)
      ellipse
        animation-delay .1s
    &:nth-child(3)
      ellipse
        animation-delay .2s
    &:nth-child(4)
      ellipse
        animation-delay .3s
    &:nth-child(5)
      ellipse
        animation-delay .4s
    &:nth-child(6)
      ellipse
        animation-delay .5s
    &:nth-child(7)
      ellipse
        animation-delay .6s
    &:nth-child(8)
      ellipse
        animation-delay .7s

@keyframes logo-dash
  to
    stroke-dashoffset 0

@keyframes logo-dot
  from
    opacity 0.5
    transform scale(0)
  to
    opacity 1
    transform scale(1)

#header-background
  z-index 0
  display block
  position absolute
  width 100%
  top 0
  bottom 0
  right 0
  left 0

.particles-js-canvas-el
  display block
  opacity 0
  position absolute

.starwars-example-wrapper
  +below(600px)
    margin-bottom 30px

.starwars-example
  background: #3C3C3C
  display inline-block
  position absolute
  right 20px
  top -100px
  box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.25);
  border-radius: 100px
  font-size 13px
  padding 17px 17px 17px 71px
  width 236px
  box-sizing border-box
  color white
  font-family 'Raleway'
  font-weight 500
  transition all .2s ease-in-out
  &:before
    content: ''
    display block
    position absolute
    left 20px
    top 20px
    height 32px
    width 32px
    image './images/starwars-icon.png' 32px 32px

  &:hover
    transform translateY(-3px)
    box-shadow 0px 4px 8px 0px rgba(0,0,0,0.32)

  +below(600px)
    top -70px

.improve-document-link
  position fixed
  right 0
  bottom 70px
  transform-origin 100% 100%
  background: #999;
  border: 1px solid #919191;
  border-radius: 3px 3px 0 0;
  border-bottom 0
  padding 9px 12px 12px 34px
  transform: rotate(270deg) translateX(100%) translateY(3px);
  font-size: 11px;
  font-weight: 500;
  text-transform uppercase
  color: #FFFFFF;
  letter-spacing: 0.3px;
  line-height: 11px;
  transition all .2s ease-in-out
  &:before
    content: ''
    display block
    position absolute
    left 10px
    top 8px
    height 16px
    width 16px
    image './images/edit.png' 16px 16px
  &:hover
    transform: rotate(270deg) translateX(100%)
    background #666
    border-color #555
  +below(600px)
    display none

$title
  display block
  font-family: 'Raleway';
  font-weight 500
  line-height 1.2em
  padding-top .3em
  margin-bottom .5em
  padding-bottom .5em
  color #4A4A4A

.markdown
  .wrapper
    margin-top 60px
    +below(600px)
      margin-top 30px

  h1, h2, h3, h4, h5, h6
    @extend $title

  h1
    font-size 32px
  h2
    font-size 26px
  h3
    font-size 24px
  h4
    font-size 21px
  h5
    font-size 18px
  h6
    font-size 16px
  strong
    font-weight 500
  pre
    line-height 20px
    background #FAFAFA
    padding 20px
    white-space: pre
    display: block;
    color: #333333;
    overflow-x: auto;
  p code, ul code
    background #FAFAFA
    padding 2px 4px
    border-radius 2px
    border 1px solid #CCC
    color #000
  p + p, p + ul
    margin-top -.4em
  p + ul
    margin-top -.6em
  code
    font-size 14px
    line-height 20px
    overflow-x: auto;
  margin-bottom 40px

.markdown h1:first-child
  margin-top 0
  padding-top 0

.page-title
  background: #F9F9F9;
  padding 48px 0

  h1
    margin 0 auto
    @extend $wrapper
    font-family: 'Raleway';
    font-size: 40px;
    font-weight 200
    color: #585858;
    line-height: 50px;

  +below(600px)
    padding 30px 0

.docs
  @extend $wrapper

.homepage-intro
  col(1/2)

.homepage-schema
  col(1/2)

.docs-aside
  col(1/4)
  margin-top 60px
  +below(600px)
    padding 20px
    width 100%
    box-sizing content-box
    margin 0 -20px
    margin-bottom 30px
    background #F9F9F9

.docs-aside-group
  display block
  margin-bottom 40px
  h3
    font-family: 'Raleway';
    font-weight 500
    font-size 12px
    text-transform uppercase
    line-height 1.2em
    margin-bottom 1em
    color #AAA
  a
    display block
    font-size 15px
    font-weight 400
    line-height 22px
    height 28px
    padding 3px 0
    color #4A4A4A
    &.active
      font-weight 500
      line-height 21px
      color #E05B49

  +below(600px)
    display none

.docs-aside-navselect
  margin-top -18px
  display none
  width 100%
  +below(600px)
    display block

.docs-content
  col(3/4)
  margin-top 60px
  margin-bottom 20px
  +below(600px)
    margin-top 10px
    col(1)

  >h1
    margin 0
    @extend $title
    font-size 32px
    
  .docs-next
    float right
    color #e05b49
    font-weight 400