<commit_before>/* Kelas Tutorial Style v0.1 */
html, body { overflow-x: hidden; }
body{
    margin:0;
    padding:0;
    font-family:'Roboto', sans-serif;
}
pre{
    margin-bottom:0px;
}
code{
    font-family:'Roboto Mono', monospace;
    font-size:13px;
}

/* List Reset */
li { list-style: square; }
li li { list-style: square; }
li li li { list-style: square; }
/* End List Reset */

.github-button{
    background-color:#aaa;font-size:13px;padding:6px 8px 6px 8px;margin-top:0px;text-align:right;background-color:#e0e0e0;color:#666;
}
.github-button a{
    color:#000;
}
.navigation-button{
    padding:23px 28px 21px 28px;
    color:#fff;
    margin-bottom:-38px;
}
    
/* Navigation */
nav{
    position:fixed;
    z-index:1000;
}
.navigation{
    position:fixed;
    color:#000;
    text-align:center;
}
.navigation a{
    color:#000;
}
.navigation-logo{
    float:left;padding:5px 0 0 5px;margin-right:20px;
}
.navigation-search-form{
    text-align:left;
}
.navsearchinput{
    width:63% !important;
}
.navigation-menu{
    text-align:right;padding-right:50px;margin-top:-2px;
}
@media only screen and (max-width: 337px) {
   .navsearchinput{
    width:50% !important;
    }
}
    
@media only screen and (max-width: 993px) {
    .hide-on-tablet{
        display: none;
    }
    .navigation-search-form{
        margin-left:0;
    } 
    
}

@media only screen and (min-width: 993px) {
    .hide-on-desktop{
        display: none;
    }
    .navsearchinput{
    width:50% !important;
    }
}

.mobile-navigation a{
    font-weight:400;
}


.navigation-home{
    color:#000;
    text-align:center;
}
.navigation-home a{
    color:#000;
}

/* End Navigation */

/* Homepage */
.wall-home{
    padding:180px 0 200px 0;
    margin-top:0;
    border-radius:0;
    text-align:center;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}

.homepage-header-logo{
    margin-bottom:25px;
    width:400px;
}

.home-search-form{
    width:50%;
    margin:0 auto;
}
@media only screen and (max-width: 601px) {
    .homepage-header-logo{
        width:70%;
    }
    .wall-home{
        padding:90px 0 90px 0;
    }
    .homepage-header-logo{
        margin-bottom:15px;
    }
}
.tutorial-summary{
    text-align:center;
    padding:30px 0 30px 0;
}
.tutorial-summary h3{
    font-weight:300;
    font-size:25px;
    margin-bottom:50px;
}
.tutorial-summary a{
    color:#555;
    margin-bottom:20px;
}
.tutorial-summary a:hover{
    color:#E53935 ;
}




.tutorial-wall{
    margin-top:0;
    height:350px;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}

.left-sidebar{
    font-size:14px;
    padding:15px;
    border-bottom:1px solid #ccc;
}
.left-sidebar-container{
    width:300px;
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom:80px;
}
.floating-sidebar {
    position:fixed;
    top:78px;
}

/* Main Tutorial Content */
.main-content{
    color:#000;
    padding:25px;
}
.main-content h2{
    font-size:38px;
    color:#555;
}
.main-content h3{
    font-size:20px;
    color:#333;
    font-weight: bolder;
}
.main-content p{
    margin-bottom: 25px;
}
.main-content pre{
    margin-bottom: 50px;
}
.syntax{
    background-color:#ddd;
    font-family: 
}
.main-content-nav{
    font-size:14px;
    padding:15px 15px 15px 25px;
}
.main-content-article{
    margin-top:30px;
}

.main-content-nav-title{
    color:#fff;
    opacity:0.7;
    margin-right:10px;
}
.main-content-heading{
    display:inline;margin-left:-10px;font-size:14px;color:#0f0;
}

.main-content-nav-title:hover{
    opacity:1;
}
.main-content pre{
    margin-bottom: 0px;
}
.main-content table th{
    background-color:#d0d0d0;
    border-radius:0px;
    border-left:1px solid #fff;
    border-bottom:1px solid #fff;F
}
.main-content table td{
    background-color:#f0f0f0;
    border-left:1px solid #fff;
    border-bottom:1px solid #fff;
    border-radius:0px;
}
.main-content-date{
    margin-top:30px;
    border-top: 0.3px solid #e0e0e0;
    font-size: 12px;
    font-style: italic;
    padding-top: 13px;
    line-height: 20px;
    color: #888;
}
.previews-button{
    float:left;
}
.next-button{
    float:right;
}
/* End Main Tutorial Content */

.subtutorial{
    font-weight:bolder;
    line-height:25px;
    border-bottom:1px solid #eee;
    color:#777;
}
.subtutorial-list{
    line-height:25px;
    color:#222;
}
.subtutorial-list:hover{
    color:#e53935;
}

/* Contact Page */
.contact-wall{
    margin-top:0;
    height:350px;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}
/* End Contact Page */

/* Page Not Found */
.not-found-wall{
    margin-top:0;
    height:350px;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}
/* End Page Not Found */



/* Footer */
.footer{
    height:auto;
    padding:0;
    color:rgba(255,255,255,0.7);
    font-size:14px;
    padding-bottom:-30px;
    background:linear-gradient(90deg,#f5f5f5     50%,#e0e0e0    50%);
}
.footer a{
    color:#fff;
}
.footer-menu-wrapper{
    padding:35px 0 40px 0;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:0px;
    margin:0 auto;
    max-width:1280px;
    width:100%
    
}
@media only screen and (min-width: 601px) {
    .footer-menu-wrapper{width:100%}
    .footer-menu-wrapper .row{margin-left:0;margin-right:0;}
}
    
@media only screen and (min-width: 993px) {
    .footer-menu-wrapper{width:100%}
    .footer-menu-wrapper .row{margin-left:0;margin-right:0;}
    
}
.footer-menu{
    line-height: 40px;
    font-weight: bolder;
    color:#323232;
}
.footer-submenu{
    line-height: 30px;
    color:#424242;
}
.footer-submenu:hover{
    color:#E53935;
}
.footer-box-wrapper{
    padding-left:100px;
}


/* Site Terms */

.site-terms{
    height:auto;background-color:#fafafa;
    padding-bottom: 0px;
}
.site-terms h3{
    font-size:25px;
    color:#333;
    margin:30px 0 15px 0;
    font-weight: 400;
}
.site-terms .last-modified{
    margin-top:40px;
    border-top: 0.3px solid #e0e0e0;
    font-size: 12px;
    font-style: italic;
    padding-top: 5px;
    line-height: 20px;
    color: #888;
}
.site-terms .site-terms-header{
    background-color:#f4f4f6;max-width:1143px;height:auto;padding:85px 75px 50px 75px;margin:0 auto;
}
.site-terms .site-terms-content{
    padding:30px 85px 75px 85px;max-width:1143px;margin:0 auto;background-color:#fff;
}
@media only screen and (max-width: 601px) {
    .site-terms .site-terms-header{padding:85px 15px 50px 15px;}
    .site-terms .site-terms-content{padding:25px 20px 50px 20px;}
}

/* End Site Terms */

/* Privacy Policy */

.privacy-policy{
    height:auto;background-color:#f0f0f0
}
.privacy-policy h2{
    font-size:38px;
    color:#555;
}
.privacy-policy h3{
    font-size:20px;
    color:#333;
    font-weight: bolder;
}

/* End Privacy Policy */


/* Contact */

.contact{
    height:auto;background-color:#f0f0f0
}
.contact h2{
    font-size:38px;
    color:#555;
}
.contact h3{
    font-size:20px;
    color:#333;
    font-weight: bolder;
}
/* End Contact*/

/* About */

.about-tutorials{
    padding:90px 0 90px 0;
}
.about-tutorials img{
    border-radius: 2px;
}
.about-tutorials h4{
    font-size:36px;font-weight:300;color:#E53935;margin:5px 0 5px 0;
}
.about-tutorials p{
    font-size:17px;margin:10px 0 10px 0
}
.about-tutorials a{
    color:#444;
    margin-bottom:20px;
}
.about-tutorials a:hover{
    color:#E53935 ;
}

/* End About */

/* All Tutorials */
.all-tutorial-container{
    padding:95px 0 40px 0;
}
.alphabet{
    margin:0 37px 0 0;
    line-height:38px;
    font-weight: bold;
}
.alphabet-container{
    padding:0 0 20px 0;
}
.alphabet-title{
    font-size:38px;
    font-weight: 300;
    line-height: 50px;
}
.alphabet-tutorial:hover{
    font-weight: bold;
}
.alphabet-box{
    border-top:1px solid #e0e0e0;
    padding:10px 0 0 0;
}


/* Tutorials */
.tutorials-index-category{
    font-weight: 400;
    color: #909090;
    font-size: 14px;
}
.tutorials-index-head-two{
    font-weight: 300;
    margin: 25px 0 20px;
    font-size: 46px;
}
@media only screen and (max-width: 601px) {
    .tutorials-index-head-two{
        font-size: 35px;
    }
}
.tutorials-index-head-four{
    font-size:36px;
    font-weight: 300;
}
.about-tutorial-summary{
    padding:0 100px 0 0;
}
@media only screen and (max-width: 601px) {
    .about-tutorial-summary{
        padding:0 20px 0 20px;
    }
}<commit_msg>update html tutorial index<commit_after>/* Kelas Tutorial Style v0.1 */
html, body { overflow-x: hidden; }
body{
    margin:0;
    padding:0;
    font-family:'Roboto', sans-serif;
}
pre{
    margin-bottom:0px;
}
code{
    font-family:'Roboto Mono', monospace;
    font-size:13px;
}

/* List Reset */
li { list-style: square; }
li li { list-style: square; }
li li li { list-style: square; }
/* End List Reset */

.github-button{
    background-color:#aaa;font-size:13px;padding:6px 8px 6px 8px;margin-top:0px;text-align:right;background-color:#e0e0e0;color:#666;
}
.github-button a{
    color:#000;
}
.navigation-button{
    padding:23px 28px 21px 28px;
    color:#fff;
    margin-bottom:-38px;
}
    
/* Navigation */
nav{
    position:fixed;
    z-index:1000;
}
.navigation{
    position:fixed;
    color:#000;
    text-align:center;
}
.navigation a{
    color:#000;
}
.navigation-logo{
    float:left;padding:5px 0 0 5px;margin-right:20px;
}
.navigation-search-form{
    text-align:left;
}
.navsearchinput{
    width:63% !important;
}
.navigation-menu{
    text-align:right;padding-right:50px;margin-top:-2px;
}
@media only screen and (max-width: 337px) {
   .navsearchinput{
    width:50% !important;
    }
}
    
@media only screen and (max-width: 993px) {
    .hide-on-tablet{
        display: none;
    }
    .navigation-search-form{
        margin-left:0;
    } 
    
}

@media only screen and (min-width: 993px) {
    .hide-on-desktop{
        display: none;
    }
    .navsearchinput{
    width:50% !important;
    }
}

.mobile-navigation a{
    font-weight:400;
}


.navigation-home{
    color:#000;
    text-align:center;
}
.navigation-home a{
    color:#000;
}

/* End Navigation */

/* Homepage */
.wall-home{
    padding:180px 0 200px 0;
    margin-top:0;
    border-radius:0;
    text-align:center;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}

.homepage-header-logo{
    margin-bottom:25px;
    width:400px;
}

.home-search-form{
    width:50%;
    margin:0 auto;
}
@media only screen and (max-width: 601px) {
    .homepage-header-logo{
        width:70%;
    }
    .wall-home{
        padding:90px 0 90px 0;
    }
    .homepage-header-logo{
        margin-bottom:15px;
    }
}
.tutorial-summary{
    text-align:center;
    padding:30px 0 30px 0;
}
.tutorial-summary h3{
    font-weight:300;
    font-size:25px;
    margin-bottom:50px;
}
.tutorial-summary a{
    color:#555;
    margin-bottom:20px;
}
.tutorial-summary a:hover{
    color:#E53935 ;
}




.tutorial-wall{
    margin-top:0;
    height:350px;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}

.left-sidebar{
    font-size:14px;
    padding:15px;
    border-bottom:1px solid #ccc;
}
.left-sidebar-container{
    width:300px;
    height:100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom:80px;
}
.floating-sidebar {
    position:fixed;
    top:78px;
}

/* Main Tutorial Content */
.main-content{
    color:#000;
    padding:25px;
}
.main-content h2{
    font-size:38px;
    color:#555;
}
.main-content h3{
    font-size:20px;
    color:#333;
    font-weight: bolder;
}
.main-content p{
    margin-bottom: 25px;
}
.main-content pre{
    margin-bottom: 50px;
}
.syntax{
    background-color:#ddd;
    font-family: 
}
.main-content-nav{
    font-size:14px;
    padding:15px 15px 15px 25px;
}
.main-content-article{
    margin-top:30px;
}

.main-content-nav-title{
    color:#fff;
    opacity:0.7;
    margin-right:10px;
}
.main-content-heading{
    display:inline;margin-left:-10px;font-size:14px;color:#0f0;
}

.main-content-nav-title:hover{
    opacity:1;
}
.main-content pre{
    margin-bottom: 0px;
}
.main-content table th{
    background-color:#d0d0d0;
    border-radius:0px;
    border-left:1px solid #fff;
    border-bottom:1px solid #fff;F
}
.main-content table td{
    background-color:#f0f0f0;
    border-left:1px solid #fff;
    border-bottom:1px solid #fff;
    border-radius:0px;
}
.main-content-date{
    margin-top:30px;
    border-top: 0.3px solid #e0e0e0;
    font-size: 12px;
    font-style: italic;
    padding-top: 13px;
    line-height: 20px;
    color: #888;
}
.previews-button{
    float:left;
}
.next-button{
    float:right;
}
/* End Main Tutorial Content */

.subtutorial{
    font-weight:bolder;
    line-height:25px;
    border-bottom:1px solid #eee;
    color:#777;
}
.subtutorial-list{
    line-height:25px;
    color:#222;
}
.subtutorial-list:hover{
    color:#e53935;
}

/* Contact Page */
.contact-wall{
    margin-top:0;
    height:350px;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}
/* End Contact Page */

/* Page Not Found */
.not-found-wall{
    margin-top:0;
    height:350px;
    background-image: url("https://kelastutorial.com/images/background-home.svg");
    background-color: #B72028;
    background-size: cover;
    background-position:center;
}
/* End Page Not Found */



/* Footer */
.footer{
    height:auto;
    padding:0;
    color:rgba(255,255,255,0.7);
    font-size:14px;
    padding-bottom:-30px;
    background:linear-gradient(90deg,#f5f5f5     50%,#e0e0e0    50%);
}
.footer a{
    color:#fff;
}
.footer-menu-wrapper{
    padding:35px 0 40px 0;
    margin-bottom:0px;
    padding-top:0px;
    padding-bottom:0px;
    margin:0 auto;
    max-width:1280px;
    width:100%
    
}
@media only screen and (min-width: 601px) {
    .footer-menu-wrapper{width:100%}
    .footer-menu-wrapper .row{margin-left:0;margin-right:0;}
}
    
@media only screen and (min-width: 993px) {
    .footer-menu-wrapper{width:100%}
    .footer-menu-wrapper .row{margin-left:0;margin-right:0;}
    
}
.footer-menu{
    line-height: 40px;
    font-weight: bolder;
    color:#323232;
}
.footer-submenu{
    line-height: 30px;
    color:#424242;
}
.footer-submenu:hover{
    color:#E53935;
}
.footer-box-wrapper{
    padding-left:100px;
}


/* Site Terms */

.site-terms{
    height:auto;background-color:#fafafa;
    padding-bottom: 0px;
}
.site-terms h3{
    font-size:25px;
    color:#333;
    margin:30px 0 15px 0;
    font-weight: 400;
}
.site-terms .last-modified{
    margin-top:40px;
    border-top: 0.3px solid #e0e0e0;
    font-size: 12px;
    font-style: italic;
    padding-top: 5px;
    line-height: 20px;
    color: #888;
}
.site-terms .site-terms-header{
    background-color:#f4f4f6;max-width:1143px;height:auto;padding:85px 75px 50px 75px;margin:0 auto;
}
.site-terms .site-terms-content{
    padding:30px 85px 75px 85px;max-width:1143px;margin:0 auto;background-color:#fff;
}
@media only screen and (max-width: 601px) {
    .site-terms .site-terms-header{padding:85px 15px 50px 15px;}
    .site-terms .site-terms-content{padding:25px 20px 50px 20px;}
}

/* End Site Terms */

/* Privacy Policy */

.privacy-policy{
    height:auto;background-color:#f0f0f0
}
.privacy-policy h2{
    font-size:38px;
    color:#555;
}
.privacy-policy h3{
    font-size:20px;
    color:#333;
    font-weight: bolder;
}

/* End Privacy Policy */


/* Contact */

.contact{
    height:auto;background-color:#f0f0f0
}
.contact h2{
    font-size:38px;
    color:#555;
}
.contact h3{
    font-size:20px;
    color:#333;
    font-weight: bolder;
}
/* End Contact*/

/* About */

.about-tutorials{
    padding:90px 0 90px 0;
}
.about-tutorials img{
    border-radius: 2px;
}
.about-tutorials h4{
    font-size:36px;font-weight:300;color:#E53935;margin:5px 0 5px 0;
}
.about-tutorials p{
    font-size:17px;margin:10px 0 10px 0
}
.about-tutorials a{
    color:#444;
    margin-bottom:20px;
}
.about-tutorials a:hover{
    color:#E53935 ;
}

/* End About */

/* All Tutorials */
.all-tutorial-container{
    padding:95px 0 40px 0;
}
.alphabet{
    margin:0 37px 0 0;
    line-height:38px;
    font-weight: bold;
}
.alphabet-container{
    padding:0 0 20px 0;
}
.alphabet-title{
    font-size:38px;
    font-weight: 300;
    line-height: 50px;
}
.alphabet-tutorial:hover{
    font-weight: bold;
}
.alphabet-box{
    border-top:1px solid #e0e0e0;
    padding:10px 0 0 0;
}


/* Tutorials */
.tutorials-index-category{
    font-weight: 400;
    color: #909090;
    font-size: 14px;
}
.tutorials-index-head-two{
    font-weight: 300;
    margin: 25px 0 20px;
    font-size: 46px;
}
@media only screen and (max-width: 601px) {
    .tutorials-index-head-two{
        font-size: 35px;
    }
}
.tutorials-index-head-four{
    font-size:36px;
    font-weight: 300;
}
.about-tutorial-summary{
    padding:0 400px 0 0;
}
@media only screen and (max-width: 601px) {
    .about-tutorial-summary{
        padding:0 20px 0 20px;
    }
}
{'fraction_non_alphanumeric': 0.15450059554194318, 'fraction_numerical': 0.06602007827122681, 'mean_word_length': 2.8974358974358974, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '616843', 'n_tokens_mistral': 7796, 'n_tokens_neox': 6884, 'n_words': 1219}