graphene/docs/css/main.styl

367 lines
6.3 KiB
Stylus
Raw Normal View History

2015-11-21 21:33:29 +03:00
@import 'nib'
@import 'jeet'
2015-11-26 02:25:03 +03:00
@import 'hljs.css'
2015-11-21 21:33:29 +03:00
@import 'https://fonts.googleapis.com/css?family=Raleway:400,500,600,200,100&.css'
normalize-css()
$wrapper
center(960px, pad:20px)
.wrapper
@extend $wrapper
position relative
a, a:hover
text-decoration none
2015-11-26 02:25:03 +03:00
a
color rgb(42,93,173)
2015-11-21 21:33:29 +03:00
html, body
font-family "Helvetica Neue", Helvetica, Arial, sans-serif
font-weight 300
font-size 16px
color #606060
line-height 1.5
.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
2015-11-26 02:25:03 +03:00
position relative
&.active:before
content: ''
width 5px
height 5px
border-radius 100%
display block
position absolute
background white
left 50%
margin-left -3px
bottom -24px
2015-11-21 21:33:29 +03:00
.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
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
2015-11-26 02:25:03 +03:00
width 236px
2015-11-21 21:33:29 +03:00
box-sizing border-box
color white
font-family 'Raleway'
font-weight 500
2015-11-26 02:25:03 +03:00
transition all .2s ease-in-out
2015-11-21 21:33:29 +03:00
&:before
content: ''
display block
position absolute
2015-11-26 02:25:03 +03:00
left 20px
top 20px
2015-11-21 21:33:29 +03:00
height 32px
width 32px
2015-11-26 02:25:03 +03:00
image '~!file-loader!../assets/starwars-icon.png' 32px 32px
&:hover
transform translateY(-3px)
box-shadow 0px 4px 8px 0px rgba(0,0,0,0.32)
2015-11-21 21:33:29 +03:00
.improve-document-link
2015-11-26 02:25:03 +03:00
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 '~!file-loader!../assets/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
2015-11-21 21:33:29 +03:00
.markdown
.wrapper
margin-top 60px
2015-11-26 02:25:03 +03:00
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
code
font-size 14px
line-height 20px
overflow-x: auto;
2015-11-21 21:33:29 +03:00
margin-bottom 40px
2015-11-26 02:25:03 +03:00
.markdown h1:first-child
margin-top 0
padding-top 0
2015-11-21 21:33:29 +03:00
.title
background: #F9F9F9;
2015-11-26 02:25:03 +03:00
padding 54px 0
2015-11-21 21:33:29 +03:00
h1
2015-11-26 02:25:03 +03:00
margin 0 auto
2015-11-21 21:33:29 +03:00
@extend $wrapper
font-family: 'Raleway';
font-size: 42px;
font-weight 200
color: #585858;
line-height: 49px;
2015-11-26 02:25:03 +03:00
.docs
@extend $wrapper
.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
display none
width 100%
+below(600px)
display block
.docs-content
col(3/4)
margin-top 60px
+below(600px)
margin-top 10px
col(1)
>h1
margin 0
@extend $title
font-size 32px