Subversion Repositories Integrator Subversion

@import '../global/_variables'; // global variables.
@import '../global/components/_mixins'; // global mixings.

/***
Blog Page
***/

// BEGIN : GENERAL BLOG CLASSES
.blog-page{

        // BEGIN : BORDER CONTAINERS
        .bordered{
                border:1px solid;
                border-color: $general-panel-border-color;
        }
        // END : BORDERED CONTAINERS

        .blog-container{
                margin-bottom: 30px;

        }

        .blog-title{

                > a{
                        color:#4e5a64;
                        font-weight: 600;

                        &:hover{
                                color: #3598DC;
                                text-decoration: none;
                        }
                }
        }
        
}

// END : GENERAL BLOG CLASSES

// BLOG PAGE 1
.blog-content-1{

        // BEGIN : BLOG POST 
        .blog-img-thumb{
                overflow: hidden;
                position: relative;

                img{
                        width:100%;
                        top:0;
                        bottom:0;
                        left:0;
                        right:0;
                        position: absolute;
                        margin:auto;
                }
        }

        .blog-post-content{
                padding: 20px 30px 30px 30px;
                background-color: #fff;

                > .blog-post-title {
                        margin: 0 0 30px 0;

                        > a{
                                font-size: 20px;
                        }
                }

                >.blog-post-desc{
                        color:#a0a9b4;
                        font-size: 14px;
                        margin:15px 0;
                }

                >.blog-post-foot{

                        >.blog-post-meta{
                                display: inline-block;
                                margin-right: 10px;

                                >a {
                                        color: #9aa5b2;
                                        font-size: 13px;
                                        font-weight: 600;

                                        &:hover{
                                                color: #3598DC;
                                                text-decoration: none;                          
                                        }
                                }

                                >i{
                                        margin-right: 5px;
                                }

                                &:last-child{
                                        margin-right: 0;
                                }
                        }

                }

        }

        .blog-post-lg{

                >.blog-img-thumb{
                        height:480px;
                }

                >.blog-post-content{

                        >.blog-post-desc{
                                margin-bottom: 30px;
                        }

                        >.blog-post-foot{
                                border-top:1px solid;
                                border-top-color: #f0f1f2;
                                padding-top: 20px;
                                text-align: right;

                                >.blog-post-tags{
                                        text-align: left;
                                        float:left;
                                        padding:0;

                                        >li{
                                                list-style: none;
                                                display: inline-block;
                                                margin-right:5px;

                                                > a{
                                                        background-color: #f4f6f8;
                                                        color: #a0a9b4;
                                                        font-size: 11px;
                                                        font-weight: 600;
                                                        padding: 7px 10px;

                                                        &:hover{
                                                                background-color: #3598DC;
                                                                color: #fff;
                                                                text-decoration: none;
                                                        }
                                                }

                                                &:last-child{
                                                        margin-right: 0;
                                                }
                                        }
                                }
                        }
                }

        }

        .blog-post-sm{

                >.blog-img-thumb{
                        height:200px;
                }

                >.blog-post-content{

                        >.blog-post-title{
                                margin: 0 0 15px 0;
                        }

                        >.blog-post-foot{
                                border:none;
                        }
                }
        }

        // END : BLOG POST 

        // BEGIN : BLOG QUOTES 

        .blog-quote{
                background-color: #fff;
                padding-bottom:30px;

                >.blog-quote-label{
                        color: #fff;
                        padding:30px 40px 80px 40px;
                        font-size: 18px;
                        line-height: 28px;

                        > i{
                                display: block;
                                font-size: 30px;
                                margin-bottom: 15px;
                        }
                } 

                >.blog-quote-avatar{
                        width:110px;
                        height: 110px;
                        border-radius: 50% !important;
                        margin: -55px auto 25px auto;
                        overflow: hidden;

                        img{
                                width:100%;

                        }
                }

                >.blog-quote-author{
                        text-align: center;

                        >.blog-quote-title{
                                font-size: 20px;
                                margin: 0 0 15px 0;
                        }

                        >.blog-quote-desc{
                                font-size: 16px;
                                color: #9aa5b2;
                                margin:0;
                        }
                }
        }

        // END : BLOG QUOTES 


        // BEGIN : BLOG VIDEO
        .blog-video{

                >.blog-img-thumb{
                        height:330px;

                        img{
                                margin: 0; 
                        }
                }

                >.blog-video-play{
                        i{
                                color:#da555b;
                                background-color: rgba(0,0,0,0.64);
                                font-size: 35px;
                                padding: 27px 20px;
                            position: absolute;
                            z-index: 5;
                            margin: -90px 0 0 20px;
                            border-radius: 50%;
                        }
                }

                >.blog-video-content{
                        text-align: center;
                        padding:30px;

                        >.blog-video-title{
                                font-size: 20px;
                                margin: 0 0 15px 0;
                        }

                        >.blog-video-desc{
                                font-size: 16px;
                                color: #9aa5b2;
                                margin:0;
                        }
                }
        }
        // END : BLOG VIDEO     

        // BEGIN : BLOG BANNER
        .blog-banner{
                background-position: center;
                text-align: center;
                padding: 100px 0;

                >.blog-banner-title{
                        >a {
                                color:#fff;

                                &:hover{
                                        color: #3598DC;
                                }
                        }
                }
        }
        // END : BLOG BANNER
}
// END : BLOG PAGE 1

// BEGIN : BLOG PAGE 2
.blog-content-2{

        .blog-single-content{
                padding: 40px 30px 15px 30px;
                background-color: #fff;

                >.blog-single-head{

                        >.blog-single-head-title{
                                font-size: 25px;
                                font-weight: 600;
                                color: #4e5a64;
                                margin: 0 0 40px 0;
                                display: inline-block;
                        }

                        >.blog-single-head-date{
                                float:right;
                                font-size: 13px;
                                font-weight: 600;
                                margin-top: 7px;

                                >i{
                                        margin-right: 5px;
                                }

                                >a{
                                        color:#9aa5b2;

                                        &:hover{
                                                color: #3598DC;
                                                text-decoration: none;
                                        }
                                }
                        }
                }

                >.blog-single-img{
                        margin: 0 0 35px 0;

                        >img{
                                width:100%;
                        }
                }

                >.blog-single-desc{

                        >p{
                                margin:0 0 35px 0;
                                font-size: 16px;
                                color: #7e8691;
                                line-height: 24px;
                        }
                }

                >.blog-single-foot{
                        border-top:1px solid;
                        border-bottom:1px solid;
                        border-color: #f0f1f2;
                        padding: 20px 0 25px 0;
                        margin-bottom: 20px;

                        >.blog-post-tags{
                                text-align: left;
                                padding:0;
                                margin:0;

                                >li{
                                        list-style: none;
                                        display: inline-block;
                                        margin-right:5px;

                                        > a{
                                                background-color: #f4f6f8;
                                                color: #a0a9b4;
                                                font-size: 11px;
                                                font-weight: 600;
                                                padding: 7px 10px;

                                                &:hover{
                                                        background-color: #3598DC;
                                                        color: #fff;
                                                        text-decoration: none;
                                                }
                                        }

                                        &:last-child{
                                                margin-right: 0;
                                        }
                                }
                        }
                }

                .blog-comments {
                        display: inline-block;
                        font-size: 14px;
                        font-weight: 400;
                        margin: 6px 10px 3px 0;

                        .blog-comments-title{
                                font-size: 20px;
                        }

                        .c-comment-list {
                                margin-bottom: 60px;

                                .media {
                                        margin: 30px 0;

                                        .media-body {
                                                > .media:last-child {
                                                        margin-bottom: 0;
                                                }
                                        }
                                }

                                .media-object {
                                        height: 50px;
                                        width: 50px;
                                        border-radius: 50px !important;
                                }

                                .media-heading {
                                        > a {
                                                color: #9aa5b2;
                                                font-weight: 600;

                                                &:hover{
                                                        color: #3598DC;
                                                        text-decoration: none;
                                                }
                                        }

                                        > .c-date {
                                                font-size: 14px;
                                        }       
                                }
                        }
                
                        i {
                                position: relative;
                                top: 2px;
                        }

                        input,
                        textarea{
                                &:focus{
                                        outline:0;
                                        border:1px solid #ccc;
                                }
                        }
                } 
        }

        .blog-single-sidebar{
                padding:40px 30px;
                background-color: #fff;

                .blog-sidebar-title{
                        font-weight: 600;
                        font-size: 14px;
                        color: #4e5a64;
                        letter-spacing: 1px;
                        margin-top: 40px;
                        margin-bottom: 30px;
                }

                >.blog-single-sidebar-search{

                        input{
                                font-size: 14px;
                                color: #a0a9b4;

                                &:focus{
                                        outline: 0;
                                        border:1px solid #ccc;
                                }
                        }
                }

                >.blog-single-sidebar-recent{

                        >ul{
                                padding:0;

                                >li{
                                        list-style: none;
                                        margin-bottom: 10px;
                                        position: relative;

                                        > a{
                                                color: #49a7fa;
                                                font-size: 16px;
                                                padding-left: 20px;
                                                display: block;

                                                &:hover{
                                                        text-decoration: none;
                                                        color: #3598DC;
                                                }
                                        }

                                        &:before{
                                                content: "•";
                                        color: #dae0e5;
                                        font-size: 30px; 
                                        position: absolute;
                                        margin-top: -9px;
                                        }
                                }
                        }
                }

                >.blog-single-sidebar-tags{

                        .blog-post-tags{
                                text-align: left;
                                padding:0;
                                margin:20px 0 0 0;

                                >li{
                                        list-style: none;
                                        display: inline-block;
                                        margin:0 5px 20px 0;

                                        > a{
                                                background-color: #f4f6f8;
                                                color: #a0a9b4;
                                                font-size: 11px;
                                                font-weight: 600;
                                                padding: 7px 10px;

                                                &:hover{
                                                        background-color: #3598DC;
                                                        color: #fff;
                                                        text-decoration: none;
                                                }
                                        }

                                        &:last-child{
                                                margin-right: 0;
                                        }
                                }
                        }
                }

                >.blog-single-sidebar-links{

                        >ul{
                                padding: 0;

                                >li{
                                        list-style: none;
                                        border-bottom: 1px solid;
                                        border-color: #f0f1f2;
                                        padding:20px 0;

                                        > a{
                                                color: #49a7fa;
                                                font-size: 16px;

                                                &:hover{
                                                        text-decoration: none;
                                                        color: #3598DC;
                                                }
                                        }

                                        &:first-child{
                                                padding-top:0;
                                        }

                                        &:last-child{
                                                border:none;
                                        }
                                }
                        }
                }

                >.blog-single-sidebar-ui{

                        .ui-margin{
                                margin:0;
                        }

                        .ui-padding{
                                padding:0 5px 5px 0;
                        }

                        img{
                                width:100%;
                        }
                }
        }
}       
// END : BLOG PAGE 2

// MOBILE
@media (max-width:991px){
        .blog-content-1{

                .blog-post-lg{

                        >.blog-img-thumb{
                                height:330px;
                        }
                }

                .blog-post-sm{

                        >.blog-img-thumb{
                                height:170px;
                        }
                }

                .blog-video{

                        >.blog-img-thumb{
                                height:301px;
                                
                                img{
                                        height:auto;
                                        width:100%;
                                }
                        }
                }

        }
}

@media (max-width:480px){
        .blog-content-1{

                .blog-post-lg{

                        >.blog-post-content{

                                >.blog-post-foot{
                                        text-align: left;

                                        >.blog-post-tags{
                                                float:none;
                                        }

                                        >.blog-post-meta{
                                                margin-right: 10px;
                                                margin-top:10px;

                                        }    

                                }
                        }
                }
        }

        .blog-content-2{

                .blog-single-content{

                        >.blog-single-head{

                                >.blog-single-head-title{
                                        margin-bottom: 0px;
                                }

                                >.blog-single-head-date{
                                        float:none;
                                        margin-bottom: 40px;
                                }
                        }
                }
        }
}

// END