whats up sass.

.gitignore

@@ -0,0 +1 @@
+.sass-cache

config.rb

@@ -0,0 +1,24 @@
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

index.html

@@ -10,8 +10,8 @@
   <meta name="author" content="">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link href='http://fonts.googleapis.com/css?family=Montez|Open+Sans:400italic,400,800' rel='stylesheet' type='text/css'>
-  <link rel="stylesheet" href="css/style.css">
+  <link href='http://fonts.googleapis.com/css?family=Montez|Open+Sans:400italic,400,800' rel='stylesheet'>
+  <link rel="stylesheet" href="stylesheets/style.css">
 
   <script src="js/libs/modernizr-2.0.min.js"></script>
   <script src="js/libs/respond.min.js"></script>

sass/screen.scss

@@ -0,0 +1,303 @@
+/*
+ * HTML5 ✰ Boilerplate
+ *
+ * What follows is the result of much research on cross-browser styling. 
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ */
+
+
+/* =============================================================================
+   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 { margin: 0; font-size: 13px; line-height: 1.231; }
+
+body, button, input, select, textarea { font-family: sans-serif; color: #222; }
+
+::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
+::selection { background: #fe57a1; color: #fff; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+a { color: midnightblue; text-decoration: none; }
+a:visited { color: #551a8b; }
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
+a:hover, a:active { outline: 0; text-decoration: dotted; }
+
+
+/* =============================================================================
+   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; margin: 0; 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 { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+label { cursor: pointer; }
+
+button, input, select, textarea { font-size: 100%; margin: 0; 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="checkbox"], input[type="radio"] { box-sizing: border-box; }
+input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+
+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
+   ========================================================================== */
+html {   box-shadow: 0 0 5em hsl(53, 86%, 79%) inset; min-height: 100%; }
+
+body {
+  max-width: 70%;
+  margin: 5em auto;
+  min-width: 60%;
+  font: 16px/1.5 'Open Sans', sans-serif;
+}
+
+header {
+  text-align: center;
+  margin-bottom: 5em;
+}
+
+h2 { text-transform: uppercase; }
+
+header h1{ font-size: 5em; color: indianred; text-shadow: 2px 2px 1px hsl(53, 82%, 54%); }
+header h1 b { font-size: 50%; color: hsla(200, 14%, 58%, 0.9);  }
+
+header h1 { line-height: 1.2em; margin: 0; }
+header h1 + h2 { font-size: 1em; text-transform: lowercase; margin: 3em 0; }
+header h1 { font-family: 'Montez', cursive; }
+
+
+header h1 b, header h3, article h3 b i { font-family: 'Open Sans', sans-serif; text-transform: uppercase; display: block; line-height: 1;  }
+
+
+header h3 { background: url(../dark_mosaic.png) hsl( 0, 0%, 7%); color: white; position: relative; box-shadow: 0.05em 0.05em 0.4em 0.15em hsl(42, 29%, 33%); padding: 1em; font-size: 1em; line-height: 1.5; text-align: left; margin: 0; }
+
+header h3::before, 
+header h3::after { content: ""; width: 0; height: 0; border: 5em solid hsl(32, 46%, 25%); border-width: 20px 0 20px 20px; border-color: hsl( 0, 0%, 7%) transparent hsl( 0, 0%, 7%); position: absolute; left: -20px; top: 50%; margin-top: -20px; z-index: -1; }
+
+header h3::after { border-width: 20px 20px 20px 0; border-color: hsl( 0, 0%, 7%) transparent hsl( 0, 0%, 7%); left: auto; right: -20px; }
+
+header h3 a { color: hsl(0, 64%, 68%); }
+header h3 a + a::before { content: "  /  "; color: white; }
+
+header h3 b { word-spacing: 0.15em; text-transform: uppercase; }
+
+header h3, header h2,
+article h3 b i { font-weight: normal; text-transform: none; font-style: normal; }
+
+header h4 { background: khaki; padding: 1em; margin: 0; box-shadow: 0 0 1px hsl(42, 29%, 33%); }
+header input[type="search"] { width: 50%; }
+
+article h2 { color: indianred; text-shadow: 2px 2px 1px hsl(53, 82%, 54%);  }
+article h2 b { background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0) -30px, hsl( 42, 79%, 72%) 98%); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) -30px, hsl( 42, 79%, 72%) 98%); font-weight: normal; font-size: 70%; display: inline-block; padding: 0 0.5em; border-radius: 0 3px 3px 0; position: relative; color: #000; -webkit-transition: 1s width linear; width: 1.8em; text-align: right; white-space: nowrap; }
+article h2 b::after { width: 0; height: 0; border-top: 4px solid transparent; border-left: 8px solid hsl( 42, 79%, 72%); border-bottom: 4px solid transparent; content: ""; position: absolute; right: -5px; top: 50%; margin-top: -4px; }
+article h2 b:hover { min-width: 10em; }
+article h2 b:hover::before { content: "Global usage: "; }
+
+article { overflow: hidden; min-height: 5em; padding: 2em 0; position: relative; background-image: -webkit-radial-gradient(50% 180%, ellipse, hsl(53, 86%, 49%), hsla(53, 86%, 79%, 0) 40%);}
+article::after { content: ""; height: 1px; background: -webkit-linear-gradient(left, hsla(159, 15%, 59%, 0), hsla(159, 15%, 59%, 0.5) 40%, hsla(159, 15%, 59%, 0.5) 60%, hsla(159, 15%, 59%, 0)); display: block; position: absolute; bottom: 0; left: 0; width: 100%; }
+
+
+article h3 { float: left; width: 5em; height: 5em; color: white; display: table; line-height: 1; text-align: center; text-shadow: 2px 2px 1px hsl(77, 31%, 17%); margin: -1em 1em 0 0; border-spacing: 0; padding: 4px; }
+article h3 b { display: table-cell; vertical-align: middle; border: 2px dotted white;  background: hsl(77, 31%, 37%); border-radius: 10em;  }
+article h3 b i { font-size: 70%; color: hsl(50, 100%, 80%); }
+.fallback b { background: hsl(60, 31%, 40%); } 
+.polyfill  b { background: hsl(40, 61%, 40%); }
+
+
+
+
+@import "compass/css3/transform";
+@import "compass/css3/transition";
+
+
+div#main, h1, header h2, h3, h4 { 
+  @include single-transition(all, 0.6s, ease-out);
+
+  /* override cuz webkit doesnt support >1 */
+  -webkit-transition: all 0.6s cubic-bezier(.83,1   ,.63,.9);  
+  -webkit-transform : translateZ(0);   
+}
+
+h1, h2, h3, h4 { 
+  @include transition-duration(0.3s)
+}
+
+.searching div#main {
+    @include transform( translate((0, -480px) translateZ(0)));
+    @include transition-duration(0.8s);
+}
+
+.searching h1 {
+  @include transform( translate(-1200px, 0px) translateZ(0) )
+}
+
+.searching header h2 {
+  @include transform( translate(1200px, 0px) translateZ(0) )
+}
+
+.searching header h3 {  opacity: 0;   }
+
+.searching header h4 {  
+  @include transform( translate(0px, -393px) translateZ(0) );
+
+  border-radius: 0 0 20px 20px;
+}
+
+.test div#main {
+  @include transform( translate(0, -2480px) translateZ(0) );
+}
+
+
+/* =============================================================================
+   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; margin: 0; 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 (min-width: 480px) {
+  /* Style adjustments for viewports 480px and over go here */
+
+}
+
+@media only screen and (min-width: 768px) {
+  /* Style adjustments for viewports 768px and over go here */
+
+}
+
+
+
+@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; }
+}