chemiker/e.nigma-2015

/* -------------------------------- Blog */

section {
    background-color: $beige;
}

article,
div#comment_form {
    padding: 0px 0 60px 0;
    color: $darkbeige;
    border-top: 7px solid $darkbeige;
    background-size: 100% auto;
}

article {
    &.attachment {
        text-align: center;
        overflow: hidden;
    }

    &.format-image.image-post-with-thumbnail {
        min-height: 400px;
        background-size: cover;
        background-position: center center;
        box-shadow: inset 0px 0px 30px $darkbeige;

        .post-meta {
            color: $beige;
            text-shadow: $darkbeige 0px 0px 12px;

            a,
            a:visited {
                color: $beige;
            }
        }

        article {
            footer {
                a,
                a:visited {
                    color: #000;
                }
            }
        }
    }

    &.image-post-with-thumbnail {
        h2 {
            a,
            a:visited {
                display: inline-block;
                color: $beige;
                background-color: $post-image-headline-background;
                border-radius: 5px;
                padding: 10px 15px 10px 15px;

            }

            a:hover {
                background-color: $darkbeige;
            }
        }
    }

    &.sticky {
        display: block;
    }

    a[rel=tag]:before {
        content: $tag;
        padding-right: 0.4em;
        font-family: $iconfont;
    }

    a[rel=tag] {
        display: inline-block;
        background-color: $darkbeige;
        color: $beige;
        padding: 5px 8px 5px 8px;
        margin: 3px;
        text-decoration: none;
        font-size: 0.8em;
        border-radius: 8px;
        white-space: nowrap;
        opacity: 0.5;

        &:hover {
            opacity: 1;
        }
    }

    p {
        margin: 1.7em 0 1.7em 0;
        hyphens: auto;
    }

    iframe {
        display: block;
        margin: 0 auto 1em auto;
        border: none;
    }

    div.video-player,
    embed,
    object {
        display: block;
        margin: 1em auto 1em auto;
    }

    img,
    figure,
    embed,
    iframe,
    object,
    video,
    audio {
        max-width: 100%;
    }

    img {
        border-radius: 5px;
        max-width: 100%;
        height: auto;

        &[width], &[height] {
            height: auto;
        }

        margin: {
            top: 1em;
            bottom: -0.7em;
        }

        &.wp-post-image {
            margin-top: 1em;
        }

        &.attachment-post-thumbnail {
            display: block;
            margin: {
                left: auto;
                right: auto;
            }
        }
    }

    iframe.twitter-tweet-rendered {
        width: 100% !important;
    }

    div.videopress-placeholder,
    div.videopress-poster,
    video {
        width: 100% !important;
        height: auto !important;
    }

    li {
        font-size: 0.95em;
        opacity: 0.85;
        margin-left: 1.5em;
    }

    & > div.modifyme > ul,
    & > div.modifyme > dl,
    & > div.modifyme > dd,
    & > div.modifyme > ol {
        margin: 1em 0 1em 0;
    }

    ul,
    dl,
    dd {
        list-style-type: circle;
    }

    ol {
        list-style-type: decimal;
    }

    sup {
        font-size: 0.7em;
    }

    table {
        font-size: 0.8em;
        border: {
            top: 2px solid $darkbeige !important;
            bottom: 2px solid $darkbeige !important;
        }
        margin: 1.5em auto 1.5em auto;
        padding: 0px;
        height: auto;
        width: 90%;

        &.tablepress {
            border-bottom: 2px solid $darkbeige !important;
            margin: 1.5em auto 1.5em auto !important;
            padding: 0px !important;
        }

        &.lines.highlight {
            border: none !important;
        }
    }


    .gist table {
        border-bottom: none;
    }

    thead {
        th {
            background: none !important;
            border-bottom: 1px solid $darkbeige !important;
        }
    }

    tr {
        margin: 0px;

        th, td {
            padding: 3px;
        }

        td {
            border: none !important;
            margin: 0px;
            line-height: 1.3em !important;
        }
    }

    hr {
        margin-bottom: 0px;
    }

    form.post-password-form {
        text-align: center;
    }

    .post-meta {
        display: block;
        text-align: center;
        opacity: 0.7;
        font-size: 15px;
        clear: both;

        &-date,
        &-category {
            margin-right: 1em;
        }

        &-date {
            a,
            a:visited {
                text-decoration: none;
            }
        }

        $metasymbols: (
            date: $calendar,
            category: $category,
            comments: $comments
        );

        @each $name, $icon in $metasymbols {
            &-#{$name}:before {
                padding-right: 0.3em;
                font-family: $iconfont;
                content: $icon;
            }
        }
    }

    @each $level, $fontsize, $margintop in $headings {
        #{$level} a,
        #{$level} a:visited {
            text-decoration: none;
            color: #333;
        }

        #{$level} {
            text: {
                align: center;
            }
            font: #{$fontsize}/1.4 $condensed {
            }
            margin-top: #{$margintop};
        }

    }

    div.tags {
        margin-top: 5em;
    }

    div.single-page h2 {
        font-size: 3em;
    }

    ol.wp-block-latest-comments {
        background-color: $darkbeige;
        color: $beige;

        article {
            color: $beige;
        }
    }
}

div.modifyme {
    overflow: hidden;
}

ol.footnotes {
    font-size: 0.8em;
    margin-bottom: 2em;

    li {
        color: $navigationbackground;
        margin-left: 1.5em;

         p {
            margin: 0.65em 0 0.65em 0;
            line-height: 1.5em;

            a,
            a:visited {
                color: $navigationbackground;
            }
        }
    }
}

hr.footnotes {
    margin-bottom: 1.5em;
    background: $navigationbackground;
    width: 5em;
}

a.more-link,
a.more-link:visited {
    background-color: $darkbeige;
    border-color: $beige;
    color: $beige;
    margin: 2em 0;
    padding: {
        left: 2em;
        right: 2em;
    }
    text: {
        align: center;
        transform: capitalize;
        decoration: none;
    }
    display: inline-block;
}

a.more-link:hover {
    color: $darkbeige;
    border-color: $darkbeige;
    background-color: transparent;
}

span.category {
    margin: 0 auto 0 auto;
    display: block;
    width: 65px;
    height: 65px;
    position: relative;
    top: -35px;
    color: $beige;
    border-radius: 35px;
    background-color: $darkbeige;
    text-align: center;
    font: 1.5em/65px $iconfont, sans-serif, sans;
}

.link_arrow {
    opacity: 0.6;
    font-family: $arrow;
    margin-left: 0.3em;
}

span.post-navigation {
    a,
    a:visited {
        display: block;
        height: 150px;
        width: 60px;
        line-height: 130px;
        position: fixed;
        top: 50%;
        font-size: 4em;
        text: {
            align: center;
            decoration: none;
        }
        color: $beige;
        background-color: $navigationbackground;
    }

    @media(max-width:$textwidth+170px) {
        a,
        a:visited {
            display: none;
        }
    }

    a:visited:hover,
    a:hover,
    a:focus {
        background-color: $blockquotecolor;
    }

    a:focus {
        border: 3px solid #333;
    }

    &.next-post a,
    &.next-post a:visited {
        padding-left: 15px;
        right: 0;
        border-radius: 75px 0 0 75px;
        border-right-width: 0px;
    }

    &.previous-post a,
    &.previous-post a:visited {
        padding-right: 15px;
        left: 0;
        border-radius: 0 75px 75px 0;
        border-left-width: 0px;
    }
}