www/static/css-src/_blog.scss

.blog {

    table, td, th {
        border: 1px solid black;
    }
    .blogHeader {
        color: #b58733;
        font-size: 30pt;
        padding-top: 10px;
        padding-bottom: 30px;
        .rss {
            a {
                font-size: 12pt;
                padding-left: 4px;
                font-weight: lighter;
                color: $brand-primary;
                vertical-align: middle;
            }
        }
    }

    /* landing page */
    .blog-list {
        max-width: 700px;
        ul.posts {
            list-style: none;
            padding-left: 30px;

            li .newBlog {
                background-color: #3992ab;
            }

            header {
                .title, .details {
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
                .adorner {
                    height: 50px;
                    width: 5px;
                    background-color: #f2f2f2;
                    position: absolute;
                    left: 18px;
                }
                .title {
                    font-size: 24px;
                    font-weight: 400;
                    margin: 0px;
                    width: 100%;
                    color: $brand-primary-darker;
                }
                .details {
                    color: #999;
                    font-size: 18px;
                    .date {
                        color: #2f2f2f;
                    }
                    .author {
                    }
                    .comment {
                        float: right;
                        font-size: 15px;
                    }
                }
            }
            section {
                padding-bottom: 100px;
            }
        }
    }

    .social-container{
        max-width: 360px;
        padding-top: 40px;

        .container{
            background-color: #f2f2f2;
            width: 330px;
            height: 868px;

            .header{
                position: relative;
                padding-top: 24px;
                padding-bottom: 20px;

                div{
                    float:left;
                    color: #808080;
                    font-size: 18px;
                    padding-left:2px;
                }

                img{
                    padding-left:18px;
                }

            }

            .feed{
                background-color: white;
                height: 730px;
                padding: 14px;

                ul {
                    list-style-type: none;
                    padding: 0;

                    li{
                        position: relative;

                        img{
                            top: 0px;
                            float: left;
                        }
                        .name{
                            color: black;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            font-weight: bold;
                            font-size: 110%;
                            padding-left: 8px;
                        }
                        .handle{
                            color:gray;
                            font-weight: lighter;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            font-size: 90%;
                            padding-left: 7px;
                            margin-top: -3px;
                        }
                        .date{
                            color: gray;
                            font-weight: bold;
                            float: right;
                        }
                        .content{
                            color: black;
                            padding-top: 4px;
                            padding-left: 1px;
                        }
                    }

                }
            }
            .promo{
                color: gray;
                background-color: white;
                height: 42px;
                padding-top: 10px;
                margin-top: 12px;
                text-align: center;
                font-size: 110%;
            }

        }

    }

    /* blog post page */
    .post {
        header {
            margin-bottom: 20px;
            .title{
                color: #3992ab;
                font-size: 30pt;
            }
            .author, .date{
                font-size: 14pt;
                color: #999;
                padding: 0 4px;
            }
            .date{
                float:right;
                position: relative;
                top:-20pt;
            }
        }
        section > div.content{
            padding: 40px 0;
            color: black;
        }
        footer{
            background-color: #FFF;
            margin: 100px 0;

            .title{
                color: #3992ab;
                font-size: 12pt;
                margin-top: 20px;
            }
            .author, .date{
                font-size: 10pt;
                color: #999;
                padding: 0 2px;
            }
            .content{
                margin-bottom: 20px;
            }
        }
    }
    .disqus{
        margin: 10px 0;
    }

    section.nextprev-posts{
        div{
            .header{
                padding: 10px 0;
            }
            .title{
                color: #3992ab;
                font-size: 14pt;
            }
            span{
                font-size: 9pt;
                color: #999;
                padding: 0 4px;
            }
        }
        .next , .prev{
            padding: 10px 15px;
        }
    }

    section.nextprev-controls{

        div{
            position: fixed;
            top:37%;
            .title{
                color: white;
                font-size: 12pt;
            }
            span{
                font-size: 9pt;
                color: #999;
                padding: 0 2px;
            }
            div{
                position: relative;
                top: 64px;
                left: 20px;
                z-index:10;
                width: 240px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
        }

        .next {
            right: 0px;
            height:90px;
            width: 321px;
            top:calc(37% - 38px);
            img{
                position: fixed;
                right: 0px;
            }
        }
        .prev{
            left:0px;
        }


        @media (max-width: 1800px) {
            .next {
                img{
                    clip: rect(0px, 321px, 89px, 262px);
                    top:37%;
                }
            }
            div{
                .title{
                    display:none;
                }
                span{
                    display:none;
                }
            }
        }
        @media (max-width: 1300px) {
            .next, .prev {
                img{
                    display:none;
                }
            }
        }
    }
}