style.scss

/*!
Theme Name: Responsive Start
Theme URI: http://scottnix.com/
Description: Advanced responsive child theme for the Thematic Theme Framework, built loosely on the Responsive Base child theme.
Author: Scott Nix
Author URI: http://scottnix.com/
Template: thematic
Version: 0.0.1
Tags: thematic, child-theme, responsive, mobile-first
*/

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

@import 'scss/base';

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

*,
*:before,
*:after {
    @include box-sizing(border-box);
}
html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: $background;
    font-family: $body-font;
    font-size: 100%;
    line-height: 1.625;
    color: $body-color;

    @include breakpoint(medium) {
        font-size: 112.5%;
    }
    @include breakpoint(large) {
        font-size: 125%;
    }
}
h1 {
    margin: 0 0 0.5417em;
    font-family: $header-font;
    font-size: 2.25em;
    line-height: 1.0833em;
    color: $header-color;
}
h2 {
    margin: 0 0 0.7222em;
    font-family: $header-font;
    font-size: 1.875em;
    line-height: 1.4444em;
    color: $header-color;
}
h3 {
    margin: 0 0 0.8667em;
    font-family: $header-font;
    font-size: 1.5em;
    line-height: 1.7333em;
    color: $header-color;
}
h4 {
    margin: 0 0 1.0833em;
    font-family: $header-font;
    font-size: 1.375em;
    line-height: 1.0833em;
    color: $header-color;
}
h5 {
    margin: 0 0 1.1818em;
    font-family: $header-font;
    font-size: 1.125em;
    line-height: 1.1818em;
    color: $header-color;
}
h6 {
    margin: 0 0 1.4444em;
    font-family: $header-font;
    font-size: 1em;
    line-height: 1.4444em;
    color: $header-color;
}
a {
    @include transition(color .3s ease-in-out, background-color .3s ease-in-out);
    background: transparent;
    color: $accent-link;
    text-decoration: none;
    &:visited {
        color: $accent-link;
    }
    &:focus {
        color: $accent-focus;
        outline: thin dotted;
    }
    &:active,
    &:hover {
        color: $accent-hover;
        outline: 0;
    }
}
img {
    border: 0;
}
p,
address,
figure,
embed,
.video-container {
    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;
}
b,
strong {
    font-weight: bold;
}
abbr[title],
acronym {
    cursor: help;
    border-bottom: 1px dotted;
}
ins {
    border-bottom: 1px solid $accent-color;
    text-decoration: none;
}
caption {
    text-align: center;
}
blockquote {
    margin: 0 0 $spacing;
    p {
        padding-left: 1em;
        border-left: 5px solid $accent-color;
    }
}
q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
pre,
code,
kbd {
    font-family: monospace, serif;
    font-size: 1em;
}
pre {
    margin: 0 0 $spacing;
    white-space: pre-wrap;
}
code {
    padding: 0 .2em;
    background: $background-secondary;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
hr {
    height: 1px;
    margin: 0 0 $spacing;
    border: 0;
    background: $accent-color;
    color: $accent-color;
}
table {
    margin: 0 0 $spacing;
    border: 1px solid $accent-color;
    border-width: 1px 1px 0;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: left;
}
tr {
    border-bottom: 1px solid $accent-color;
}
th,
td {
    padding: .7em 1.25em;
    vertical-align: top;
}
::-moz-selection {
    background: $selection-background;
    color: $selection-color;
    text-shadow: none;
}
::selection {
    background: $selection-background;
    color: $selection-color;
    text-shadow: none;
}

/* ==========================================================================
   theme fonts
   ========================================================================== */

@import 'scss/fonts';

/* ==========================================================================
   layout structure
   ========================================================================== */

// options - 1c-advanced, 2c-r-sidebar, 2c-l-sidebar, layout (for starting your own)
@import 'scss/layouts/2c-r-sidebar';

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

[id="wrapper"] {
    margin: 0 auto;
}
[id="header"] {}
[id="branding"] {
    margin: 0 auto;
    padding: $spacing 0;
}
[id="blog-title"] {
    @extend h2;
    margin: 0;
    padding: 0;
}
[id="blog-description"] {
    margin: 0;
    font-family: $body-font;
    font-size: 100%;
    font-weight: normal;
    line-height: $spacing;
    text-shadow: none;
}
[id="access"] {}
.menu-button {
    padding: $spacing/2 0;
    &:hover {
        cursor: pointer;
        .icon-bar {
            background: $accent-hover;
        }
    }
    .button {
        float: right;
        margin-top: -$spacing/4;
    }

    @include breakpoint(medium) {
        display: none;
    }
}
.nav-open {
    .icon-bar {}
}
.icon-bar {
    display: block;
    height: 2px;
    width: 18px;
    margin-top: 2px;
    background: $accent-color;

}
.access-nav {
    .js & {
        display: none;
    }
    ul {
        margin: 0;
        padding: 0;
    }

    @include breakpoint(medium) {
        .js & {
            display: block;
        }
    }
}
.sf-menu {
    li {
        position: relative;
        display: block;
        border-bottom: 1px solid $background;
        &:last-child {
            border: none;
        }
        li {
            display: none;
        }
    }
    a {
        @include transition(color .5s ease-in-out, background-color .5s ease-in-out, padding .5s ease-in-out);
        display: block;
        padding: .5em .35em .5em 1em;
        background: $background-secondary;
        &:hover {
            padding-left: 1.5em;
        }
    }
    @include breakpoint(medium) {
        li {
            float: left;
            border-bottom: none;
        }
        a {
            text-decoration: none;
            padding: 0.5em 0.75em;
            background: none;
            &:hover {
                padding: 0.5em 0.75em;
                outline: 0;
            }
        }
    }
}
[id="main"] {}
[id="container"] {}
[id="content"] {}
.page-title {
    @extend h6;
}
.hentry {}
.entry-title {
    @extend h1;
}
.entry-content {}
.entry-utility {
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    a {
        border-bottom: 1px dotted $accent-color;
    }
    [class*="icon-"]:before {
        padding-right: 1em;
    }
}

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

.aside {
    word-wrap: break-word;
    overflow-wrap: break-word;
    ul,
    section {
        list-style: none;
        padding: 0;
        margin: 0 0 $spacing;
        ul {
            li {
                padding: .1em 0;
            }
            ul {
                margin: 0 0 0 $spacing/2;
            }
        }
    }
    img,
    select {
        max-width: 100%;
    }
    [id="search-form"] input {
        width: 100%;
    }
    [id="search-submit"] {
        display: none;
    }
}
[id="content"] .aside {
    margin: 0 0 $spacing;
}
.widgettitle {
    @extend h4;
    padding:.5em 0;
    border-bottom: 1px solid $accent-color;
}
[id="primary"] {
    margin-bottom: $spacing;
}
[id="secondary"] {}
[id="footer"] {}
[id="subsidiary"] {}
[id="first"] {}
[id="secondary"] {}
[id="third"] {}
[id="footer-widget"] {}
[id="siteinfo"] {}

/* images
   ========================================================================== */

@import 'scss/images';

/* navigational elements and buttons
   ========================================================================== */

@import 'scss/navigation-buttons-and-forms';

/* comments
   ========================================================================== */

@import 'scss/comments';

/* specific pages and templates
   ========================================================================== */

@import 'scss/pages-and-templates';

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

@import 'scss/internet-explorer';

/* plugins
   ========================================================================== */

@import 'scss/plugins';

// helper classes - html5boilerplate.com (setup as SASS placeholders)
// ==========================================================================

@import 'scss/helper-classes';

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

@media print {
    @import 'scss/print-styles';

    // custom additions
    [id="access"],
    .aside,
    .navigation {
        display: none;
    }
}