ratchet_design 0.1.17 → 0.1.18

data/app/assets/stylesheets/ratchet/utility/_color.scss

@@ -3,24 +3,41 @@
  * -------------------------------------------------------------------------- */
 
 // Passive colors
-$space:     #263d53; // Blue-Black
-$shark:     #445d75; // Dark Blue-Gray
-$steel:     #58728a; // Blue-Gray
-$pewter:    #87a0b8; // Light Blue-Gray
-$alabaster: #cbd6e1; // Light Blue
-$isabella:  #dde8eb; // Off-Cream
-$smoke:     #eff4f6; // Cream
+$space:     #1f2b54; // Blue-Black
+$shark:     #30446e; // Dark Blue-Gray
+$steel:     #576e91; // Blue-Gray
+$pewter:    #869ebc; // Light Blue-Gray
+$dolphin:   #b4c1d2; // Lighter Blue
+$alabaster: #c3cdda; // Light Blue
+$isabella:  #d6dde7; // Off-Cream
+$smoke:     #edf5f7; // Cream
 $white:     #FFFFFF; // White
 
+// Passive (dark to light)
+$rhino:      #263D53;
+$bayou:      #445D75;
+$smalt:      #58728A;
+$bali:       #87A0B8;
+$boticelli:  #C3D4E4;
+$catskill:   #EDF5F7;
+
+// Active
+$azure:      #0094FD; // Blue
+$cornflower: #625ff9; // Blue purple
+$medium:     #8F52EA; // Purple
+$shocking:   #C60CA5; // Pink
+$shamrock:   #25C894; // Mint green
+$poppy:      #F69523; // Light orange
+$orange:     #F96623; // Orange
+$crimson:    #DD2F41; // Red
 // Active colors
 $azure:     #0094fd; // Blue
 $cerulean:  #0FA7DB; // Softer Blue
 $byzantine: #c60ca5; // Magenta
 $mulberry:  #8f52ea; // Purple
 $majorelle: #625ff9; // Indigo
-$grass:     #2ac84f; // Green
-$apple:     #3FBE3E; // Very Green
 $caribbean: #25c894; // Mint
+$grass:     #2ac84f; // Green
 $gold:      #f69523; // Yellow
 $tangelo:   #f96623; // Orange
 $rusty:     #dd2f41; // Red
@@ -34,42 +51,45 @@ $terracotta:  #A81C27; // Thanksgiving
 $cobalt:      #006dff; // Royal blue
 $capri:       #00d2fe; // Deep sky blue
 
-// Gradient (colors)
-$earthrise:   ( start: $azure,       end: $majorelle );  // Blue to Indigo  //  PostgreSQL
-$royalty:     ( start: $majorelle,   end: $mulberry );   // Indigo to Purple  //  Elasticsearch
-$lagoon:      ( start: $azure,       end: $caribbean );  // Blue to Mint  // RethinkDB
-$pearlescent: ( start: $azure,       end: $mulberry );   // Blue to Purple  //  MySQL
-$firestorm:   ( start: $gold,        end: $tangelo );    // Yellow to Orange  //  RabbitMQ
-$sunset:      ( start: $tangelo,     end: $rusty );      // Orange to Red  //  Redis
-$berries:     ( start: $byzantine,   end: $rusty );      // Magenta to Red  //  etcd
-$supernova:   ( start: $byzantine,   end: $mulberry );   // Magenta to Purple  //  ScyllaDB
-$emerald:     ( start: $caribbean,   end: $grass );      // Mint to Green  //  MongoDB
-$aurora:      ( start: $grass,       end: $mulberry );   // Green to Indigo
-$tidal:       ( start: $cobalt,      end: $capri );      // Hero Gradient Only
+// Active color gradients
+$active-gradients: (
+  earthrise:   ( start: $azure,       end: $majorelle ),  // Blue to Indigo    | PostgreSQL
+  royalty:     ( start: $majorelle,   end: $mulberry ),   // Indigo to Purple  | Elasticsearch
+  lagoon:      ( start: $azure,       end: $caribbean ),  // Blue to Mint      | RethinkDB
+  pearlescent: ( start: $azure,       end: $mulberry ),   // Blue to Purple    | MySQL
+  firestorm:   ( start: $gold,        end: $tangelo ),    // Yellow to Orange  | RabbitMQ
+  sunset:      ( start: $tangelo,     end: $rusty ),      // Orange to Red     | Redis
+  berries:     ( start: $byzantine,   end: $rusty ),      // Magenta to Red    | etcd
+  supernova:   ( start: $byzantine,   end: $mulberry ),   // Magenta to Purple | ScyllaDB
+  emerald:     ( start: $caribbean,   end: $grass ),      // Mint to Green     | MongoDB
+  aurora:      ( start: $grass,       end: $mulberry ),   // Green to Indigo
+  tidal:       ( start: $cobalt,      end: $capri )       // Hero Gradient Only
+);
 
 // Gradient (passive)
-$blackhole:   ( start: $space,       end: $steel );      // Hero Gradient Only
-$midnight:    ( start: $shark,       end: $pewter );     // Hero Gradient Only
-$shady:       ( start: $steel,       end: $alabaster );  // Hero Gradient Only
-$grayscale:   ( start: $pewter,      end: $isabella );   // Hero Gradient Only
-$polar:       ( start: $alabaster,   end: $smoke );      // Hero Gradient Only
-$eggshell:    ( start: $isabella,    end: $white );      // Hero Gradient Only
-
+$passive-gradients: (
+  blackhole:   ( start: $space,       end: $steel ),      // Hero Gradient Only
+  midnight:    ( start: $shark,       end: $pewter ),     // Hero Gradient Only
+  shady:       ( start: $steel,       end: $alabaster ),  // Hero Gradient Only
+  grayscale:   ( start: $pewter,      end: $isabella ),   // Hero Gradient Only
+  polar:       ( start: $alabaster,   end: $smoke ),      // Hero Gradient Only
+  eggshell:    ( start: $isabella,    end: $white )       // Hero Gradient Only
+);
 
 // Translucent colors
 $translucent-white: rgba($white, .5);
 
 // Active Variable List
-$active-colors: $azure, $byzantine, $mulberry, $majorelle, $caribbean, $grass, $gold, $tangelo, $rusty;
-$active-color-names: azure, byzantine, mulberry, majorelle, caribbean, grass, gold, tangelo, rusty;
+$active-colors: $azure, $cerulean, $byzantine, $mulberry, $majorelle, $caribbean, $grass, $gold, $tangelo, $rusty, $orchid;
+$active-color-names: azure, cerulean, byzantine, mulberry, majorelle, caribbean, grass, gold, tangelo, rusty, orchid;
 
 // Passive Variable List
-$passive-colors: $space, $shark, $steel, $pewter, $alabaster, $smoke, $white;
-$passive-color-names: space, shark, steel, pewter, alabaster, smoke, white;
+$passive-colors: $space, $shark, $steel, $pewter, $dolphin, $alabaster, $isabella, $smoke, $white;
+$passive-color-names: space, shark, steel, pewter, dolphin, alabaster, isabella, smoke, white;
 
-// Active Gradient Variable List
-$gradient-colors: $earthrise, $royalty, $lagoon, $pearlescent, $firestorm, $sunset, $berries, $supernova, $emerald, $aurora, $tidal, $blackhole, $midnight, $shady, $grayscale, $polar, $eggshell;
-$gradient-color-names: earthrise, royalty, lagoon, pearlescent, firestorm, sunset, berries, supernova, emerald, aurora, tidal, blackhole, midnight, shady, grayscale, polar, eggshell;
+// // Active Gradient Variable List
+// $gradient-colors: $earthrise, $royalty, $lagoon, $pearlescent, $firestorm, $sunset, $berries, $supernova, $emerald, $aurora, $tidal, $blackhole, $midnight, $shady, $grayscale, $polar, $eggshell;
+// $gradient-color-names: earthrise, royalty, lagoon, pearlescent, firestorm, sunset, berries, supernova, emerald, aurora, tidal, blackhole, midnight, shady, grayscale, polar, eggshell;
 
 // Active and Passive List
 $full-solid-color-list: zip( join($active-color-names, $passive-color-names), join($active-colors, $passive-colors));
@@ -92,44 +112,50 @@ $full-solid-color-list: zip( join($active-color-names, $passive-color-names), jo
       stop-color: #{$color};
     }
   }
+
+  linearGradient##{$name}-darken {
+    stop:nth-child(1) {
+      stop-color: darken($color, 10%);
+    }
+  }
 }
 
-@for $i from 1 through length($gradient-colors) {
 
-  $gradient: nth($gradient-colors, $i);
-  $start-color: map_get( $gradient, start );
-  $end-color: map_get( $gradient, end );  
+// Create active gradients
+@each $key, $val in $active-gradients {
+  $start: map-get($val, start);
+  $end:   map-get($val, end);
 
-  .#{nth($gradient-color-names, $i)}-bg {
-    &:before {
-      background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
-    }
-  }
+  // .#{$key}-bg {
+  //   &:before {
+  //     background: linear-gradient(135deg, #{$start}, #{$end}) left top/100% 100% no-repeat;
+  //   }
+  // }
 
-  linearGradient##{nth($gradient-color-names, $i)} {
+  linearGradient##{$key} {
     stop:nth-child(1) {
-      stop-color: $start-color;
+      stop-color: $start;
     }
     stop:nth-child(2) {
-      stop-color: $end-color;
+      stop-color: $end;
     }
   }
 
-  linearGradient##{nth($gradient-color-names, $i)}-darken {
+  linearGradient##{$key}-darken {
     stop:nth-child(1) {
-      stop-color: darken($start-color, 10%);
+      stop-color: darken($start, 10%);
     }
     stop:nth-child(2) {
-      stop-color: darken($end-color, 10%);
+      stop-color: darken($end, 10%);
     }
   }
 
-  linearGradient##{nth($gradient-color-names, $i)}-lighten {
+  linearGradient##{$key}-lighten {
     stop:nth-child(1) {
-      stop-color: lighten($start-color, 10%);
+      stop-color: lighten($start, 10%);
     }
     stop:nth-child(2) {
-      stop-color: lighten($end-color, 10%);
+      stop-color: lighten($end, 10%);
     }
   }
-}
+}

data/app/assets/stylesheets/ratchet/utility/_global.scss

@@ -8,11 +8,13 @@
 
 @import 'color';
 
-
 /* ===================================== *
  * ii. Fonts
  * ------------------------------------- */
 
+// Cap height declaration
+$cap-height: .75;
+
 // Vertical rhythm base unit
 $vr-base-unit: 15px;
 
@@ -21,6 +23,38 @@ $vr-base-unit: 15px;
   @return $vr-base-unit * $factor;
 }
 
+// Vertical rhythm
+$base-size: 16px;
+$base-height: vr(2); // 30px
+
+// Properly align type to baseline
+@mixin baseline($font-size: 16px, $line-height: 2, $size-output: on, $extra-top: 0, $extra-bottom: 0) {
+
+  // Vertical rhythm line height
+  $vr-line-height: vr($line-height);
+
+  // Top line height remainder (for off-rhythm line height declarations)
+  $top-remainder: vr(1 - $line-height % 1);
+
+  // Bottom line height remainder (for off-rhythm line height declarations)
+  $bottom-remainder: vr($line-height % 1);
+
+  // Magic sauce (read: calculate the true baseline)
+  $baseline: $font-size * ($vr-line-height / $font-size - $cap-height) / 2;
+
+  // Final top offset calculation
+  $top-offset: ($baseline + $top-remainder) % $vr-base-unit;
+
+  // Final bottom offset calculation
+  $bottom-offset: ($vr-base-unit - $top-offset) % $vr-base-unit;
+
+  // Declarations
+  @if $size-output == on { font-size: $font-size; }
+  line-height: $vr-line-height;
+  padding-top: $top-offset + vr($extra-top);
+  margin-bottom: $bottom-offset + vr($extra-bottom);
+}
+
 // Vertical rhythm mixin
 @mixin rhythm($top: null, $bottom: null, $match: off, $switch: on) {
   @if $switch == on {
@@ -45,9 +79,27 @@ $vr-base-unit: 15px;
   @include rhythm($switch: off);
 }
 
-// Vertical rhythm
-$base-size: 15px;
-$base-height: vr(2); // 30px
+// Responsive font mixin
+@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
+  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
+  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
+  $min-breakpoint: $min / $responsive-unitless * 100;
+
+  @media (max-#{$dimension}: #{$min-breakpoint}) {
+    font-size: $min;
+  }
+
+  @if $max {
+    $max-breakpoint: $max / $responsive-unitless * 100;
+
+    @media (min-#{$dimension}: #{$max-breakpoint}) {
+      font-size: $max;
+    }
+  }
+
+  @if $fallback { font-size: $fallback; }
+  font-size: $responsive;
+}
 
 // Fonts stacks
 $base-font: Caslon, 'Proxima Nova', Avenir, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
@@ -123,34 +175,40 @@ $deg: 30deg;
 }
 
 // Modules with max-width and padding
-@mixin padded-module($width: 1100px, $padding: $content-padding) {
-  width: $width;
-  max-width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: $padding;
-  padding-right: $padding;
+@mixin padded-module($width: 1100px, $padding: $content-padding, $nested: true) {
+  padding-left: calc(50vw - #{$width / 2});
+  padding-right: calc(50vw - #{$width / 2});
+
+  @if $nested {
+    width: 100vw;
+  }
+
+  @media (max-width: $width + $padding * 2) {
+    padding-left: $padding;
+    padding-right: $padding;
+  }
+}
+
+// Center an element to the viewport regardless of nesting
+@mixin center-to-viewport {
+  margin-left: calc(-50vw + 50%);
+  transform: translateX(calc(50vw - 50%));
 }
 
 // Width-agnostic module backgrounds
 @mixin cover-background($background: transparent, $offset: null) {
-  position: relative;
+  &,
+  > * {
+    position: relative;
+  }
 
   &:before {
     content: '';
     width: 100vw;
     position: absolute;
     left: calc(-50vw + 50%);
+    background: $background;
     z-index: -1;
-  
-
-    @if contains($gradient-colors, $background) {
-      $start-color: map_get( $background, start );
-      $end-color: map_get( $background, end );
-      background: linear-gradient(135deg, $start-color, $end-color) left top/100% 100% no-repeat;
-    } @else {
-      background: $background;
-    }
 
     // Set top offset (if present)
     @if $offset != null {
@@ -167,6 +225,23 @@ $deg: 30deg;
  * v. Context
  * ------------------------------------- */
 
+// Normal link state mixin
+@mixin normal {
+  &,
+  &:visited {
+    @content;
+  }
+}
+
+// Active link state mixin
+@mixin active {
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
+  }
+}
+
 // Until width media query mixin
 @mixin until($width) {
   $width: $width - 1;

data/app/assets/stylesheets/ratchet/utility/_grid.scss

@@ -6,6 +6,19 @@
  * i. Utilities
  * ------------------------------------- */
 
+// Display breakpoints
+$breakpoint-xlg: 1500px;
+$breakpoint-lg: 1100px;
+$breakpoint: 800px;
+$breakpoint-sm: 550px;
+$breakpoint-xsm: 400px;
+$sidebar-width: 225px;
+
+// Grid gutter definitions
+$grid-no-gutter: 0;
+$grid-small-gutter: vr(2); // 30px
+$grid-large-gutter: vr(4); // 60px
+
  // Grid init mixin (use on parent elements)
 @mixin grid($direction: row) {
   display: flex;
@@ -16,9 +29,9 @@
 
 // Grid gutter mixin (use on parent elements)
 @mixin gutter($amount: 0) {
-  margin-top:   -$amount;
-  margin-left:   $amount * -.5;
-  margin-right:  $amount * -.5;
+  // margin-top:   -$amount;
+  // margin-left:   $amount * -.5;
+  // margin-right:  $amount * -.5;
 
   > * {
     margin-bottom: 0;
@@ -62,9 +75,13 @@
 }
 
 // Column span mixin (use on child elements)
-@mixin span($cols: auto, $breakpoint: 34em) {
+@mixin span($cols: auto, $breakpoint: auto) {
 
   // Universal styles
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  // justify-content: center;
   flex: 0 0 auto;
   max-width: inherit;
 
@@ -99,4 +116,36 @@
 // Column offset mixin (use on child elements)
 @mixin offset($offset: 1) {
   margin-left: span($offset);
-}
+}
+
+/* ===================================== *
+ * ii. Grid Core
+ * ------------------------------------- */
+
+.grid {
+  @include grid();
+
+  &.small-gutter {
+    @include gutter($grid-small-gutter);
+  }
+
+  &.large-gutter {
+    @include gutter($grid-large-gutter);
+  }
+}
+
+$cell-sizes: (1:one, 2:two, 3:three, 4:four, 5:five, 6:six);
+
+@mixin grid-cell($num) {
+  @for $i from 1 through length($cell-sizes) {
+    .#{map-get($cell-sizes, $i)}-of-#{map-get($cell-sizes, $num)} {
+      @include span($i of $num);
+    }
+  }
+}
+
+@include grid-cell(2);
+@include grid-cell(3);
+@include grid-cell(4);
+@include grid-cell(5);
+@include grid-cell(6);

data/app/helpers/ratchet/application_helper.rb

@@ -47,22 +47,21 @@ module Ratchet
     end
 
     # Set custom page selector class
-    def selector(selector = nil)
-      selector ? content_for(:selector) { selector } : content_for(:selector).presence
+    def page_class(*classes)
+      @classes = [] if @classes.nil?
+      @classes += classes
+      @classes.uniq!
+      nil
     end
 
     # Consolidated page class output
-    def page_class( classnames = nil )
-      if ( classnames )
-        @page_classes ||= ''
-        @page_classes = @page_classes + ' ' + classnames
-        @page_classes.strip!
-      else
-        @page_classes || ''
-      end
+    def page_classes
+      page_class = @classes.map(&:to_s).join(" ") rescue nil
+      parts = request.path.split("/").reject(&:blank?).reject{|s| s.match(/\A[0-9]+(\.[0-9]+)?\z/)}
+      [ parts.last, page_class ].reject(&:blank?).join(" ")
     end
 
-    # Consolidated page class output
+    # Main section class output
     def main_class( classnames = nil )
       if ( classnames )
         @main_classes ||= ''