RocketFuelLeak/RocketFuelLeakSite

// Place all the styles related to the Posts controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.news-post {
    margin-bottom: 10px;

    &:not(:nth-of-type(1)) {
        margin-top: 50px;
    }

    .news-post-content img {
        @extend .img-responsive-thumbnail-centered;
    }

    a.news-post-author-link img {
        margin-left: 5px;
        margin-right: 3px;
    }

    a.news-post-comments-link, a.news-post-edit-link, a.news-post-delete-link {
        > i {
            color: $text-color;
            margin-left: 5px;
            margin-right: 5px;
        }
    }

    .news-post-social-container {
        //margin-right: auto;
        //margin-left: auto;
        margin-top: 20px;
        //width: 58px;

        .fb-like {
            vertical-align: top;
        }

        .twitter-share-button {
            margin-left: 5px;
            margin-right: 5px;
        }
    }
}

.news-post-title {
    margin-bottom: 5px;
    //font-size: 40px;
}

.news-post-meta {
    margin-bottom: 20px;
    //color: #999;
    @extend .text-muted;
}

$feed-color: #e06622;
$feed-color-hover: darken($feed-color, 10%);

a.feed-link i {
    color: $feed-color;

    &.fa-inverse { color: white; }
}

a.feed-link:hover i {
    color: $feed-color-hover;

    &.fa-inverse { color: darken(white, 10%); }
}

ul#news-archive-list {
    i { color: $text-color; }
    span.badge { margin-left: 10px; }

    > li > a {
        > i.fa-folder { display: inline-block; }
        > i.fa-folder-open { display: none; }

        &.open {
            > i.fa-folder {
                display: none;
            }

            > i.fa-folder-open {
                display: inline-block;
            }
        }
    }
}

.markdown-box-actions > .btn-group:not(:first-child) {
    margin-left: 5px;
}

// Responsive videos
// Credit: https://gist.github.com/jgarber/2302238
.flex-video {
    position: relative;
    padding-top: 25px;
    padding-bottom: 67.5%;
    height: 0;
    margin-bottom: 16px;
    overflow: hidden;
}
 
.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }
 
.flex-video {
    iframe, object, embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

@media only screen and (max-device-width: 800px),
       only screen and (device-width: 1024px) and (device-height: 600px),
       only screen and (width: 1280px) and (orientation: landscape),
       only screen and (device-width: 800px),
       only screen and (max-width: 767px) {
    .flex-video { padding-top: 0; }
}