style.scss

/*!
Theme Name: Titanic Thematic Child Theme
Theme URI: http://scottnix.com/titanic-child-theme-for-thematic/
Description: A child theme based on the Responsive Base child theme for the Thematic Theme Framework, powered by SASS/Compass.
Author: Scott Nix
Author URI: http://scottnix.com/
Template: thematic
Version: 0.2.0
Tags: thematic, child-theme, responsive, mobile-first, SASS
*/

// ==========================================================================
// load supporting files (compass, variables, mixins)
// ==========================================================================

@import 'scss/base';

// ==========================================================================
// normalize.css v1.0.1 - necolas.github.com/normalize.css/
// ==========================================================================

@import 'scss/normalize';

// better box model - paulirish.com/2012/box-sizing-border-box-ftw/
*,
*:before,
*:after { 
    @include box-sizing(border-box); 
}

// ==========================================================================
// basic styles
// ==========================================================================

body {
    background: $body-color url(images/bg-tile.jpg);
    font: $body-font-defaults;
    color: $text-color;
    text-shadow: 1px 1px 0 #111;
}
input,
textarea {
    padding: .5em;
    font: $body-font-defaults;
    color: $body-color;
}
textarea { 
    resize: vertical; 
}
h1 {
    margin: 0 0 0.5417em;
    font-family: $header-font;
    font-size: 3em;
    line-height: 1.0833em;
    color: $header-color;
    text-shadow: $shadow;
}
h2 {
    margin: 0 0 0.7222em;
    font-family: $header-font;
    font-size: 2.25em;
    line-height: 1.4444em;
    color: $header-color;
    text-shadow: $shadow;
}
h3 {
    margin: 0 0 0.8667em;
    font-family: $header-font;
    font-size: 1.875em;
    line-height: 1.7333em;
    color: $header-color;
    text-shadow: $shadow;
}
h4 {
    margin: 0 0 1.0833em;
    font-family: $header-font;
    font-size: 1.5em;
    line-height: 1.0833em;
    color: $header-color;
    text-shadow: $shadow;
}
h5 {
    margin: 0 0 1.1818em;
    font-family: $header-font;
    font-size: 1.375em;
    line-height: 1.1818em;
    color: $header-color;
    text-shadow: $shadow;
}
h6 {
    margin: 0 0 1.4444em;
    font-family: $header-font;
    font-size: 1.125em;
    line-height: 1.4444em;
    color: $header-color;
    text-shadow: $shadow;
}
a {
    @include transition(color .3s ease-in-out, background-color .3s ease-in-out);
    color: $link-color;
    text-decoration: none;
    &:visited {
        color: $link-color;
    }
    &:hover {
        color: $link-hover;
    }
    &:focus, 
    &:active {
        color: $link-focus;
        outline: 0;
        background: $box-transparency;
    }
}
p,
pre,
form,
select,
address,
embed {
    margin: 0 0 $spacing;
}
ul {
    margin: 0 0 $spacing;
    list-style: disc;
}
ol {
    margin: 0 0 $spacing;
    list-style-type: decimal;
    ol { 
        list-style: upper-alpha;
        ol { 
            list-style: lower-roman;
            ol { 
                list-style: lower-alpha; }
        }
    }
}
ul ul,
ul ol,
ol ul,
ol ol {
    margin-bottom: 0;
}
dl { 
    margin: 0 1em; 
}
dt { 
    font-weight: bold; 
}
dd { 
    margin: 0 0 $spacing; 
}
abbr,
acronym { 
    cursor: help; 
}
ins {
    display: block;
    padding: .5em;
    text-decoration: none;
    background: $menu-background;
}
code {
    padding: 0 .3em;
    font-size: 95%;
    background: $box-transparency;
}
pre code {
    padding: 0;
    background: none;
}
caption { 
    text-align: center; 
}
table {
    margin: 0 0 $spacing;
    border: 1px solid $accents-color;
    border-width: 1px 1px 0;
    text-align: left;
}
tr { 
    border-bottom: 1px solid $accents-color; 
}
th,
td {
    padding: .7em 1.25em;
    vertical-align: top;
}
hr {
    display: block;
    margin: 0 0 $spacing;
    height: 1px;
    border: 0;
    border-top: 1px solid $accents-color;
}
::-moz-selection {
    background: $selection-color;
    color: #f1f1f1;
    text-shadow: none;
}
::selection {
    background: $selection-color;
    color: #f1f1f1;
    text-shadow: none;
}
blockquote {
    margin: 0 1em;
    font-style: italic;
    p {
        padding-left: 1em;
        border-left: 5px solid $accents-color;
    }
    em,
    i,
    cite {
        font-style: normal;
    }
}

// ==========================================================================
// content styles
// ==========================================================================

#header {
    margin: 0 auto $spacing;
    padding: 1em;
    background: $menu-background;
}
#branding {
    @include pie-clearfix;
    position: relative;
    margin: 0 auto;
}
#blog-title {
    float: left;
    margin: 0;
    padding: 0;
    a { 
        color: $text-color;
        &:hover { 
            color: $link-hover; 
        }
    }
}
#blog-description {
    display: none;
    float: left;
    margin: 0;
}
.menu-skip {
    position: absolute;
    top: 0;
    right: 1em;
    a {
        display: block;
        height: 28px;
        width: 28px;
        background: url(images/nav-jump-icon.png);
    }
}
.access, 
.sf-menu { 
    display: none; 
}
 #footer nav {
    ul {
        margin: $spacing 0;
        padding: 0;
        background: $menu-background;
        li {
            position: relative;
            border-bottom: 1px solid #1e1e1e;
            background: url(images/nav-arrow.png) no-repeat 95% 50%;
            a {
                display: block;
                padding: 1em;
                font-size: 110%;
                font-weight: 400;
                text-transform: lowercase;
                color: $menu-link-color;
                &:hover {
                    color: $menu-link-hover;
                }
            }
        }
        ul { 
            display: none; 
        }
    }
    .current-menu-item a { 
        color: $menu-link-hover; 
    }
}
#main {
    position: relative;
    margin: 0 auto;
    padding: 0 1em;
    clear: both;
}
#container { 
    margin: 0 0 $spacing; 
}
#content { }
.page-title {
    @extend h6;
    .meta-nav { 
        font-style: normal; 
    }
}
.hentry {
    margin: 0 0 $spacing;
    padding: 0 0 $spacing;
}
.sticky {
    padding: $spacing;
    background: $transparency;
}
.entry-title {
    a {
        color: $header-color;
        &:hover { 
            color: $link-hover; 
        }
    }
}
.entry-meta {
    margin: 0 0 $spacing;
    font-size: 90%;
    color: $helper-text;
    a {
        color: $helper-link;
        &:hover { 
            color: $link-hover; 
        }
    }
    abbr {
        border: none;
        cursor: text;
    }
}
.entry-utility {
    clear: both;
    font-size: 90%;
    color: $helper-text;
    a {
        color: $helper-link;
        &:hover { 
            color: $link-hover; 
        }
    }
}
.edit-link {
    display: block;
    clear: both;
}
#links-page,
#archives-page {
    list-style: none;
    overflow: hidden;
}
#author-info {
    margin: 0 0 $spacing;
    overflow: hidden;
    .avatar {
        margin: 0 1em 0;
        float: left;
    }
}

// images
// ==========================================================================

@import 'scss/images';

// comments
// ==========================================================================

@import 'scss/comments';

// navigational
// ==========================================================================

.page-link,
.comment-navigation {
    margin: 0 0 $spacing;
    clear: both;
    font-weight: bold;
    word-spacing: 0.5em;
    a {
        padding: 0.4em 0.65em;
        background: $transparency;
        &:hover {
            background-color: darken($transparency, 20%);
        }
    }
    a,
    span { 
        margin-right: 0.5em; 
    }
}
.paginated-comments-links { 
    margin-top: $spacing; 
}
.button,
input[type="submit"] {
    position: relative;
    display: inline-block;
    float: right;
    padding: 7px 10px;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-color: #222222 #222222 #000000;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background-color: #2c2c2c;
    @include background-image(linear-gradient(#333, #222));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        2px 2px 3px rgba(0, 0, 0, 0.3);
    line-height: 18px;
    color: $menu-link-color;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0,0,0, 0.75);
}
.button:hover,
input[type="submit"]:hover {
    top: 2px;
    left: 2px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.075);
}

// asides, sidebars & widget-ready areas
// ==========================================================================

.aside {
    word-wrap: break-word;
    overflow-wrap: break-word;
    ul,
    section ul {
        list-style: none;
        margin-left: 0;
        padding: 0;
        ul {
            margin: 0 0 0 20px;
            li { 
                padding: 1px 0; 
            }
            ul { 
                margin-bottom: 0; 
            }
        }
    }
    img { 
        max-width: 100%; 
    }
    table { 
        border: none; 
    }
    thead,
    tbody {
        border: 1px solid $accents-color;
    }
    th,
    td {
        border-right: 1px solid $accents-color;
        padding: .15em .5em; }
    tfoot {
        tr { 
            border: none; 
        }
        td { 
            border-color: transparent; 
        }
    }
    input {
        width: 100%;
    }
}
.widget_tag_cloud { 
    margin: 0 0 $spacing; 
}
.widget_search .widgettitle { 
    display: none; 
}
#searchsubmit { 
    display: none; 
}
#primary { 
    margin-bottom: $spacing; 
}
.widgettitle {
    @extend h3;
    margin-bottom: 0;
    a {
        color: $header-color;
        &:hover { 
            color: $link-hover; 
        }
    }
}
#content .aside { 
    margin: 0 0 $spacing; 
}
#footer {
    margin-top: $spacing;
    padding: 0;
    clear: both;
}
#subsidiary {
    margin: 0 auto;
    padding: $spacing 1em 0;
    #footer-widget {
        width: 100%;
        margin :0;
        clear: both;
    }
}
#siteinfo {
    margin: 0 auto;
    padding: $spacing 1em;
    clear: both;
}
.footer-aside { 
    margin: 1em; 
}

// overriding css above - specific pages, templates
// ==========================================================================

// page templates
.page-template-template-page-fullwidth-php {
    #container {
        width: 100%;
        padding-right: 0;
        border-right: none;
    }
    #content,
    #comments {
        width: 100%;
    }
}

// attachments
.attachment-jpeg,
.attachment-png {
    #content,
    #container {
        width: 100%;
        margin: 0;
    }
    .main-aside { 
        display: none; 
    }
}

// internet explorer (old IE, 6, 7 and 8 fixes)
// ==========================================================================

@import 'scss/internet-explorer';

// plugins
// ==========================================================================

@import 'scss/plugins';

// helper classes - html5boilerplate.com
// ==========================================================================

@import 'scss/helper-classes';

// media queries
// ==========================================================================

@import 'scss/media-queries';

// print styles - html5boilerplate.com
// ==========================================================================

@media print {
    @import 'scss/print-styles';
    // custom additions to default boilerplate print styles
    .aside,
    .menu,
    .navigation {
        display: none;
    }
}