nesta-contentfocus-extensions 0.0.1 → 0.0.2

data/assets/stylesheets/contentfocus/_forms.scss

@@ -0,0 +1,110 @@
+@import "animations";
+@import "bitters/forms";
+@import "bitters/buttons";
+
+form {
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  font-size: 85%;
+  margin: $base-spacing 0;
+
+  .input {
+    display: block;
+    clear: both;
+    width: 100%;
+    text-align: left;
+
+    label {
+      width: 45%;
+      display: inline-block;
+      text-align: right;
+      vertical-align: middle;
+      margin: 0 $base-spacing/2 0 0;
+    }
+
+    input[type=text] {
+      padding: .5em .6em;
+      margin: 0;
+      display: inline-block;
+      vertical-align: middle;
+      width: 50%;
+    }
+
+    &.checkbox {
+      label {
+        width: auto;
+        text-align: left;
+      }
+    }
+
+    body.bare & {
+      width: 100%;
+      font-size: 14px;
+
+     label {
+     }
+     input[type=text] {
+     }
+    }
+  }
+
+  .input-group {
+    display: inline-block;
+  }
+  input[type="checkbox"] {
+    margin-left: 45%;
+  }
+  .actions {
+    body.bare & {
+      padding-left: $base-spacing/2;
+    }
+  }
+  .actions {
+    text-align: left;
+    margin-top: $base-spacing/2;
+    margin-left: 45%;
+    padding-left: $base-spacing/2;
+
+    button.save {
+      background: $action-color;
+      &:focus, &:hover, &:active {
+        outline: none;
+        color: lighten($action-color, 40%);
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 5px lighten($action-color, 10%);
+      }
+      &:active {
+        background: darken($action-color, 10%);
+        cursor:progress;
+      }
+    }
+  }
+}
+
+button {
+  span.spinner {
+    @include transition(opacity 0.15s, width 0.15s, margin 0.15s);
+    font-family: FontAwesome;
+    font-size: 14px;
+    display: inline-block;
+    width: 0;
+    opacity: 0;
+
+    &:after {
+      @include animation(spin 2.0s linear infinite);
+      content: "\f1ce";
+      display: none;
+    }
+  }
+
+  &:active, &.active {
+    span.spinner {
+      margin: 0 5px 0 0;
+      width: 14px;
+      opacity: 1;
+      &:after {
+        display: inline;
+      }
+    }
+  }
+}

data/assets/stylesheets/contentfocus/_geometric_typography.scss

@@ -0,0 +1,104 @@
+article.type-system-geometric {
+  $sans-serif: 'Questrial', sans-serif;
+  $serif: 'Sanchez', serif;
+
+  @include clearfix;
+  text-align: left;
+
+  .type {
+    border-bottom: 1px solid;
+    display: inline-block;
+    font-family: $sans-serif;
+    font-size: .7em;
+    font-weight: 800;
+    margin-bottom: 2em;
+    padding: .3em 0;
+    text-align: left;
+    text-transform: uppercase;
+  }
+
+  h1 {
+    font-family: $serif;
+    font-size: 1.8em;
+    font-weight: 700;
+    margin-bottom: .5em;
+
+    @include media($medium-screen) {
+      font-size: 2.6em;
+    }
+  }
+
+  h2 {
+    font-family: $serif;
+    font-style: italic;
+    font-size: 1.2em;
+    font-weight: 400;
+    line-height: 1.4em;
+    margin-bottom: 1.1em;
+
+    @include media($medium-screen) {
+      font-size: 1.3em;
+    }
+  }
+
+  code {
+    white-space: nowrap;
+    background: #F7F7F7;
+    border: 1px solid #E0E0E0;
+    border-radius: $base-border-radius * 1.5;
+    padding: .1em .4em;
+    font-size: .7em;
+    font-style: normal;
+  }
+
+  h3 {
+    font-family: $serif;
+    font-size: 1.4em;
+    font-weight: 400;
+    line-height: 1.3em;
+    margin-bottom: .4em;
+  }
+
+  p.date {
+    color: transparentize($base-font-color, .6);
+    font-family: $serif;
+    font-style: italic;
+    font-size: .9em;
+    margin-bottom: .3em;
+  }
+
+  p {
+    font-family: $sans-serif;
+    line-height: 1.5em;
+    font-size: 1.05em;
+    margin-bottom: 1.5em;
+  }
+
+  a.read-more {
+    display: inline-block;
+    font-family: $sans-serif;
+    font-weight: 700;
+    font-size: .8em;
+    text-transform: uppercase;
+    margin-left: .2em;
+    position: relative;
+
+    span {
+      font-family: $sans-serif;
+      font-style: normal;
+      position: absolute;
+      font-size: 1.5em;
+      top: -1px;
+      right: -12px;
+    }
+  }
+
+  hr {
+    width: 3em;
+  }
+
+  p.author {
+    font-family: $sans-serif;
+  }
+}
+

data/assets/stylesheets/contentfocus/_hero.scss

@@ -0,0 +1,108 @@
+@import "bitters/extends/button";
+
+.hero {
+  $base-border-radius: 3px !default;
+  $action-color: #477DCA !default;
+  $large-screen: em(860) !default;
+  $hero-background-color: $base-background-color !default;
+  $hero-color: $base-font-color !default;
+  $gradient-angle: 10deg !default;
+
+  @if variable-exists(hero-image) {
+    @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
+    background-size: auto,auto,100% 1000px,100% 1000px;
+  } @else if variable-exists(hero-background-top) and variable-exists(hero-background-bottom) {
+    @include background(linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
+    background-size: auto,auto,100% 1000px,100% 1000px;
+  } @else {
+    background-color: $hero-background-color;
+  }
+  background-position: top;
+  background-repeat: no-repeat;
+  background-size: cover;
+  padding-bottom: 4em;
+  color: $hero-color;
+  display: table;
+  width: 100%;
+  position: relative;
+  height: 28em;
+  height: 95vh;
+  padding: $gutter;
+  margin-bottom: 3em;
+
+  .hero-logo img {
+    height: 3em;
+    margin-bottom: 2.5em;
+  }
+
+  .hero-inner {
+    @include outer-container;
+    @include clearfix;
+    color: $hero-color;
+    margin: auto;
+    padding: 3em;
+    text-align: center;
+    position: relative;
+    width: 100%;
+    display: table-cell;
+    vertical-align: middle;
+
+    .hero-copy p, .hero-copy h1 {
+      text-align: center;
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+    .hero-copy p {
+      font-family: $base-font-family;
+      font-weight: normal;
+    }
+
+    .hero-copy {
+      text-align: center;
+
+      h1 {
+        font-size: 1.6em;
+        margin-bottom: .5em;
+        @include media($large-screen) {
+          font-size: 1.8em;
+        }
+      }
+
+      p {
+        margin: 0 auto 3em auto;
+        font-weight: 200;
+        line-height: 1.4em;
+        @include media($large-screen) {
+          font-size: 1.1em;
+        }
+      }
+    }
+    a.call-to-action {
+      @extend %button;
+      font-family: $heading-font-family;
+      font-weight: 700;
+      letter-spacing: $heading-letter-spacing;
+      @if variable-exists(hero-background-top) {
+        color: $hero-background-top;
+      } @else {
+        color: $hero-background-color;
+      }
+      background: $action-color;
+      padding: 0.75em 1em;
+      border-radius: 5px;
+      margin: 0.75em 0;
+      display: inline-block;
+      text-decoration: none;
+      &:focus, &:hover, &:active {
+        outline: none;
+        color: lighten($action-color, 40%);
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 5px lighten($action-color, 10%);
+      }
+      &:active {
+        background: darken($action-color, 10%);
+        cursor:progress;
+      }
+    }
+  }
+}

data/assets/stylesheets/contentfocus/_hover_tile.scss

@@ -0,0 +1,51 @@
+.hover-tile-outer {
+  $hover-tile-height: 10em;
+
+  background-size: cover;
+  background-position: bottom;
+  background: url("/images/mountains.png");
+  background-color: $base-accent-color;
+  border: 1px solid $base-border-color;
+  height: $hover-tile-height;
+  margin-bottom: $base-line-height;
+  cursor: pointer;
+
+  @include media($medium-screen) {
+    width: 40%;
+  }
+
+  .hover-tile-container {
+    height: $hover-tile-height;
+    overflow: hidden;
+  }
+
+  .hover-tile-container:hover > .hover-tile {
+    @include transform(translate(0, -100%));
+  }
+
+  .hover-tile {
+    @include transition(all, .2s ease-in-out);
+    background: inherit;
+    color: white;
+    height: inherit;
+    padding: 1em 1.5em;
+  }
+
+  .hover-tile-visible {
+    color: transparentize(white, .3);
+    font-size: 2em;
+    font-weight: 200;
+    padding-top: 1.5em;
+    text-align: center;
+  }
+
+  .hover-tile-hidden {
+    background: transparentize(black, .5);
+    h4 {
+      margin-bottom: .5em;
+    }
+    p {
+      color: transparentize(white, .3);
+    }
+  }
+}

data/assets/stylesheets/contentfocus/_nav.scss

@@ -0,0 +1,396 @@
+@import "bitters/extends/button";
+
+header.navigation {
+  $navigation-font-size: 16px !default;
+  $navigation-padding: 1em !default;
+  $navigation-background-color: $dark-gray !default;
+  $navigation-color: transparentize(white, 0.3) !default;
+  $navigation-color-hover: white !default;
+  $navigation-height: 60px !default;
+  $navigation-nav-button-background: $base-accent-color !default;
+  $navigation-nav-button-background-hover: lighten($navigation-background-color, 10) !default;
+  $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20) !default;
+  $navigation-search-background: lighten($navigation-background-color, 5) !default;
+  $navigation-search-border: 1px solid darken($navigation-background-color, 5) !default;
+  $navigation-active-link-color: transparentize(white, 0.5) !default;
+  $navigation-submenu-padding: 1em !default;
+  $navigation-submenu-width: 12em !default;
+  $horizontal-bar-mode: $large-screen !default;
+
+  font-size: $navigation-font-size;
+  background-color: $navigation-background-color;
+  border-bottom: 1px solid darken($navigation-background-color, 10);
+  height: $navigation-height;
+  width: 100%;
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  transition: opacity 0.5s ease, background-color 0.2s linear;
+  overflow: hidden;
+  font-family: $navigation-font-family;
+  -webkit-font-smoothing: auto;
+  letter-spacing: -1px;
+
+  .navigation-wrapper {
+    @include clearfix;
+    @include outer-container;
+    position: relative;
+    z-index: 9999;
+  }
+
+  .logo {
+    float: left;
+    max-height: $navigation-height;
+    padding-left: $navigation-padding;
+    padding-right: 2em;
+
+    img {
+      max-height: $navigation-height;
+      padding: .8em 0;
+    }
+  }
+
+  // Mobile view
+
+  .navigation-menu-button {
+    color: $navigation-color;
+    display: block;
+    float: right;
+    font-weight: 700;
+    line-height: $navigation-height;
+    margin: 0;
+    padding-right: 1em;
+    text-transform: uppercase;
+
+    @include media ($horizontal-bar-mode) {
+      display: none;
+    }
+
+    &:hover {
+      color: $navigation-color-hover;
+    }
+  }
+
+  // Nav menu
+
+  .nav {
+    z-index: 9999999;
+    float: none;
+    @include media ($horizontal-bar-mode) {
+      float: left;
+    }
+  }
+
+  ul#navigation-menu {
+    -webkit-transform-style: preserve-3d; // stop webkit flicker
+    clear: both;
+    display: none;
+    margin: 0 auto;
+    overflow: visible;
+    padding: 0;
+    width: 100%;
+    z-index: 9999;
+
+    @include media ($horizontal-bar-mode) {
+      display: inline;
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  // The nav items
+
+  ul li.nav-link {
+    background: $navigation-background-color;
+    display: block;
+    line-height: $navigation-height;
+    overflow: hidden;
+    padding-right: .8em;
+    text-align: right;
+    width: 100%;
+    z-index: 9999;
+    @include media ($horizontal-bar-mode) {
+      background: transparent;
+      display: inline;
+      line-height: $navigation-height;
+      text-decoration: none;
+      width: auto;
+    }
+
+    a {
+      transition: color 0.2s linear;
+      color: $navigation-color;
+      display: inline-block;
+      font-weight: 400;
+      text-decoration: none;
+
+      @include media ($horizontal-bar-mode) {
+        padding-right: 1em;
+      }
+
+      &:hover {
+        color: $navigation-color-hover;
+      }
+    }
+  }
+
+  .active-nav-item a {
+    border-bottom: 1px solid $navigation-active-link-color;
+    padding-bottom: 3px;
+  }
+
+  // Sub menus
+
+  li.more.nav-link {
+    padding-right: 0;
+
+    @include media($large-screen) {
+      padding-right: $navigation-submenu-padding;
+    }
+
+    > ul > li:first-child a  {
+      padding-top: 1em;
+    }
+
+    a {
+      margin-right: $navigation-submenu-padding;
+    }
+
+    > a {
+      padding-right: 0.6em;
+    }
+
+    > a:after {
+      @include position(absolute, auto -.4em auto auto);
+      content: '\25BE';
+      color: $navigation-color;
+    }
+  }
+
+  li.more {
+    overflow: visible;
+    padding-right: 0;
+
+    a {
+      padding-right: .8em;
+    }
+
+    > a {
+      padding-right: 1.6em;
+      position: relative;
+
+      @include media($large-screen) {
+        margin-right: $navigation-submenu-padding;
+      }
+
+      &:after {
+        content: '›';
+        font-size: 1.2em;
+        position: absolute;
+        right: $navigation-submenu-padding / 2;
+      }
+    }
+
+    &:hover > .submenu {
+      display: block;
+    }
+
+    @include media($horizontal-bar-mode) {
+      padding-right: .8em;
+      position: relative;
+    }
+  }
+
+  ul.submenu {
+    display: none;
+    padding-left: 0;
+
+    @include media($horizontal-bar-mode) {
+      left: -$navigation-submenu-padding;
+      position: absolute;
+      top: 1.5em;
+    }
+
+    .submenu {
+      @include media($horizontal-bar-mode) {
+        left: $navigation-submenu-width - .2em;
+        top: 0;
+      }
+    }
+
+    li {
+      display: block;
+      padding-right: 0;
+
+      @include media($horizontal-bar-mode) {
+        line-height: $navigation-height / 1.3;
+
+        &:first-child > a {
+          border-top-left-radius: $base-border-radius;
+          border-top-right-radius: $base-border-radius;
+        }
+
+        &:last-child > a {
+          border-bottom-left-radius: $base-border-radius;
+          border-bottom-right-radius: $base-border-radius;
+          padding-bottom: .7em;
+        }
+      }
+
+      a {
+        background-color: darken($navigation-background-color, 3);
+        display: inline-block;
+        text-align: right;
+        width: 100%;
+
+        @include media($horizontal-bar-mode) {
+          background-color: $navigation-background-color;
+          padding-left: $navigation-submenu-padding;
+          text-align: left;
+          width: $navigation-submenu-width;
+        }
+      }
+    }
+  }
+
+  // Elements on the far right
+
+  .navigation-tools {
+    @include clearfix;
+    display: block;
+    padding-right: $navigation-padding;
+    padding-left: $navigation-padding/2;
+    clear: both;
+    background: #505050;
+
+    @include media($large-screen) {
+      background: transparent;
+      float: right;
+      clear: none;
+    }
+  }
+
+  .sign-up {
+    @extend button;
+    margin-top: 1.2em;
+    float: right;
+    display: inline;
+    font-size: .8em;
+    text-transform: uppercase;
+    padding: .75em 1em;
+  }
+
+// Search bar
+
+  .search-bar {
+    $search-bar-border-color: $base-border-color;
+    $search-bar-border: 1px solid $search-bar-border-color;
+    $search-bar-background: lighten($search-bar-border-color, 10%);
+
+    padding: 0.85em 0.85em 0.7em 0.6em;
+    width: 60%;
+
+    form {
+      position: relative;
+
+      input[type=search] {
+        @include box-sizing(border-box);
+        background: $navigation-search-background;
+        border-radius: $base-border-radius * 2;
+        border: $navigation-search-border;
+        color: $navigation-color;
+        font-size: 0.9em;
+        font-style: italic;
+        margin: 0;
+        padding: 0.5em 0.8em;
+        width: 100%;
+        height: auto !important;
+
+        @include media($horizontal-bar-mode) {
+          width: 100%;
+        }
+      }
+
+      button[type=submit] {
+        background: $navigation-search-background;
+        border: none;
+        bottom: 0.3em;
+        left: auto;
+        outline: none;
+        padding: 0 9px;
+        position: absolute;
+        right: 0.3em;
+        top: 0.3em;
+
+        img {
+          height: 12px;
+          opacity: 0.7;
+          padding: 1px;
+        }
+      }
+    }
+
+    @include media($horizontal-bar-mode) {
+      display: inline-block;
+      position: relative;
+      width: 16em;
+
+      input {
+        @include box-sizing(border-box);
+        display: block;
+      }
+    }
+  }
+
+  a.button {
+    @extend %button;
+    transition: background-color 0.2s linear;
+    font-size: $navigation-font-size;
+    font-family: $heading-font-family;
+    font-weight: 700;
+    letter-spacing: $heading-letter-spacing;
+    color: $navigation-background-color;
+    background: $navigation-color;
+    padding: 0.75em 1em;
+    border-radius: 5px;
+    margin: 0.75em 0;
+    display: inline-block;
+    text-decoration: none;
+    &:focus, &:hover, &:active {
+      color: lighten($navigation-background-color, 40%);
+      background: lighten($navigation-color, 40%);
+      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 5px lighten($navigation-background-color, 10%);
+    }
+    &:active {
+      background: darken($navigation-background-color, 10%);
+      cursor:progress;
+    }
+  }
+  &.invert {
+    background-color: invert($navigation-background-color);
+    border-bottom: 1px solid lighten(invert($navigation-background-color), 10);
+    ul li.nav-link a {
+      color: invert($navigation-color);
+    }
+    a.button {
+      background-color: $navigation-background-color;
+      color: $navigation-color;
+      &:focus, &:hover, &:active {
+        color: lighten($navigation-color, 40%);
+        background-color: lighten($navigation-background-color, 40%);
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 5px lighten($navigation-color, 10%);
+      }
+      &:active {
+        background: darken($navigation-color, 10%);
+        cursor:progress;
+      }
+    }
+  }
+  &.hide {
+    opacity: 0;
+  }
+
+  body.bare & {
+    display: none;
+  }
+}