neverstopbuilding/dropblog

// HEADER SETTINGS
$header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$header-font-weight: 200;
$header-font-color: #222;
$primary-color: #5B5BE0;

// PARAGRAPH SETTINGS
$paragraph-font-weight: 200;
$paragraph-font-size: 1.2rem;
$paragraph-line-height: 1.5;
$paragraph-margin-bottom: 1.5rem;

// CODE SETTINGS
$code-color: inherit;
$code-font-weight: inherit;

// QUOTE SETTINGS
$blockquote-cite-font-color: lighten($header-font-color, 40%);

// TOP BAR SETTINGS
$topbar-bg-color: rgba(0,0,0,.85);
$topbar-title-weight: 200;
$topbar-dropdown-bg: none;
$topbar-dropdown-link-bg: none;
$topbar-link-color: #999;
$topbar-link-weight: 200;

// OTHER SETTINGS
$readable-font-family: "Merriweather", sans-serif;
@import "highlights";
@import "foundation";
@import "font-awesome";
@import "compass/css3/transition";
@import "compass/css3/background-size";
@import "compass/css3/text-shadow";

$dark-red: #440000;
$dark-blue: #000022;

p {
    text-rendering: optimizeLegibility;
}

@mixin full-width-centered {
    @extend .large-12;
    @extend .columns;
    @extend .text-center;
}

@mixin half-width-centered {
    @extend .large-6;
    @extend .small-12;
    @extend .columns;
    @extend .text-center;
}

.full-width-centered {
    @include full-width-centered;
}

.half-width-centered {
    @include half-width-centered;
    padding-right: 1.5em;
    padding-left: 1.5em;
}

.pad-2-bottom {
    padding-bottom: 2em;
}

.pad-1-bottom {
    padding-bottom: 1em;
}

.big-top-padding {
    padding-top: 5em;
}

// Modifications of Top Bar
.top-bar-section li:not(.has-form) a:not(.button) {
    background: none;
    text-align: center;
    @include single-transition(all 0.5s ease 0s);
    &:hover {
        background: rgba(0, 0, 0, 0.85);
        color: #ffffff;
    }
}

.top-bar.expanded {
    margin-bottom: 48px;
    background-color: #ccc;
    ul.title-area {
        background-color: rgba(0, 0, 0, 0.85);
    }
    .top-bar-section ul li {
        background-color: rgba(0, 0, 0, 0.85);
    }
}

a.home-icon i {
    position: relative;
    top: 4px;
}

.top-bar .toggle-topbar{
    top: 7%;
    left: 46%;
}

nav:not(.expanded) {
.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {
    display: table-cell;
    }
}

.no-overflow{
    overflow-x: hidden;
}

.intro {
    background-color: $dark-blue;
    padding-top: 2em;
    padding-bottom: 2em;
    margin-bottom: 0em;
    p, h1, h2, h3, h4, h5, h6 {
        font-weight: 100;
        color: #ddd;
    }
    h2 {
        font-size: 3em;
        line-height: 1.2em;
        letter-spacing: 5px;
    }
    p {

        font-size: 1.5em;
        line-height: 1.6em;
        letter-spacing: 2px;
    }
}

.about {
    background-color: #fff;
    padding-top: 3em;
    ul li img {
        max-height: 300px;
    }
}

.content-preview {
    padding-top: 3em;
}

section.page-body {
    padding-top: 3em;
    padding-bottom: 3em;
    padding-left: .5em;
    padding-right: .5em;
}

header.page{
    height: 20em;
    @include background-size(cover);
    margin-bottom: -3em;
    position: relative;
    top: -3em;
    z-index: -100;
    & > .row {
        position: relative;
        height: 20em;
        & > .columns {
            position: absolute;
            bottom: 2em;
            padding-bottom: 0em;
            h1 {
                font-size: 3em;
                font-weight: 200;
                color: #ffffff;
                letter-spacing: 3px;
                @include text-shadow(0px 0px 25px black, 0px 0px 8px black);
                img {
                    display: inline-block;
                    vertical-align: middle;
                    position: relative;
                    bottom: -6.2em;
                    height: 16em;
                }
            }
        }
    }
}

.content-footer {
    padding-bottom: 3em;
}

.content-header {
    padding-bottom: 3em;
}

.by-line {
    color: #BBB;
    font-style: italic;
    font-weight: 200;
    font-size: 1.1em;
}

.content {
    text-align: center;
    padding-left: 2em;
    padding-right: 2em;
    pre, code {
        text-align: left;
    }
    p{
        text-align: left;
        font-family: $readable-font-family;
        font-weight: 300;
        font-size: 1.3em;
        line-height: 1.8em;
    }
    li {
        font-family: $readable-font-family;
        font-weight: 300;
        text-align: left;
    }
    ul {
        text-align: left;
        list-style: square;
    }
    h1, h2, h3, h4, h5, h6 {
        margin-top: 1.8em;
        margin-bottom: .5em;
    }
    .picutre {
        text-align: center;
    }
}

.site-footer {
    padding-top: 1em;
    small {
        padding-left: 1em;
        padding-right: 1em;
        font-weight: 200;
        font-size: 80%;
    }
}

a.social-link {
    color: #444;
    @include single-transition(all 0.5s ease 0s);
    &:hover {
        color: #000;
    }
}

//Summary
.document-summary {
    margin-top: 1em;
    & > .row {
        @include background-size(cover);
        position: relative;
        height: 27em;
        font-size: 1.2em;
        @media #{$small} {
            height: inherit;
            padding-top: 7em;
            padding-bottom: 1em;
            border: 1px solid #ddd;
        }
        & > .columns {
            background-color: rgba(0, 0, 0, 0.9);
            position: absolute;
            text-align: center;
            bottom: 0em;
            @media #{$small} {
                position: inherit;
                text-align: left;
            }
            a {
            color: #ccc;
            @include single-transition(all 0.5s ease 0s);
            &:hover {
                color: #fff;
                }
            }
            h3 {
                font-weight: 100;
            }
            .info {
                color: #777777;
                font-size: .8em;
                font-weight: 200;
                a {
                    font-weight: 200;
                    font-size: inherit;
                    color: #555;
                }
            }
            .summary {
                color: #fff;
                font-size: .8em;
                font-family: $readable-font-family;
                a {
                    font-size: .8em;
                }

            }
        }
    }
}

.interest-summary {
        margin-top: 1em;
    & > .row {
        @include background-size(cover);
        position: relative;
        font-size: 1.2em;
        @media #{$small} {
            height: inherit;
            padding-top: 1em;
            padding-bottom: 1em;
        }
        & > .columns {
            background-color: rgba(0, 0, 0, 0.9);
            position: absolute;
            text-align: center;
            bottom: 0em;
            padding-top: 2em;
            padding-bottom: 2em;
            @media #{$small} {
                position: inherit;
                text-align: left;
            }
            a {
            color: #ccc;
            @include single-transition(all 0.5s ease 0s);
            &:hover {
                color: #fff;
                }
            }
            h3 {
                font-weight: 100;
            }
        }
    }
}