article{
    box-sizing: border-box;
    background: $box_bg;
    margin-bottom: 20px;
    border: $box_line;
    position: relative;

    .content_container &{
        padding: 20px;

        p{
            padding: 0;
        }
    }

    .index & h1,
    .index & p,
    .index & span{
        padding: 10px;
    }

    img{
        transition: .3s all ease;
    }

    a:hover{
        img{
            opacity: .5;
        }
    }

    .category,
    .tags {
        text-transform: uppercase;

        .index &{
            font-size: .7em;
            opacity: .6;
        }
    }

    .date{
        .index &{
            font-size: .7em;
            opacity: .6;
            position: absolute;
            bottom: 10px;
            left: 5px;
        }
    }

    .post_content{
        .index &{
            padding-bottom: 50px;
        }
    }

    ul,
    ol{
        list-style: circle;
        padding: 0 35px;

        li{
            padding-left: 0px;
        }
    }

    ol{
        list-style: decimal;
    }
}

.wrapper{
    width: 100%;
    border: $box_line;
    height: auto;
    box-sizing: border-box;
    background: $box_bg;
}

.short{
    width: 100%;
    border-bottom: $box_line;

    &:hover{
       background: darken($box_bg, 3%);
    }

    a{
        display: block;
        width: 100%;
        padding: 10px;

        .shortdate{
            font-size: .8em;
            opacity: .8;
            padding-right: 10px;
            margin-right: 10px;
            border-right: $line;
        }
    }
}