wordpress-starter 0.1

data/stylesheets/wordpress/_responsive.scss

@@ -0,0 +1,231 @@
+@media (max-width: 960px) {
+  .nav-menu {
+    position: fixed;
+    float: none;
+    margin: 0;
+    padding: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    a.mobile_handle {
+      display: block;
+      padding: 10px;
+      font-size: $fs-h5;
+      background: rgba($brand-color-dark, .6);
+      text-align: center;
+      letter-spacing: .03em;
+      text-transform: uppercase;
+      font-weight: 600;
+      color: $function-color-light;
+    }
+    ul {
+      display: none;
+      margin-bottom: 0;
+      li {
+        display: block;
+        position: relative;
+        float: none;
+        padding: 0;
+        background: $function-color;
+        border-top: 1px solid $function-color-darker;
+      }
+      a {
+        display: block;
+        position: relative;
+        float: none;
+        padding: 15px 10px;
+        clear: both;
+      }
+      ul {
+        display: none;
+        position: relative;
+        width: 100%;
+        top: 0;
+        left: 0;
+        margin: 0;
+        padding: 0;
+        background: none;
+        border-bottom: 2px solid $function-color-darker;
+        a {
+          color: $alert-color;
+          padding: 15px 10px 15px 25px;
+        }
+        ul {
+          top: 0;
+          left: 0;
+          a {
+            padding: 15px 10px 15px 45px;
+          }
+        }
+      }
+    }
+    .sub_nav {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 10%;
+      padding: 15px 20px;
+      margin: 0;
+      cursor: pointer;
+    }
+    .arrow_up {
+      float: right;
+      width: 0;
+      height: 0;
+      padding: 0;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid $alert-color-darker;
+    }
+    .arrow_down {
+      float: right;
+      width: 0;
+      height: 0;
+      padding: 0;
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid $alert-color-darker;
+    }
+  }
+}
+
+@include at-breakpoint($break) {
+  .nav-menu {
+    a.mobile_handle {
+      display: none;
+    }
+    a {
+      color: $alert-color-darker;
+      &:hover {
+        color: $alert-color;
+        text-decoration: underline;
+      }
+    }
+    ul {
+      display: block;
+      ul {
+        margin-left: $grid-padding;
+        ul {
+          margin-left: $grid-padding;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Responsive WordPress Core Theme Styles
+ * http://jeffsebring.com/responsive-wordpress-images/
+--------------------------------------------------- */
+
+img {
+  max-width: 100%;
+  height: auto;
+  &[class*="align"], &[class*="wp-image-"] {
+    max-width: 100%;
+    height: auto;
+  }
+  &.wp-smiley {
+    border: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    padding: 0;
+  }
+  &.alignright {
+    margin-left: 1em 0 1em 1em;
+  }
+  &.alignleft {
+    margin: 1em 1em 1em 0;
+  }
+  &.aligncenter {
+    display: block;
+    margin: 1em auto;
+  }
+  &#wpstats {
+    display: block;
+    margin: 0 auto;
+  }
+  &[class*="align"], &[class*="wp-image-"] {
+    border: none;
+  }
+}
+
+.gallery .gallery-icon img {
+  border: none;
+}
+
+.wp-caption {
+  margin-bottom: 1em;
+  margin-left: 0;
+  max-width: 96%;
+  text-align: center;
+  img {
+    display: block;
+    margin: 0 auto;
+  }
+}
+
+.wp-caption-text {
+  position: relative;
+  font-size: .8em;
+}
+
+.gallery {
+  margin: 0 auto;
+  .gallery-item {
+    margin: 0;
+    float: left;
+    text-align: center;
+    width: 33%;
+  }
+  a img {
+    border: none;
+  }
+}
+
+.gallery-columns-4 .gallery-item {
+  width: 25%;
+  img {
+    width: 100%;
+    height: auto;
+  }
+}
+
+// 16/9 embed
+.entry-content-asset {
+  @include responsive-embed(16/9);
+}
+
+@media only screen and (max-width: 800px) {
+  embed, object {
+    max-width: 100%;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  // 4/3 embed
+  .entry-content-asset {
+    @include responsive-embed(4/3);
+  }
+  .gallery-columns-3 .gallery-item {
+    width: 33.33%;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  // default 1 ratio for a square embed
+  .entry-content-asset {
+    @include responsive-embed;
+  }
+  .gallery-columns-2 .gallery-item {
+    width: 50%;
+    img {
+      width: 100%;
+      height: auto;
+    }
+  }
+}

data/stylesheets/wordpress/_theme.scss

@@ -0,0 +1,83 @@
+html, body {
+  background-color: rgba( tint($brand-color-lighter, 90%), .5);
+  color: $function-color-darker;
+}
+
+a {
+  color: $alert-color-darker;
+  text-decoration: none;
+  &:hover {
+    color: $alert-color-light;
+    text-decoration: underline;
+  }
+}
+
+:-moz-placeholder {
+  color: $function-color;
+  font-weight: 200;
+}
+
+::-webkit-input-placeholder {
+  color: $function-color;
+  font-weight: 200;
+  line-height: 14px;
+}
+
+::-webkit-search-decoration, ::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.header h1 {
+  text-align: center;
+  a {
+    @extend .heading-font;
+    @include adjust-font-size-to(70px);
+    @include rhythm(2, 4, 2, 4);
+    font-weight: 900;
+    @include text-shadow(1px, 1px, 1px, $white);
+    color: $brand-color;
+    &:hover {
+      color: $brand-color-lighter;
+      text-decoration: none;
+    }
+  }
+}
+
+.header h2 {
+  color: $brand-color-dark;
+  @include adjust-font-size-to(32px);
+  @include rhythm(1, 0, 1, 0);
+  @include text-shadow(1px, 1px, 1px, $white);
+}
+
+.content {
+  @extend .clearfix;
+  background: $white;
+  border: 1px solid rgba(tint($function-color-darker, 1%), .2);
+  @extend .round-corners;
+  @include box-shadow(darken($brand-color-darker, 30%), 0, 2px, 15px);
+  .nav-menu {
+    li {
+      a {
+        color: $alert-color;
+        .active {
+          color: $alert-color-dark;
+        }
+      }
+    }
+  }
+  @include background-clip(padding-box);
+}
+
+.footer {
+  @include adjust-font-size-to(12px);
+  color: $brand-color-darker;
+  a {
+    color: desaturate(darken($brand-color-darker, 60), 28);
+    text-decoration: underline;
+    &:hover {
+      color: desaturate(darken($brand-color-darker, 10), 28);
+      text-decoration: none;
+    }
+  }
+}

data/stylesheets/wordpress/_typography.scss

@@ -0,0 +1,135 @@
+.sans-font {
+  font-family: $sans-serif;
+}
+
+.serif-font {
+  font-family: $serif;
+}
+
+.fixed-font {
+  font-family: $monospace;
+}
+
+.heading-font {
+  @extend .sans-font;
+  font-style: normal;
+  font-weight: 400;
+}
+
+strong {
+  font-weight: 600;
+}
+
+em {
+  font-style: italic;
+}
+
+// Establish Vertical rhythm.
+@include establish-baseline;
+
+html {
+  // Override the default line height to allow for smaller baseline increments.
+  @include adjust-leading-to(2);
+}
+
+body {
+  @extend .sans-font;
+}
+
+p {
+  @include adjust-font-size-to(18px);
+  &:first-child {
+    @include leader;
+  }
+  @include trailer;
+}
+
+#{headings(1, 6)} {
+  @extend .heading-font;
+  @include rhythm(0, 0, 1, 0);
+}
+
+h6 {
+  @include adjust-font-size-to($fs-h6);
+  letter-spacing: .03em;
+  text-transform: uppercase;
+}
+
+h5 {
+  @include adjust-font-size-to($fs-h5);
+}
+
+h4, .author-description h2, h2.comments-title, .entry-header h2, h3#reply-title {
+  @include adjust-font-size-to($fs-h4);
+}
+
+h3 {
+  @include adjust-font-size-to($fs-h3);
+}
+
+h2 {
+  @include adjust-font-size-to($fs-h2);
+}
+
+.entry-title {
+  @include adjust-font-size-to($fs-h1);
+}
+
+h1.archive-title {
+  @include adjust-font-size-to($fs-h1);
+  font-weight: 400;
+}
+
+dl, ul, ol {
+  @include trailer;
+}
+
+blockquote {
+  @include apply-side-rhythm-border(left, 2px, 1);
+  quotes: "\201C""\201D""\2018""\2019";
+  &:before {
+    color: $function-color-dark;
+    content: open-quote;
+    @include adjust-font-size-to($fs-h1);
+  }
+  p {
+    display: inline;
+    cite {
+      @include adjust-font-size-to(13px);
+    }
+  }
+}
+
+.nav-menu {
+  li {
+    a {
+      @include adjust-font-size-to(18px);
+    }
+  }
+}
+
+.secondary {
+  .widget-container {
+    h3 {
+      @include adjust-font-size-to(24px);
+      @include leader;
+    }
+    h4 {
+      @include adjust-font-size-to(22px);
+    }
+    a {
+      @include adjust-font-size-to(16px);
+    }
+    @include trailer(2);
+  }
+}
+
+.main {
+  ul {
+    list-style: inside disc;
+  }
+}
+
+ol {
+  list-style: inside decimal;
+}