@flyskywhy/react-native-gcanvas/tools/build_website/style/index.less

A C++ native canvas 2D/WebGL component based on gpu opengl glsl shader GCanvas

/*hightlight.js vs*/
.hljs{display:block;overflow-x:auto;padding:0.5em;background:white;color:black}.hljs-comment,.hljs-quote,.hljs-variable{color:#008000}.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-name,.hljs-tag{color:#00f}.hljs-string,.hljs-title,.hljs-section,.hljs-attribute,.hljs-literal,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-addition{color:#a31515}.hljs-deletion,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-meta{color:#2b91af}.hljs-doctag{color:#808080}.hljs-attr{color:#f00}.hljs-symbol,.hljs-bullet,.hljs-link{color:#00b0e8}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}


html, body{
    margin: 0;
    padding: 0;
    font-family: 'Verdana','Hiragino Sans GB','Microsoft Yahei',sans-serif;
    overflow: auto;
}

.header{

    height: 64px;

    background-color: rgb(51, 51, 51);

    .menu{
        width: 1280px;
        height: 64px;
        margin: auto;

        .item{
            display: inline-block; 
            margin-right: 20px;
            height: 64px;
            line-height: 64px;
            
            color: rgb(255, 255, 255);
            vertical-align: middle;

            .logo{
                margin-top: -13px;
                height: 90px;
            }

            .logo-small{
                margin-top: 7px; 
                height: 50px;
            }

            .link{
                text-decoration: none;
                &:link{
                    color: #fff;
                }
                &:active{
                    color: #fff;
                }
                &:visited{
                    color: #fff;
                }
            }


        }

        .item-right{
            height: 64px;
            float:right;
            .link{                
                .logo{
                    height: 64px;
                }
            }

        }
    }
}

.footer{
    clear: both;
    height: 170px;
    background-color: rgb(51, 51, 51);

    .content{
        width: 1280px;
        margin: auto;

        .open-source-icon{
            padding-top: 40px;
            padding-bottom: 40px;
            display: block;
        }
        .license{
            color: rgba(255,255,255,0.7);
        }
        .copyright{
            color: rgba(255,255,255,0.7);
            float: right;
            margin-top: -18px;
        }
    }
}



.gcanvas{

    .banner{

        height: 700px;

        position: relative;

        .content{

            color: #fff;

            .title{
                text-align: center;
                font-size: 60px;
                font-weight: bolder;
                padding-top: 165px;
            }

            .description{
                text-align: center;
                font-size: 30px;
                font-weight: lighter;
                padding-top: 10px; 
            }

            .github{
                display: none;
            }

            .github-buttons{
                text-align: center;
                margin-top: 20px;
                a{
                    display: none;
                }
                iframe{
                    margin: 0 10px;
                }
            }
        }
    }

    .intro{
        .content{
            width: 1280px;
            margin: auto;

            padding: 100px 0;

            .logo{
                img{
                    display: block;
                    width: 200px;
                    margin: auto;
                }
            }

            .title{
                font-size: 30px;
                text-align: center;
            }

            .description{
                font-size: 18px;
                color: #777;
                padding: 20px 140px;
            }

            .blueprint{
                height: 550px;
                img{
                    display: block;
                    width: 1280px;
                    margin: auto;
                }
            }

            .demos{
                margin-top: 30px; 
                display: flex;
                .demo{
                    width: 33%;
                    text-align: center;
                    img{
                        border: 1px solid #000;
                    }
                }
            }
        }
    }

    .archi{
        height: 620px;
        background: linear-gradient(to bottom, rgb(10,97,252), rgb(3,189,252));

        .content{
            padding-top: 50px;
            img{
                width: 700px;
                margin: auto;
                display: block;
            }
        }
    }

    .usage{
        background: #fff;
        padding: 0px 0;

        .content{
            width: 1280px;
            margin: auto;
            padding-bottom: 50px;

            .title{
                text-align: center;
                font-size: 30px;
            }

            img{
                width: 800px;
                display: block;
                margin: auto;
            }

            .user-list{
                width: 800px;
                margin: auto;
                padding: 50px 0;
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                img{
                    width: 100px;
                    height: 100px;
                    margin: 30px 50px;
                }
            }
        }
    }

    .content{
        width: 1080px;
        margin: auto;
        padding: 100px 0;

        .coorp-item{

            &:link{
                color: #555;
            }
            &:active{
                color: #555;
            }
            &:visited{
                color: #555;
            }

            text-decoration: none;
            
            display: block;
            margin-bottom: 50px;
            padding: 20px;
            border: 1px solid #eee;
            display: flex;
            box-shadow: 0px 2px 5px #ccc;
            overflow: hidden;
            .item{
                width: 50%;
                padding: 30px;
                img{
                    height: 300px;
                }
                .title{
                    margin-top: 100px;
                    font-size: 30px;
                }
                .description{
                    margin-top: 20px;
                }
            }
            .left{
                .item;
            }
            .right{
                .item;
            }


        }

    }
}



.doc{
    padding-top: 20px;
    padding-bottom: 100px;
    line-height: 25px;

    .content{
        width: 1200px;
        margin: auto;
        padding: 20px 80px;

        .index{

            float: left;
            width: 300px;

            overflow: hidden;

            ol{
                list-style: none;
                -webkit-margin-start: -20px;

                .item-title{
                    padding: 5px 0 5px 0px;
                    margin-right: 30px;
                    &::before{
                        content: '▶ ';
                        font-size: 8px;
                    }
                }

                li{
                    padding: 5px 0;
                    font-size: 16px;
                    a{
                        text-decoration: none;
                        margin-left: 15px; 
                        display: block;
    
                        &:link{
                            color: #555;
                        }
                        &:active{
                            color: #555;
                        }
                        &:visited{
                            color: #555;
                        }
                    }
                }
            }
        }

        .body{

            margin-left: 300px;
            &.full{
                margin-left: 0;
            }
        }
    }

    pre{
        overflow-y: auto;
        padding: 10px;
        background-color: #eee;
        code{
            font-family: 'Consolas', 'Courier', sans-serif;
        }
    }

    code{
        padding: 5px 3px;
        background: #eee;
        font-family: 'Consolas', 'Courier', sans-serif;
    }


    table{
        border: 1px solid #aaa;
        border-collapse: collapse;

        width: 100%;

        color:#444;

        thead{
            tr{
                background: #eee;                
                th{
                    text-align: left;
                    border-right: 1px solid #ccc;
                    padding: 5px;
                    &:last-child{
                        border-right: none;
                    }
                }
            }
        }

        tbody{
            tr{
                &:nth-child(2){
                    background: #eee;
                }      
                td{
                    border-top: 1px solid #ccc;
                    border-right: 1px solid #ccc;                    
                    padding: 5px;                    
                    &:last-child{
                        border-right: none;
                    }       
                }
            }
        }
    }

    img{
        max-width: 900px;
    }
}


iframe.playground{
    display: block;
    height: 1000px;
    // width: 1500px;
    width: 100%;
    margin: 20px auto;
    // margin-left: -160px;
    border: 1px solid #aaa;
    box-shadow: #ccc 2px 0px 4px;
}


@media only screen and (max-device-width: 640px){
    
    html, body{
        font-size: 30px;
    }

    .header{
        display: none;
    }

    .gcanvas{

        .banner{
            height: 100vh;
            ::after{
                height: 60vh;
                background-color: #000;
            }

            .content{
                display: block;

                width: 100vw;

                text-shadow: 0px 0px 3px #000000;

                .title{
                    padding-top: 65vh;
                    font-size: 3rem;
                    width: 100vw;
                }

                .description{
                    padding-top: 1vh; 
                    font-size: 1.5rem;
                    width: 100vw;                        
                }

                .github{
                    display: block;
                    background: #ff7979;
                    margin-left: 37vw;
                    margin-top: 10vw;
                    width: 25vw;
                    height: 10vw;
                    line-height: 10vw;
                    font-size: 1.5rem;
                    border-radius: 5vh;
                    text-align: center;
                    a{
                        text-decoration: none;
                        color: #fff;
                        &:hover{
                            color:#fff;
                        }
                        &:link{
                            color: #fff;
                        }
                    }
                }

                .github-buttons{
                    display: none;
                }
            }
        }

        .intro{

            .content{
                width: 100vw;
                height: 100vh;

                .logo{
                    img{
                        width: 50vw;
                    }
                }
    
                .title{
                    display: none;
                }

                .description{
                    font-size: 1.5rem;
                    padding: 0vw 10vw;
                    line-height: 4.5vh;
                }

                .blueprint{
                    display: none;
                }

                .demos{
                    display: none;
                }
            }
        }

        .archi{
            display: none;
        }

        .usage{

            .content{
                width: 100vw;
                .title{
                    width: 100vw;
                    font-size: 2rem;
                    color: #888;
                }
    
                .user-list{
                    width: 100vw;
                    margin: 0;
                    img{
                        width: 30vw;
                        height: 30vw;
                        margin: 10vw;
                    }
                }
            }

        }

    }


    .footer{
        height: 30vh;
        .content{
            
            width: 100vw;
            margin: auto;
    
            .open-source-icon{
                padding-left: 30vw;
                padding-top: 5vh;
                padding-bottom: 5vh;
                width: 40vw;
                display: block;
                img{
                    width: 40vw;
                }
            }
            .license{
                float: none;
                font-size: 1.5rem;
                text-align: center;
                height: 7vh;                
            }
            .copyright{
                float: none;
                font-size: 1.5rem;
                text-align: center;                
                height: 7vh;
            }
        }
    }


}