graphene/docs/css/main.styl
2016-05-28 23:08:00 -07:00

433 lines
7.2 KiB
Stylus

@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