OwlCyberSecurity - MANAGER

Edit File: _post.scss

/*----------------------------------------*\
*   $SINGLE_STYLING
\*----------------------------------------*/

/**
 * Bigger Font Size for first paragraph on single post (only)
 */

.single-post {

.page-side {
        @include rem(padding-top, 3*$base-spacing-unit);
    }

.entry__content {
        & > p:first-of-type  {
            @include rem(font-size, 22px);
        }
    }
    .entry__meta {
        @include rem(margin-top, 2*$base-spacing-unit);
        @include rem(margin-bottom, $base-spacing-unit)
    }
 }

@include media(from lap) {
    .single-post{
        //  blockquote{

//     &:before{
        //         @include rem(margin-left, -3 * $base-spacing-unit);
        //     }
        // }

// .pixcode--testimonial{
        //     @include rem(margin-left, -3 * $base-spacing-unit);
        //     @include rem(padding-left, 3 * $base-spacing-unit);
        // }

.entry__title{
            @include rem(margin-left, -10 * $base-spacing-unit);
            @include rem(padding-left, 10 * $base-spacing-unit);
        }
    }
}

// @include media(to desk) {
//     .single-post blockquote:before{
//         @include rem(margin-right, $base-spacing-unit);
//     }
// }

// @include media(from desk) {
//     .single-post blockquote:before{
//         @include rem(margin-left, -3 * $base-spacing-unit);
//     }
// }

/**
 * Video header
 */
.video-wrap{
    text-align: center;
}

/**
 * Removing width and margin for gallery images/items
 * Adding a space between elements
 */

.gallery-item{

&:first-child{
        margin-left: 0;
    }

a{
        display: block;
    }

img{
        border: 0 !important;
    }
}

.entry__title{
    margin-top: 0;
    color: black;
    font-weight: bold;

a {
        text-decoration: none;
    }
}

.entry__content{
    .gallery{
        margin: 0 -1% !important;
    }

.gallery-item{
        padding: 0 1%;
    }
}

.single-format-gallery .featured-image{
    background-color: #000000;
}

// /*----------------------------------------*\
//     $PAGE
// \*----------------------------------------*/
// .page
// blockquote:not(.pixcode--testimonial){
//     &:before{
//         margin-left: 0;
//         @include rem(margin-right, $half-spacing-unit);
//     }
// }

/*----------------------------------------*\
*   $SINGLE QUOTE TEMPLATE
\*----------------------------------------*/

.header-quote-content{
    background: black;
    color: white;

blockquote{
        font-family: "Josefin Slab", serif;
        @include font-size(48px);
        font-weight: 600;
        margin-top: 0;
        margin-bottom: 0;

.testimonial_author{
            @include rem(margin-top, 3 * $half-spacing-unit);
        }

a{
                display: block;
                text-decoration: none;
            }

.author_name{
                @include font-size(16px);
                font-weight: bold;
                text-transform: uppercase;
                color: white;
            }

.author_description{
                font-family: "Crimson Text", serif;
                @include font-size(16px);
                font-style: italic;
                color: $gray;

&:before{
                    content: "-";
                    @include rem(margin-right, 5px);
                }
            }

.author_name, .author_description{
                display: block;
                text-align: right;
            }
    }
}

@include media(to hand) {
    .header-quote-content blockquote{
        @include rem(padding, $base-spacing-unit);

&:before{
            float: none;
            @include font-size(120px);
            @include rem(margin-bottom, -1.5 * $base-spacing-unit);
        }  
    }
}

@include media(from hand) {
    .header-quote-content blockquote{
        @include rem(padding, (7*$base-spacing-unit) (5*$base-spacing-unit) (5*$base-spacing-unit));

&:before{
            @include font-size(155px);
            @include rem(margin-top, -2 * $base-spacing-unit);
            @include rem(margin-left, -3 * $base-spacing-unit);
        }

.testimonial-author{
            @include rem(margin-right, -2 * $base-spacing-unit);            
        }
    }
}

@include media(from lap) {
    .header-quote-content blockquote{
        &:before{
            @include rem(margin-top, -7 * $half-spacing-unit);
        }    
    }
}

/*----------------------------------------*\
*   $HEADER META
\*----------------------------------------*/

@include media(to lap) {
    .entry-header__meta{
        @include rem(margin-top, $half-spacing-unit);
    }
}

/**
 * Article meta date styling
 *
    <div class="article-timestamp">
        <span class="article-timestamp__date">13</span>
        <div class="article-timestamp__right-box">
            <span class="article-timestamp__month">aug</span>
            <span class="article-timestamp__year">2013</span>
        </div>
    </div>
 */

.article-timestamp{
    // @extend .cf;
    font-family: "Josefin Slab", serif;
    text-transform: uppercase;
    @include font-size(36px);
    @include rem(margin-top, $base-spacing-unit);
}

.article-timestamp--single{
    @include font-size(48px);
    
    .article-timestamp__date{
        color: $accent-color;
        font-weight: 400;

&:after {
            font-weight: 300;
        }
    }

.article-timestamp__right-box {
        line-height: 0.9;
        top: 0.65em;
    }

.lt-ie9 & {
        @include rem(margin-top, 3*$half-spacing-unit);

.article-timestamp__right-box {
            top: 0.2em;
        }
    }

@include media(from 1600px) {
        float: left;
        @include rem(margin, 26px 0 0 -5 * $base-spacing-unit);
    }

@include media(from 1750px) {
        @include rem(margin, 26px 0 0 -8 * $base-spacing-unit);
    }
}

.article-timestamp__date{
        display: block;
        float: left;
        font-weight: 300;
        color: $dark;

&:after{
            content: "/";
            font-size: 0.9em;
            color: $dark;
            padding-left: 0.1em;
        }
    }

.article-timestamp__right-box{
        display: block;
        float: left;
        font-size: 0.39em;
        position: relative;
        top: 0.35em;
        left: 0.3em;
    }

.article-timestamp__month,
        .article-timestamp__year{
            display: block;
        }

/**
 * Article likes box VERTICAL positioning
 */

@include media(from lap) {

.likes-box--article{
        float: left;
        // @include rem(margin-left, -6 * $base-spacing-unit);   
        
        .like-link{
            display: block;
        }

.likes-text{
            top:5px;
            margin:0;
            
            &:after {
                left:-13px;
            }
        }         
    }   
}

/**
 * Horizontal aligning the entry-header meta elements in mobile view
 * 
 */
@include media(to 1599px) {
    .entry-header__meta{
        display: block;
        width:100%;
        @include rem(margin-top, $base-spacing-unit);

//Clearfix
        &:after{
            content:"";
            display:table;
            clear:both;
        }
    }

.likes-box--article{
        float:right;

.like-link {
            float:right;
        }

.likes-text{
            margin-right:8px;
            margin-top:2px;
            @include rem(line-height, 2*$base-spacing-unit);
            &:after {
                left:auto;
                right:0;
                text-align:right;
            }
        }
    }
}

@include media(to hand) {
    .article-timestamp {
        margin-top:0;
    }
}

/*----------------------------------------*\
*   $FOOTER META
\*----------------------------------------*/
/**
 * Entry-meta styling. Categories, tags, social icons
 */

.entry__meta--social {
    @include rem(margin-bottom, 2 * $base-spacing-unit);
}

.entry__meta--project {
    @include rem(margin-bottom, $base-spacing-unit);
}

@include media(to hand) {
    .entry__meta-box{
        float: none;
        display: block;
        @include rem(margin-bottom, $half-spacing-unit);
    }
}

@include media(from hand) {
    .entry__meta-box{
        float: left;
        @include rem(margin-right, $base-spacing-unit);        
    }
}

.meta-box--categories, .meta-box--tags{
    a:after{
        content: ",";
    }

a:last-child{
        &:after{
            content: none;
        }
    }
}

/*----------------------------------------*\
    $POST PASSWORD
\*----------------------------------------*/
.post-password-submit{
    @include rem(padding, 11px 0);
    line-height: normal !important;
}