style.scss

@import "compass/css3/images";
@import "compass/css3/box-sizing";
@import "compass/css3/transform";
@import "vars";

@mixin our-transition($arg) {
  -webkit-transition: unquote($arg);
     -moz-transition: unquote($arg);
      -ms-transition: unquote($arg);
       -o-transition: unquote($arg);
          transition: unquote($arg);
}

@mixin text-shadows($arg) {
  $count: 0;
  $textshadow: '';
  @each $value in $arg {
    $textshadow: $textshadow + $count + 'px ' + $count + 'px ';
  }
}

@function solid-text-shadows($color,$width) {
  $i: 1;
  $text-shadow: "";
  @while $i < ($width + 1) {
    $text-shadow: $text-shadow + $i + "px " + $i + "px " + "1px " + $color;
    
    @if($i != $width ) {
      $text-shadow: $text-shadow + ", ";
    }  
    $i: $i + 1;
  }
  
  @return unquote($text-shadow);
}

/*
 * HTML5 ✰ Boilerplate
 */

// =============================================================================
//   HTML5 element display
//   ========================================================================== 

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }


// =============================================================================
//   Base
//   ========================================================================== 

html { font-size: 100%; overflow-y: scroll; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

body { @extend .reset-margin; }

body, button, input, select, textarea { font-family: sans-serif; color: $lightest; }

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


// =============================================================================
//   Links
//   ==========================================================================

a { color: $link-color; text-decoration: none; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; text-decoration: underline; }


// =============================================================================
//   Typography
//   ========================================================================== 

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

blockquote { margin: 1em 40px; }

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; @extend .reset-margin; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7 http://h5bp.com/d
 * 2. Remove the gap between images and borders on image containers http://h5bp.com/e 
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow displayed oddly in IE9 
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */

figure { @extend .reset-margin; }


/* =============================================================================
   Forms
   ========================================================================== */

form { @extend .reset-margin; }
fieldset { border: 0; @extend .reset-margin; padding: 0; }

legend { border: 0; *margin-left: -7px; padding: 0; }

label { cursor: pointer; }

button, input, select, textarea { font-size: 100%; @extend .reset-margin; vertical-align: baseline; *vertical-align: middle; }

button, input { line-height: normal; *overflow: visible; }

button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing:
content-box; box-sizing: content-box; -webkit-appearance: textfield; }

input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

textarea { overflow: auto; vertical-align: top; }

input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }


/* =============================================================================
   Tables
   ========================================================================== */

table { border-collapse: collapse; border-spacing: 0; }


/* =============================================================================
   Primary styles
   Author: Divya Manian
   ========================================================================== */
* { @include box-sizing(border-box); }

@import "extends";
   
html {  
  background-image: image-url('denim.png');
  color: $lightest; 
  @include background(
            radial-gradient(20em 20em, circle cover, transparentize(#207cca, 0.9) 10em,  transparentize(#207cca, 1) 10em),
            radial-gradient(30em 30em, circle cover, transparentize(#cd5c5c, 0.8) 5em,  transparentize(#cd5c5c, 1) 5em),
            radial-gradient(60em 40em, circle cover, transparentize(white, 0.9) 15em, transparentize(white, 1) 15em),
            radial-gradient(40em 60em, circle cover, transparentize(#207cca, 0.8) 5em, transparentize(#207cca, 1) 5em),
            radial-gradient(35em 45em, circle cover, transparentize(black, 0.8) 7em, transparentize(black, 1) 7em),
            image-url('denim.png')            
          );
  background-color:  $dark; 
  min-height: 100%; 
  max-width: 100%; 
  font: 16px/1.5 $default-font-family;
}
 
body {
  max-width: 70%;
  margin: 3em auto;
  min-width: 60%;
}

.index { 
  @extend .text-center; 
  text-shadow: 1px 1px 1px darken($dark, 10%);

  h1 {
    font-size: 5em; 
    line-height: 1.2em;   
    text-shadow: solid-text-shadows(lighten($contrast, 10%), 3), 3px 3px 1px darken($dark, 10%), 4px 4px 3px darken($dark, 10%);
    margin: 0.6em 0 0.5em 0; 
    text-transform: uppercase;
    font-family: $index-font-family;
    font-weight: normal;
  }
  
  h1 img { 
    vertical-align: -10%;
    width: 64px;
    height: 64px;
  }
  
  h2 {
    font-size: 1em;  
    margin: 0 auto; 
    max-width: 38em; 
    font-weight: normal; 
    text-transform: none; 
    font-style: normal;    
    
    b {
      @extend .display-block;
      @include secondary-title;
      margin-bottom: 0.5em;
      color: lighten($contrast, 10%);          
    }
  }
}

.index h1 b,  
article h3 b i { 
  @extend .display-block;
  font-family: $default-font-family;  
  line-height: 1;  
}


.index > div { padding: 2rem 0; }

#clickmore { white-space: nowrap; text-decoration: none; }
#clickmore::after { content: " ▶"; vertical-align: -0.1em; font-size: 0.7em;}

#clickmore.active::after { content: " ▼"; }

#moredetails { 
  max-height: 0; 
  overflow: hidden; 
  @include our-transition("height 100ms ease-in");
  font-size: 0.9em;
}

#moredetails:target, #moredetails.active { max-height: 12em;  }

#livesearch{
  @extend .reset-margin; 
  width: 50%; 
  padding: 0 1em; 
  height: 2rem;
  background: white;
  border-radius: 10em;
  border: 0;
  outline: none;
  color: darken($dark, 20%);
  z-index: 1;
}

#livesearch:focus {
  box-shadow: 0 0 0.5em darken($contrast, 30%);
}  

#searchurl { 
  @include our-transition('width 500ms linear, opacity 600ms linear'); 
  @include background(linear-gradient(90deg, darken(#f16529, 20%), #f16529));      
  background-color: darken(#f16529, 20%);
  display: inline-block;
  font-size: 0.8em;
  line-height: 2rem;
  height: 2rem;
  width: 0; opacity: 0;
  color: white;
  border-radius: 0 10em 10em 0;
  overflow: hidden;
  margin-left: -2em;
}

#searchurl.active {
  width: 12em;
  padding-left: 1.5em;
  opacity: 1;
} 

#livesearch, 
#searchurl {
  display: inline-block;
  vertical-align: bottom;
  position: relative;
}

.explore-features {

  margin: 2rem 0;  
  @include our-transition(all .5s);
  max-height: 15em;
  overflow: hidden;


  h2 { 
    width: 5em;
     margin-left: 2.4rem; 

    b { margin-bottom: 0; text-indent: -2.4rem; }
  }

  h2, ul {
    display: inline-block;
    vertical-align: top;
    text-align: left;
  }

  ul {
    @extend .reset-list;
    border-left: 1px solid $light;
    padding-left: 1em;    

    li { padding: 0.25rem 0; }  
  }  


  li + li { border-top: 1px dotted $light; }

  a { text-decoration: none; color: lighten($link-color, 20%); }

  a +a::before { content: " • "; color: $lightest; }

  a.active { color: lighten($contrast, 10%); } 
}  


article { 
  color: $dark;
  margin-bottom: 2em; 

  .tags { display: none; }  
}

article > header {
  @include our-transition("background-color 100ms ease-in");
  background: lighten($light, 50%);
  border-radius: 0.3rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
  
  &:hover {
    background: $lightest;
  }

  &:before {
    @include our-transition("all 100ms ease-in");
    display: inline-block;
    vertical-align: middle;
    content: "+";
    line-height: 1;
    font-size: 1.5rem; border-radius: 1.5rem;height: 1.5rem; width: 1.5rem;
    margin: 0 0.5rem 0 1rem;
    text-align: center;
    color: white;
    text-shadow: 1px 1px 1px $light;
    background: lighten($light, 40%);      
    border: 1px solid lighten($light, 30%);
  }
  /*
  &:hover:before {
    @include transform(rotate(270deg));
  }
  */
    
  .kind, .name, .status {
    @extend .reset-margin;
    display: inline-block;
    vertical-align: middle; 
    pointer-events: none;
  }
  
  
  i { font-style: normal; }
  .kind, b { font-weight: normal; }
  
    
}


article div.more {   
  @include our-transition("opacity 1s ease-in");  
  display: none;
  opacity: 0;
  background: white;  
  border-radius: 0 0 0.3rem 0.3rem; 
  padding: 0.5em 1em 1.5em 1em;  
  margin: -0.3rem 1px 0 1px;
  position: relative;
  z-index: 0;
  box-shadow: 0 0 7px darken($dark, 10%); 
  
  .polyfills b { font-weight: bold; }
  
  .polyfills p { display: inline; }
  
  .links {
    @extend .reset-margin;
    font-size: 0.8em;
    position: absolute;
    bottom: 0.5em;
    right: 1em;    
    
    a { padding: 0.25em 0.5em; }
    a:hover { 
      background: $link-color; 
      color: #fff; 
      border-radius: 5px; 
      text-decoration: none;
      text-shadow: 1px 1px 1px $dark;
    }
  }  
}

article.expanded {
  > header {
    border-bottom: 1px solid lighten($dark, 45%);
    
    &:before { content: "-"; line-height: 0.75;
      @include transform(none); 
    }
  }
  
  div.more { 
    @extend .display-block;
    opacity: 1; 
  }
}

.kind {
  @extend .display-block;
  font-size: 0.8em;
  line-height: 3rem;
  color: $lightest;    
  position: absolute;
  left: -5em;
  text-align: right;
  width: 4.5em;
  z-index: 1;
  text-shadow: 1px 1px 1px $dark;
}

.name {
  padding: 0.4rem 0; 
  color: darken($link-color, 10%); 
  text-shadow: 0 1px 0px rgba(255, 255, 255, 1);
}

.status {
  font-size: 2em;    
  border-radius: 0 0.2rem 0.2rem 0;
  padding: 0 1rem 0 0.5rem;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  position: relative;
  float: right;


  //Arrow like figures on the right
  &:before, 
  &:after {
    content: "";
    height: 50%;
    width: 0.8em;
    position: absolute;
    left: -0.8em; 
  }
  
  &:before { top: 0; }
  
  &:after { bottom: 0; }
  
  i {
    font-size: 0.3em;
    display: inline-block;
    line-height: 1;
    text-transform: none; 
    font-weight: normal;

    b {
      @extend .display-block;
      font-size: 1.5em;
    }
  }
 
  &.avoid { @include apply-status-style($avoid); } 

  &.use { @include apply-status-style($use); }
  
  &.caution { @include apply-status-style($caution); }  
}


body > footer {
  text-align: center;  
  padding: 3em 0;
  font-size: 0.8em;   
  text-shadow: 1px 1px 1px $dark;     
}

.builders {
  a {   
    display: inline-block;
    margin: 0 1em 1em 0;
    text-align: left;
    width: 11em;

    &:last-child {
      width: auto;
      margin-right: 0;
    }
  }

  img {
    float: left;
    margin-right: 1em;
    border-radius: 0.2rem;
  }

  b {
    font-weight: normal;
    display: block;
  }

  small { display:block; }
}

code { 
  background: hsl(0, 0%, 94%); border-radius: 3px; padding: 0 2px; 
  @include our-transition("all .3s ease-in"); 

  &:hover {
    background: hsl(0, 0%, 88%);
  }
}

/* =============================================================================
   Non-semantic helper classes
   Please define your styles before this section.
   ========================================================================== */


.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

.hidden { display: none; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; @extend .reset-margin; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



@media only screen and (max-width: 680px) {
  html { font-size: 13px; }
  body { max-width: 90%; }
  article > header h2.name { padding-left: 0.5em; margin-right: -100%;}
  article > header::before { display: none; }
  .index h2 { max-width: 100%; }
}

@media only screen and (max-width: 60em) {
  .explore-features {
    h2, ul { width: 100%; }

    h2 { 
      display: block; 
      @include secondary-title;
      font-weight: bold;
      margin: 0 0 0.5em 0;

      b { display: inline; font-size: 1em; }
    }

    ul { border-left: 0; padding-left: 0 }
  }
}  

@media only screen and (min-width: 1400px) {
  /* Style adjustments for bigass, wide viewports go here */
  body {
    max-width: 1070px;
    min-width: initial;
  }
}



@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}