theme.css

@import url('https://fonts.googleapis.com/css?family=Quicksand');

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");
*{
    -webkit-font-smoothing:antialiased;
    -webkit-overflow-scrolling:touch;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-text-size-adjust:none;
    -webkit-touch-callout:none;
    box-sizing:border-box
}
body:not(.ready){
    overflow:hidden
}
body:not(.ready) .app-nav,body:not(.ready)>nav,body:not(.ready) [data-cloak]{
    display:none
}
div#app{
    font-size:30px;
    font-weight:lighter;
    margin:40vh auto;
    text-align:center
}
div#app:empty:before{
    content:"Loading..."
}
.emoji{
    height:1.2rem;
    vertical-align:middle
}
.progress{
    background-color:var(--theme-color,#cd545b);
    height:2px;
    left:0;
    position:fixed;
    right:0;
    top:0;
    transition:width .2s,opacity .4s;
    width:0;
    z-index:5
}
.search .search-keyword,.search a:hover{
    color:var(--theme-color,#cd545b)
}
.search .search-keyword{
    font-style:normal;
    font-weight:700
}
body,html{
    height:100%
}
body{
    -moz-osx-font-smoothing:grayscale;
    -webkit-font-smoothing:antialiased;
    color:#34495e;
    font-family:Source Sans Pro,Helvetica Neue,Arial,sans-serif;
    font-size:15px;
    letter-spacing:0;
    margin:0;
    overflow-x:hidden
}
img{
    max-width:100%
}
a[disabled]{
    cursor:not-allowed;
    opacity:.6
}
kbd{
    border:1px solid #ccc;
    border-radius:3px;
    display:inline-block;
    font-size:12px!important;
    line-height:12px;
    margin-bottom:3px;
    padding:3px 5px;
    vertical-align:middle
}
.task-list-item{
    list-style-type:none
}
li input[type=checkbox]{
    margin:0 .2em .25em -1.6em;
    vertical-align:middle
}
.app-nav{
    margin:25px 60px 0 0;
    position:absolute;
    right:0;
    text-align:right;
    z-index:2
}
.app-nav.no-badge{
    margin-right:25px
}
.app-nav p{
    margin:0
}
.app-nav>a{
    margin:0 1rem;
    padding:5px 0
}
.app-nav li,.app-nav ul{
    display:inline-block;
    list-style:none;
    margin:0
}
.app-nav a{
    color:inherit;
    font-size:16px;
    text-decoration:none;
    transition:color .3s
}
.app-nav a.active,.app-nav a:hover{
    color:var(--theme-color,#cd545b)
}
.app-nav a.active{
    border-bottom:2px solid var(--theme-color,#cd545b)
}
.app-nav li{
    display:inline-block;
    margin:0 1rem;
    padding:5px 0;
    position:relative
}
.app-nav li ul{
    background-color:#fff;
    border:1px solid #ddd;
    border-bottom-color:#ccc;
    border-radius:4px;
    box-sizing:border-box;
    display:none;
    max-height:calc(100vh - 61px);
    overflow-y:auto;
    padding:10px 0;
    position:absolute;
    right:-15px;
    text-align:left;
    top:100%;
    white-space:nowrap
}
.app-nav li ul li{
    display:block;
    font-size:14px;
    line-height:1rem;
    margin:0;
    margin:8px 14px;
    white-space:nowrap
}
.app-nav li ul a{
    display:block;
    font-size:inherit;
    margin:0;
    padding:0
}
.app-nav li ul a.active{
    border-bottom:0
}
.app-nav li:hover ul{
    display:block
}
.github-corner{
    border-bottom:0;
    position:fixed;
    right:0;
    text-decoration:none;
    top:0;
    z-index:1
}
.github-corner:hover .octo-arm{
    animation:a .56s ease-in-out
}
.github-corner svg{
    color:#fff;
    fill:var(--theme-color,#cd545b);
    height:80px;
    width:80px
}
main{
    display:block;
    position:relative;
    width:100vw;
    height:100%;
    z-index:0
}
main.hidden{
    display:none
}
.anchor{
    display:inline-block;
    text-decoration:none;
    transition:all .3s
}
.anchor span{
    color:#34495e
}
.anchor:hover{
    text-decoration:underline
}
.sidebar{
    border-right:1px solid rgba(0,0,0,.07);
    overflow-y:auto;
    padding:40px 0 0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    transition:transform .25s ease-out;
    width:300px;
    z-index:3
}
.sidebar>h1{
    margin:0 auto 1rem;
    font-size:1.5rem;
    font-weight:300;
    text-align:center
}
.sidebar>h1 a{
    color:inherit;
    text-decoration:none
}
.sidebar>h1 .app-nav{
    display:block;
    position:static
}
.sidebar .sidebar-nav{
    line-height:2em;
    padding-bottom:40px
}
.sidebar li.collapse .app-sub-sidebar{
    display:none
}
.sidebar ul{
    margin:0;
    padding:0
}
.sidebar li>p{
    font-weight:700;
    margin:0
}
.sidebar ul,.sidebar ul li{
    list-style:none
}
.sidebar ul li a{
    border-bottom:none;
    display:block
}
.sidebar ul li ul{
    padding-left:20px
}
.sidebar::-webkit-scrollbar{
    width:4px
}
.sidebar::-webkit-scrollbar-thumb{
    background:transparent;
    border-radius:4px
}
.sidebar:hover::-webkit-scrollbar-thumb{
    background:hsla(0,0%,53%,.4)
}
.sidebar:hover::-webkit-scrollbar-track{
    background:hsla(0,0%,53%,.1)
}
.sidebar-toggle{
    background-color:transparent;
    background-color:hsla(0,0%,100%,.8);
    border:0;
    outline:none;
    padding:10px;
    position:absolute;
    bottom:0;
    left:0;
    text-align:center;
    transition:opacity .3s;
    width:284px;
    z-index:4
}
.sidebar-toggle .sidebar-toggle-button:hover{
    opacity:.4
}
.sidebar-toggle span{
    background-color:var(--theme-color,#da291c);
    display:block;
    margin-bottom:4px;
    width:16px;
    height:2px
}
body.sticky .sidebar,body.sticky .sidebar-toggle{
    position:fixed
}
.content{
    padding-top:60px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:300px;
    transition:left .25s ease
}
.markdown-section{
    margin:0 auto;
    max-width:800px;
    padding:30px 15px 40px;
    position:relative
}
.markdown-section>*{
    box-sizing:border-box;
    font-size:inherit
}
.markdown-section>:first-child{
    margin-top:0!important
}
.markdown-section hr{
    border:none;
    border-bottom:1px solid #eee;
    margin:2em 0
}
.markdown-section iframe{
    border:1px solid #eee
}
.markdown-section table{
    border-collapse:collapse;
    border-spacing:0;
    display:block;
    margin-bottom:1rem;
    overflow:auto;
    width:100%
}
.markdown-section th{
    font-weight:700
}
.markdown-section td,.markdown-section th{
    border:1px solid #ddd;
    padding:6px 13px
}
.markdown-section tr{
    border-top:1px solid #ccc
}
.markdown-section p.tip,.markdown-section tr:nth-child(2n){
    background-color:#f8f8f8
}
.markdown-section p.tip{
    border-bottom-right-radius:2px;
    border-left:4px solid #f66;
    border-top-right-radius:2px;
    margin:2em 0;
    padding:12px 24px 12px 30px;
    position:relative
}
.markdown-section p.tip:before{
    background-color:#f66;
    border-radius:100%;
    color:#fff;
    content:"!";
    font-family:Dosis,Source Sans Pro,Helvetica Neue,Arial,sans-serif;
    font-size:14px;
    font-weight:700;
    left:-12px;
    line-height:20px;
    position:absolute;
    height:20px;
    width:20px;
    text-align:center;
    top:14px
}
.markdown-section p.tip code{
    background-color:#efefef
}
.markdown-section p.tip em{
    color:#34495e
}
.markdown-section p.warn{
    background:rgba(66,185,131,.1);
    border-radius:2px;
    padding:1rem
}
body.close .sidebar{
    transform:translateX(-300px)
}
body.close .sidebar-toggle{
    width:auto
}
body.close .content{
    left:0
}
@media print{
    .app-nav,.github-corner,.sidebar,.sidebar-toggle{
        display:none
    }
}
@media screen and (max-width:768px){
    .github-corner,.sidebar,.sidebar-toggle{
        position:fixed
    }
    .app-nav{
        margin-top:16px
    }
    .app-nav li ul{
        top:30px
    }
    main{
        height:auto;
        overflow-x:hidden
    }
    .sidebar{
        left:-300px;
        transition:transform .25s ease-out
    }
    .content{
        left:0;
        max-width:100vw;
        position:static;
        padding-top:20px;
        transition:transform .25s ease
    }
    .app-nav,.github-corner{
        transition:transform .25s ease-out
    }
    .sidebar-toggle{
        background-color:transparent;
        width:auto;
        padding:30px 30px 10px 10px
    }
    body.close .sidebar{
        transform:translateX(300px)
    }
    body.close .sidebar-toggle{
        background-color:hsla(0,0%,100%,.8);
        transition:background-color 1s;
        width:284px;
        padding:10px
    }
    body.close .content{
        transform:translateX(300px)
    }
    body.close .app-nav,body.close .github-corner{
        display:none
    }
    .github-corner:hover .octo-arm{
        animation:none
    }
    .github-corner .octo-arm{
        animation:a .56s ease-in-out
    }
}
@keyframes a{
    0%,to{
        transform:rotate(0)
    }
    20%,60%{
        transform:rotate(-25deg)
    }
    40%,80%{
        transform:rotate(10deg)
    }
}
section.cover{
    -ms-flex-align:center;
    align-items:center;
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    height:100vh;
    display:none
}
section.cover.show{
    display:-ms-flexbox;
    display:flex
}
section.cover.has-mask .mask{
    background-color:#fff;
    opacity:.8;
    position:absolute;
    top:0;
    height:100%;
    width:100%
}
section.cover .cover-main{
    -ms-flex:1;
    flex:1;
    margin:-20px 16px 0;
    text-align:center;
    z-index:1
}
section.cover a{
    color:inherit
}
section.cover a,section.cover a:hover{
    text-decoration:none
}
section.cover p{
    line-height:1.5rem;
    margin:1em 0
}
section.cover h1{
    color:inherit;
    font-family: Quicksand,Helvetica Neue,sans-serif;
    font-size:2.5rem;
    font-weight:300;
    margin:.625rem 0 0rem;
    position:relative;
    text-align:center
}

section.cover h2{
    color:inherit;
    font-family: Quicksand,Helvetica Neue,sans-serif;
    font-weight:300;
        font-size:1.75rem;

    margin: 0;
    position:relative;
    text-align:center
}
section.cover h1 a{
    display:block
}
section.cover h1 small{
    bottom:2.5375rem;
    font-size:1rem;
    position:absolute
}
section.cover blockquote{
    font-size:1.5rem;
    text-align:center
}
section.cover ul{
    line-height:1.8;
    list-style-type:none;
    margin:1em auto;
    max-width:500px;
    padding:0
}
section.cover .cover-main>p:last-child a{
    border:1px solid var(--theme-color,#cd545b);
    border-radius:2rem;
    box-sizing:border-box;
    color:var(--theme-color,#cd545b);
    display:inline-block;
    font-size:1.05rem;
    letter-spacing:.1rem;
    margin:.5rem 1rem;
    padding:.75em 2rem;
    text-decoration:none;
    transition:all .15s ease
}
section.cover .cover-main>p:last-child a:last-child{
    background-color:var(--theme-color,#cd545b);
    color:#fff
}
section.cover .cover-main>p:last-child a:last-child:hover{
    color:inherit;
    opacity:.8
}
section.cover .cover-main>p:last-child a:hover{
    color:inherit
}
section.cover blockquote>p>a{
    border-bottom:2px solid var(--theme-color,#cd545b);
    transition:color .3s
}
section.cover blockquote>p>a:hover{
    color:var(--theme-color,#cd545b)
}
.sidebar,body{
    background-color:#fff
}
.sidebar{
    color:#364149
}
.sidebar li{
    margin:6px 0 6px 15px
}
.sidebar ul li a{
    color:#505d6b;
    font-size:14px;
    font-weight:400;
    overflow:hidden;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap
}
.sidebar ul li a:hover{
    text-decoration:underline
}
.sidebar ul li ul{
    padding:0
}
.sidebar ul li.active>a{
    border-right:2px solid;
    color:var(--theme-color,#cd545b);
    font-weight:600
}
.app-sub-sidebar li:before{
    content:"-";
    padding-right:4px;
    float:left
}
.markdown-section h1,.markdown-section h2,.markdown-section h3,.markdown-section h4,.markdown-section strong{
    color:#2c3e50;
    font-weight:600
}
.markdown-section a{
    color:var(--theme-color,#cd545b);
    font-weight:600
}
.markdown-section h1{
    font-size:2rem;
    margin:0 0 1rem
}
.markdown-section h2{
    font-size:1.75rem;
    margin:45px 0 .8rem
}
.markdown-section h3{
    font-size:1.5rem;
    margin:40px 0 .6rem
}
.markdown-section h4{
    font-size:1.25rem
}
.markdown-section h5{
    font-size:1rem
}
.markdown-section h6{
    color:#777;
    font-size:1rem
}
.markdown-section figure,.markdown-section p{
    margin:1.2em 0
}
.markdown-section ol,.markdown-section p,.markdown-section ul{
    line-height:1.6rem;
    word-spacing:.05rem
}
.markdown-section ol,.markdown-section ul{
    padding-left:1.5rem
}
.markdown-section blockquote{
    border-left:4px solid var(--theme-color,#cd545b);
    color:#858585;
    margin:2em 0;
    padding-left:20px
}
.markdown-section blockquote p{
    font-weight:600;
    margin-left:0
}
.markdown-section iframe{
    margin:1em 0
}
.markdown-section em{
    color:#7f8c8d
}
.markdown-section code{
    border-radius:2px;
    color:#e96900;
    font-size:.8rem;
    margin:0 2px;
    padding:3px 5px;
    white-space:pre-wrap
}
.markdown-section code,.markdown-section pre{
    background-color:#f8f8f8;
    font-family:Roboto Mono,Monaco,courier,monospace
}
.markdown-section pre{
    -moz-osx-font-smoothing:initial;
    -webkit-font-smoothing:initial;
    line-height:1.5rem;
    margin:1.2em 0;
    overflow:auto;
    padding:0 1.4rem;
    position:relative;
    word-wrap:normal
}
.token.cdata,.token.comment,.token.doctype,.token.prolog{
    color:#8e908c
}
.token.namespace{
    opacity:.7
}
.token.boolean,.token.number{
    color:#c76b29
}
.token.punctuation{
    color:#525252
}
.token.property{
    color:#c08b30
}
.token.tag{
    color:#2973b7
}
.token.string{
    color:var(--theme-color,#cd545b)
}
.token.selector{
    color:#6679cc
}
.token.attr-name{
    color:#2973b7
}
.language-css .token.string,.style .token.string,.token.entity,.token.url{
    color:#22a2c9
}
.token.attr-value,.token.control,.token.directive,.token.unit{
    color:var(--theme-color,#cd545b)
}
.token.keyword{
    color:#e96900
}
.token.atrule,.token.regex,.token.statement{
    color:#22a2c9
}
.token.placeholder,.token.variable{
    color:#3d8fd1
}
.token.deleted{
    text-decoration:line-through
}
.token.inserted{
    border-bottom:1px dotted #202746;
    text-decoration:none
}
.token.italic{
    font-style:italic
}
.token.bold,.token.important{
    font-weight:700
}
.token.important{
    color:#c94922
}
.token.entity{
    cursor:help
}
.markdown-section pre>code{
    -moz-osx-font-smoothing:initial;
    -webkit-font-smoothing:initial;
    background-color:#f8f8f8;
    border-radius:2px;
    color:#525252;
    display:block;
    font-family:Roboto Mono,Monaco,courier,monospace;
    font-size:.8rem;
    line-height:inherit;
    margin:0 2px;
    max-width:inherit;
    overflow:inherit;
    padding:2.2em 5px;
    white-space:inherit
}
.markdown-section code:after,.markdown-section code:before{
    letter-spacing:.05rem
}
code .token{
    -moz-osx-font-smoothing:initial;
    -webkit-font-smoothing:initial;
    min-height:1.5rem
}
pre:after{
    color:#ccc;
    content:attr(data-lang);
    font-size:.6rem;
    font-weight:600;
    height:15px;
    line-height:15px;
    padding:5px 10px 0;
    position:absolute;
    right:0;
    text-align:right;
    top:0
}