nesta-contentfocus-extensions 0.0.1 → 0.0.2

data/assets/stylesheets/contentfocus/_browser.scss

@@ -0,0 +1,146 @@
+$browser-top-bar-height: 1.5em;
+$browser-circle-size: .5em;
+$browser-circle-margin: ($browser-top-bar-height - $browser-circle-size) / 2;
+$browser-top-bar-background: lighten(#DFDFDF, 5);
+$browser-border: 0px;
+$browser-background: $base-background-color;
+$browser-content-background-1: #F0F0F0;
+$browser-content-background-2: $base-background-color;
+$browser-content-background-3: #F0F0F0;
+
+.browsers {
+  display:inline-block;
+  padding-top: 0;
+  text-align:center;
+  width:100%;
+
+  @include media($large-screen) {
+    padding-top: 2em;
+  }
+}
+
+.browser-top-bar {
+  @include linear-gradient($browser-top-bar-background, darken($browser-top-bar-background, 2));
+  border-top-left-radius: $base-border-radius;
+  border-top-right-radius: $base-border-radius;
+  border: $browser-border;
+  box-shadow: inset 0 1px 0 transparentize(white, .6);
+  height: $browser-top-bar-height;
+  width: 100%;
+}
+
+.browser-circle {
+  border-radius: $browser-circle-size * 2;
+  box-shadow: 0 1px 0px transparentize(white, .5), inset 0 1px 1px transparentize(black, 0.8);
+  display: inline-block;
+  @include size($browser-circle-size);
+  margin: $browser-circle-margin 0;
+}
+
+.browser-circle:nth-child(1) {
+  background: #FF6F55;
+  margin-left: $browser-circle-margin;
+}
+
+.browser-circle:nth-child(2) {
+  background: #F5B01D;
+  margin-left: $browser-circle-margin / 3;
+}
+
+.browser-circle:nth-child(3) {
+  background: #51B151;
+  margin-left: $browser-circle-margin / 3;
+}
+
+//////////////////////////////////////////////
+
+.browser {
+  border-bottom: none;
+  border-top-left-radius: $base-border-radius;
+  border-top-right-radius: $base-border-radius;
+  box-shadow: 0 3px 5px transparentize(black, .7);
+  display: inline-block;
+  text-align: left;
+  width:20%;
+}
+
+.browser:nth-child(1) {
+  background-color: $browser-content-background-1;
+  display: none;
+
+  @include media($large-screen) {
+    display: inline-block;
+  }
+
+  .browser-content {
+    background-color: $browser-content-background-1;
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+.browser:nth-child(2) {
+  @include transform(scale(1));
+  background-color: $browser-content-background-2;
+  width: 90%;
+
+  @include media($large-screen) {
+    @include transform(scale(1.2));
+    width: 40%;
+  }
+
+  .browser-content {
+    background: url(https://raw.githubusercontent.com/thoughtbot/refills/9c16f8b69d857c296c85f2d8c434e825f813a566/source/images/refills-screenshot2.jpg);
+    background-color: $browser-content-background-2;
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+.browser:nth-child(3) {
+  background-color: $browser-content-background-3;
+  display: none;
+
+  @include media($large-screen) {
+    display: inline-block;
+  }
+
+  .browser-content {
+    background: url(https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/refills-screenshot3.png);
+    background-color: $browser-content-background-3;
+    background-position: top;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+}
+
+.browser-content {
+  border-left: $browser-border;
+  border-right: $browser-border;
+  height: 17em;
+  overflow: hidden;
+
+  @include media($large-screen) {
+    height: 18em;
+  }
+}
+
+//////////////////////////////////////////////
+
+.cover {
+  background: transparent;
+  border-top: 0;
+  height: 4em;
+  margin-top: 0;
+  position: relative;
+  width: 100%;
+  z-index: 999;
+
+  &::after {
+    clear: both;
+    content: " ";
+  }
+}
+

data/assets/stylesheets/contentfocus/_bullets.scss

@@ -0,0 +1,63 @@
+.bullets {
+  $icon-bullet-size: 3.5em;
+
+  overflow: auto;
+  margin-bottom: $base-line-height;
+
+  // change ".three-col-bullet" class to this for two bullet layout
+  .two-col-bullet {
+    @include media($large-screen) {
+      @include span-columns(6);
+      @include omega(2n);
+    }
+  }
+
+  .three-col-bullet {
+    @include media($large-screen) {
+      @include span-columns(4);
+      @include omega(3n);
+    }
+  }
+
+  // change ".three-col-bullet" class to this for four bullet layout
+  .four-col-bullet {
+    @include media($large-screen) {
+      @include span-columns(3);
+      @include omega(4n);
+    }
+  }
+
+  .bullet-icon {
+    float: left;
+    background: $base-accent-color;
+    padding: $icon-bullet-size /4;
+    border-radius: 50%;
+    width: $icon-bullet-size;
+    height: $icon-bullet-size;
+  }
+
+  .bullet-icon-1 {
+    background: $base-accent-color;
+  }
+
+  .bullet-icon-2 {
+    background: adjust-hue($base-accent-color, -50);
+  }
+
+  .bullet-icon-3 {
+    background: adjust-hue($base-accent-color, -140);
+  }
+
+  .bullet-content {
+    margin-left: $icon-bullet-size *1.4;
+    margin-bottom: 2em;
+  }
+
+  h2 {
+    font-size: $icon-bullet-size /2.5;
+    padding-top: $icon-bullet-size /7;
+    margin-bottom: $icon-bullet-size /6;
+    border-bottom: 1px solid transparentize($base-font-color, .8);
+    display: inline-block;
+  }
+}

data/assets/stylesheets/contentfocus/_comments.scss

@@ -0,0 +1,59 @@
+.comment {
+  $comment-gutter: 1.4em;
+  $comment-image-padding: .7em;
+  $comment-image-width: 4em;
+  $comment-color: $base-font-color;
+  $comment-background: lighten($base-accent-color, 15);
+  $comment-detail-color: transparentize($comment-color, .5);
+  $comment-image-vert-alignment: top;
+
+  display: table;
+  width: 100%;
+  margin-bottom: $base-spacing;
+  padding-bottom: 1em;
+  border-bottom: 1px solid transparentize($comment-color, .9);
+
+  .comment-image,
+  .comment-content {
+    display: table-cell;
+    vertical-align: $comment-image-vert-alignment;
+  }
+
+  .comment-image {
+    padding-right: $comment-gutter;
+
+    > img {
+      width: $comment-image-width;
+      height: auto;
+      border-radius: $base-border-radius;
+      padding: $comment-image-padding;
+      background: $comment-background;
+      display: block;
+      max-width: none;
+    }
+
+    .comment-reverse-order & {
+      padding-right: 0;
+      padding-left: 10px;
+    }
+  }
+
+  .comment-content {
+    width: 100%;
+
+    h1 {
+      font-size: 1em;
+      margin-bottom: .5em;
+    }
+
+    p {
+      margin-bottom: .5em;
+    }
+
+    p.comment-detail {
+      font-style: italic;
+      font-size: .9em;
+      color: $comment-detail-color;
+    }
+  }
+}

data/assets/stylesheets/contentfocus/_device.scss

@@ -0,0 +1,84 @@
+$device-padding-vertical: 5em;
+$device-padding-horizontal: .4em;
+$device-screen-width: 14em;
+$device-screen-height: 25em;
+$device-background: darken(gray, 40);
+$device-backside-background: darken($device-background, 10);
+$device-text-color: white;
+
+$device-background-top: #162C4C;
+$device-background-bottom: #0A120D;
+$gradient-angle: 10deg;
+$device-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';
+$device-screen-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/cosmin_capitanu_screen.jpg';
+
+.device-background {
+  @include background(url($device-image), linear-gradient($gradient-angle, $device-background-bottom, $device-background-top), no-repeat $device-background-top scroll);
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 20em;
+}
+
+.device-text {
+  color: $device-text-color;
+  padding: 2em;
+
+  @include media($large-screen) {
+    max-width: 50%;
+    padding: 4em;
+    float: left;
+  }
+
+  h4 {
+    margin-bottom: .5em;
+    padding-bottom: .5em;
+    border-bottom: 1px solid transparentize($device-text-color, .7);
+  }
+
+  p {
+    font-family: $serif;
+    margin-bottom: 1.5em;
+  }
+}
+
+.device {
+  display: none;
+  position: relative;
+
+  @include media($large-screen) {
+    @include transform(
+      perspective(800px)
+      translateX(0px)
+      translateY(-100px)
+      translateZ(50px)
+      rotateX(0deg)
+      rotateY(-20deg)
+      rotateZ(-0deg));
+    display: block;
+    float: right;
+    margin-bottom: -12em;
+    margin-right: 5em;
+    padding: $device-padding-vertical 0;
+    width: $device-screen-width + (2 * $device-padding-horizontal);
+    border-radius: 2em;
+    background: $device-background;
+    box-shadow:
+      1px 0px lighten($device-backside-background, 20),
+      4px 0px lighten($device-backside-background, 2),
+      7px 0px $device-backside-background,
+      10px 0px $device-backside-background,
+      13px 0px $device-backside-background;
+      z-index: 99999;
+
+    .screen {
+      @include size($device-screen-width $device-screen-height);
+      background-image: url($device-screen-image);
+      background-size: cover;
+      box-shadow: inset 0 1px 8px transparentize(black, .5);
+      margin: auto;
+      border-radius: .2em;
+    }
+  }
+}
+

data/assets/stylesheets/contentfocus/_flashes.scss

@@ -0,0 +1,30 @@
+$flash-red: #FBE3E4;
+$flash-yellow: #FFF6BF;
+$flash-green: #E6EFC2;
+
+%flash-base {
+  display: block;
+  font-weight: bold;
+  margin-bottom: $base-spacing / 2;
+  padding: $base-spacing / 2;
+  text-align: center;
+}
+
+$flashes: (alert: $flash-yellow, error: $flash-red, notice: lighten($base-accent-color, 40), success: $flash-green);
+
+@each $flash, $color in $flashes {
+  .flash.#{$flash} {
+    @extend %flash-base;
+    background: $color;
+    color: darken($color, 60);
+
+    a {
+      color: darken($color, 70);
+      border-bottom: 1px solid transparentize(darken($color, 70), .7);
+
+      &:hover {
+        color: darken($color, 90);
+      }
+    }
+  }
+}

data/assets/stylesheets/contentfocus/_footer.scss

@@ -0,0 +1,78 @@
+.footer {
+  $footer-background: desaturate(darken($base-accent-color, 20), 30) !default;
+  $footer-color: white !default;
+  $footer-link-color: transparentize($footer-color, .6) !default;
+  $footer-disclaimer-color: transparentize($footer-color, .6) !default;
+
+  background: $footer-background;
+  padding: $base-spacing*2 $gutter;
+  width: 100%;
+
+  .footer-logo {
+    text-align: center;
+    margin-bottom: 2em;
+
+    img {
+      height: 3em;
+    }
+  }
+
+  .footer-links {
+    @include clearfix;
+    margin-bottom: $base-spacing;
+
+    @include media($medium-screen) {
+      @include shift(3);
+    }
+  }
+
+  ul {
+    margin-bottom: $base-spacing*2;
+    padding: 0;
+
+    @include media($medium-screen) {
+      @include span-columns(3);
+      @include omega(3n);
+      @include clearfix;
+    }
+  }
+
+  li {
+    text-align: center;
+
+    @include media($medium-screen) {
+      text-align: left;
+    }
+  }
+
+  li a {
+    color: $footer-link-color;
+    text-decoration: none;
+
+    &:hover {
+      color: transparentize($footer-color, 0);
+    }
+  }
+
+  li h3 {
+    color: $footer-color;
+    font-size: 1em;
+    font-weight: 800;
+    margin-bottom: .4em;
+  }
+
+  hr {
+    border: 1px solid transparentize($footer-disclaimer-color, .3);
+    margin: 0 auto $base-spacing;
+    width: 12em;
+  }
+
+  p {
+    color: $footer-disclaimer-color;
+    font-size: .9em;
+    line-height: 1.5em;
+    margin: auto;
+    max-width: 35em;
+    text-align: center;
+  }
+}