was too long awake last commit, here are the files back we still need

app/assets/javascripts/app/pages/stream.js

@@ -0,0 +1,68 @@
+app.pages.Stream = app.views.Base.extend({
+  templateName : "stream",
+
+  events : {
+    'activate .stream-frame-wrapper' : 'triggerInteractionLoad'
+  },
+
+  subviews : {
+    "#stream-content" : "streamView",
+    "#stream-interactions" : "interactionsView"
+  },
+
+  initialize : function(){
+    this.stream = this.model = new app.models.Stream()
+    this.stream.preloadOrFetch()
+
+    this.streamView = new app.pages.Stream.InfiniteScrollView({ model : this.stream })
+    this.interactionsView = new app.views.StreamInteractions()
+
+    this.streamView.on('loadMore', this.updateUrlState, this);
+    this.stream.on("fetched", this.refreshScrollSpy, this)
+    this.stream.on("frame:interacted", this.selectFrame, this)
+  },
+
+  selectFrame : function(post){
+    if(this.selectedPost == post) { return }
+    this.selectedPost = post
+    
+    this.$(".stream-frame-wrapper").removeClass("selected-frame")
+    this.$(".stream-frame-wrapper[data-id=" + this.selectedPost.id +"]").addClass("selected-frame")
+    this.interactionsView.setInteractions(this.selectedPost)
+  },
+
+  updateUrlState : function(){
+    var post = this.stream.items.last();
+    if(post){
+      this.navigateToPost(post)
+    }
+  },
+
+  navigateToPost : function(post){
+    app.router.navigate(location.pathname + "?max_time=" + post.createdAt(), {replace: true})
+  },
+
+  triggerInteractionLoad : function(evt){
+    this._throttledInteractions = this._throttledInteractions || _.bind(_.throttle(function(id){
+      this.selectFrame(this.stream.items.get(id))
+    }, 500), this)
+
+    this._throttledInteractions($(evt.target).data("id"))
+  },
+
+  refreshScrollSpy : function(){
+    _.defer($('body').scrollspy('refresh'))
+  }
+},
+
+//static methods
+{
+  InfiniteScrollView : app.views.InfScroll.extend({
+    initialize: function(){
+      this.stream = this.model
+      this.collection = this.stream.items
+      this.postClass = app.views.Post.StreamFrame
+      this.setupInfiniteScroll()
+    }
+  })
+});

app/assets/javascripts/main.js

@@ -19,7 +19,6 @@
 //= require jquery.idle-timer
 //= require jquery.infinitescroll-custom
 //= require jquery.autocomplete-custom
-//= require jquery.isotope.min
 //= require keycodes
 //= require fileuploader-custom
 //= require handlebars-1.0.0.beta.6

app/assets/stylesheets/new-templates.css.scss

@@ -0,0 +1,23 @@
+@import 'mixins';
+@import 'new_styles/new_mixins';
+@import 'new_styles/variables';
+
+/* core */
+@import 'new_styles/flash_messages';
+
+@import 'new_styles/base';
+@import 'new_styles/interactions';
+@import 'new_styles/viewer_nav';
+
+/* font overrides */
+@import 'new_styles/typography';
+
+/* login */
+@import 'new_styles/login';
+@import 'new_styles/registration';
+@import 'new_styles/landing';
+
+@import 'new_styles/forms';
+
+
+@include video-overlay();

app/assets/stylesheets/new_styles/_animations.scss

@@ -0,0 +1,62 @@
+@-webkit-keyframes opacity-pulse {
+	0%   { @include opacity(0.3); }
+	65%  { @include opacity(0.9); }
+	100% { @include opacity(0.3); }
+}
+@-moz-keyframes opacity-pulse {
+	0%   { @include opacity(0.3); }
+	65%  { @include opacity(0.9); }
+	100% { @include opacity(0.3); }
+}
+@-ms-keyframes opacity-pulse {
+	0%   { @include opacity(0.3); }
+	65%  { @include opacity(0.9); }
+	100% { @include opacity(0.3); }
+}
+
+
+@-webkit-keyframes ease-over {
+	0%   { @include opacity(0); -webkit-transform : scale(1.3); }
+	100% { @include opacity(1); -webkit-transform : scale(1); }
+}
+@-moz-keyframes ease-over {
+	0%   { @include opacity(0); -moz-transform : scale(1.3); }
+	100% { @include opacity(1); -moz-transform : scale(1); }
+}
+@-ms-keyframes ease-over {
+	0%   { @include opacity(0); -ms-transform : scale(1.3); }
+	100% { @include opacity(1); -ms-transform : scale(1); }
+}
+
+@-webkit-keyframes ease-out {
+	0%     { @include opacity(1); -webkit-transform : scale(1); }
+	100%   { @include opacity(0); -webkit-transform : scale(1.3); }
+}
+@-moz-keyframes ease-out {
+	0%     { @include opacity(1); -moz-transform : scale(1); }
+	100%   { @include opacity(0); -moz-transform : scale(1.3); }
+}
+@-ms-keyframes ease-out {
+	0%     { @include opacity(1); -ms-transform : scale(1); }
+	100%   { @include opacity(0); -ms-transform : scale(1.3); }
+}
+
+/* flash message animations */
+@-webkit-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}
+@-moz-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}
+@-ms-keyframes expose {
+        0%   { top : -100px; }
+        15%  { top : 0; }
+        85%  { top : 0; }
+        100% { top : -100px; }
+}

app/assets/stylesheets/new_styles/_base.scss

@@ -0,0 +1,327 @@
+html,
+body {
+  /* hack to ensure fixed elements at height: 100%; are in relation to the window */
+  max-height : 100%;
+}
+
+body {
+  background-image : image_url("texture/light-bg.png");
+  padding : none;
+
+  &.lock {
+    overflow: hidden;
+  }
+}
+
+/* new link color */
+$link-blue : rgb(42,156,235);
+a { color : $link-blue  }
+
+/* bootstrap extentions */
+.icon-red   { background-image: image_url("img/glyphicons-halflings-red.png");   }
+.icon-blue  { background-image: image_url("img/glyphicons-halflings-blue.png");  }
+
+.avatar {
+  &.micro {
+    height: 20px;
+    width: 20px;
+  }
+
+  &.small {
+    height: 35px;
+    width: 35px;
+  }
+}
+
+.author-name {
+  font-family : Roboto;
+  color: inherit;
+}
+
+#author-info {
+  position : absolute;
+  z-index : 300;
+
+  .author-name {
+    color: #555;
+  }
+
+  .bd {
+    margin-top : 5px;
+    display: inline-block;
+  }
+
+  .post-time,
+  .icon-retweet {
+    color: #555;
+    @include opacity(0.5);
+  }
+}
+
+#post-author {
+  margin : 0;
+  padding : 10px;
+
+  &.status-with-photo-backdrop,
+  &.Wallpaper {
+    .author-name {
+      color : #fff;
+    }
+
+    .post-time,
+    .icon-retweet {
+      color: #fff;
+      @include opacity(0.5);
+    }
+  }
+}
+
+.post-view {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+#post-content {
+  display: table;
+  position: absolute;
+
+  height: 100%;
+  width: 100%;
+
+  img,
+  iframe {
+    @include photo-shadow();
+  }
+
+  iframe {
+    width: 857px;
+    height: 480px;
+    max-width: 100%;
+  }
+}
+
+article { //mood posts
+  //default frame show styles
+  $big-text-size : 2.5em;
+  $medium-text-size : 1.5em;
+  $small-text-size: 1em;
+  width: 960px;
+  margin: 0 auto;
+
+  img {
+    max-height: 70%;
+    border : 10px solid #fff;
+  }
+
+  .photo_viewer {
+    margin-bottom : 20px;
+  }
+
+  @include centered-frame();
+  .container {
+    padding: 70px 0;
+    max-width: 85%;
+  }
+
+  header {
+    padding : 0 100px;
+  }
+
+  header, header p{
+  //big text
+    @include media-text();
+    font-size: $big-text-size;
+    line-height: 1.5em;
+  }
+
+  section.body{
+    p { font-size: $small-text-size; }
+
+    &.short_body{
+      p{
+        font-size: $medium-text-size;
+        margin-top: .5em;
+      }
+    }
+  }
+
+  &.night{
+    background-color : $night-background-color;
+    color : $night-text-color;
+
+    #author-info {
+      color : $night-text-color;
+    }
+  }
+
+  &.newspaper {
+    @include newspaper-type();
+
+    text-align: left;
+
+    .container {
+      max-width: 600px;
+    }
+
+    .photo_viewer {
+      float: right;
+      margin-left: 20px;
+      max-width: 320px;
+    }
+
+    header {
+      margin-bottom: 1em;
+      line-height: 1.2em;
+    }
+
+    .body p {
+      @include newspaper-type();
+      font-size: 1.2em;
+      line-height: 1.7em;
+      margin-bottom: 1.2em;
+    }
+  }
+
+  &.wallpaper{
+    color : #fff;
+  }
+
+  .img-bounding-box {
+    margin : 10px;
+    display : inline-block;
+    text-align : left;
+  }
+
+  img {
+    max-height: 400px;
+    max-width: 400px;
+  }
+}
+
+.status-with-photo-backdrop {
+  p {
+    color: #fff;
+
+    a {
+      @include transition(background-color, 0.3s);
+
+      color: #000;
+      background-color: #fff;
+      background-color: rgba(255,255,255,0.7);
+      padding: 0 5px;
+
+      &:hover {
+        text-decoration: none;
+        background-color: #fff;
+        background-color: rgba(255,255,255,1);
+      }
+    }
+  }
+}
+
+.darken {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0,0,0,0.3);
+
+  display: table;
+
+  .darken-content {
+    @include centered-frame();
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.photo-fill {
+  @include background-cover();
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+.photo-backdrop {
+  p {
+    color: #fff;
+    z-index: 2;
+  }
+
+  img {
+    position: relative;
+  }
+
+  .photo-fill {
+    @include opacity(0.2)
+  }
+}
+
+$bring-dark-accent-forward-color: #DDD;
+
+#top-right-nav {
+  z-index: 10;
+  position : absolute;
+  right : 10px;
+  top : 10px;
+
+  & > a {
+    @include transition(opacity);
+    @include opacity(0.4);
+
+    margin-left : 5px;
+
+    &:hover {
+      @include opacity(0.75);
+      text-decoration : none;
+    }
+  }
+}
+
+#header {
+  position : fixed;
+  top : 0;
+  width : 100%;
+  padding : 15px;
+  z-index : 30;
+
+  -webkit-box-shadow : inset 0 -10px 10px -8px rgba(0,0,0,0.8);
+  -moz-box-shadow : inset 0 -10px 10px -8px rgba(0,0,0,0.8);
+
+  border-bottom : 1px solid #333;
+
+  color : #fff;
+  background : {
+    color : #333;
+    size : cover;
+    attachment : fixed;
+  }
+
+  h1 {
+    @include opacity(0.4);
+  }
+}
+
+/* bootstrap label fixes for Roboto */
+.label {
+  padding : 2px 5px;
+  padding-bottom : 3px;
+
+  span {
+    display : inline-block;
+    position : relative;
+    top : 1px;
+    font-family : Roboto-Bold;
+  }
+}
+
+/* responsive */
+@media (max-width: 767px) {
+  body {
+    padding : 0;
+ }
+}

app/assets/stylesheets/new_styles/_flash_messages.scss

@@ -0,0 +1,13 @@
+
+@import '../_flash_messages';
+
+#flash_notice,
+#flash_alert,
+#flash_error {
+  .message {
+    margin-top : 10px;
+    padding : 10px 20px 8px;
+    background-color : rgba(0,0,0,0.8);
+    border : 1px solid rgba(255,255,255,0.7);
+  }
+}

app/assets/stylesheets/new_styles/_forms.scss

@@ -0,0 +1,112 @@
+/* autocomplete colors */
+input:-webkit-autofill{
+  background-color: #fff !important;
+  background-image: none !important;
+}
+
+
+form.block-form {
+  display : inline-block;
+
+  label {
+    color : #555;
+  }
+
+  input {
+    &:invalid,
+    &:invalid:required,
+    &:invalid:required:focus {
+      -webkit-box-shadow : none;
+      -moz-box-shadow : none;
+      box-shadow : none;
+      box-shadow : none;
+
+      border : none;
+      color : #555;
+    }
+  }
+
+  fieldset {
+    @include border-radius(5px);
+
+    -webkit-box-shadow : inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 2px rgba(255,255,255,0.7);
+
+    margin-bottom : 1em;
+
+    background-color : #fff;
+
+    border : 1px solid #888;
+
+    input[type=text],
+    input[type=email],
+    input[type=password] {
+      @include box-shadow(0,0,0,0);
+      @include border-radius(0);
+
+      background : transparent;
+
+      padding : 10px;
+
+      margin-bottom : 0;
+      border : none;
+    }
+
+  /* mainly bootstrap overrides */
+    .control-group {
+      margin : 0;
+      border-bottom : 1px solid #ddd;
+
+      .control-label,
+      input[type=text],
+      input[type=password],
+      .field_with_errors label {
+        padding : 10px;
+        margin : 0;
+      }
+
+      .controls { margin-left : 100px; position : relative; }
+      .control-label { width : 80px; }
+
+      .controls .field_with_errors input {
+        background : {
+          image : image-url('invalid_fat@2x.png');
+          repeat : no-repeat;
+          position : 197px;
+          size: 20px 20px;
+        }
+      }
+    }
+  }
+
+  input[type=submit] {
+    text-align : center;
+    display : block;
+    width : 100%;
+    padding : 8px 0;
+  }
+}
+
+
+/* buttons to be extracted? */
+.new-btn {
+  @include transition(box-shadow);
+  @include border-radius(5px);
+  @include linear-gradient(#fff, rgb(233,233,233));
+  @include box-shadow(0, 1px, 2px, rgba(0,0,0,0));
+
+  background-color : rgb(233,233,233);
+  color : #888;
+  border : 1px solid #888;
+
+  //font-family : Roboto-Bold;
+  font-size : 14px;
+  text-shadow : 0 1px 2px #eee;
+
+  &:hover {
+    @include box-shadow(0, 1px, 2px, rgba(0,0,0,0.3));
+  }
+
+  &:active {
+    box-shadow : inset 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(255,255,255,0.7);
+  }
+}

app/assets/stylesheets/new_styles/_interactions.scss

@@ -0,0 +1,339 @@
+@import '../mixins';
+
+#post-interactions {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+
+#post-reactions {
+  height: 80%;
+  max-height: 350px;
+  overflow: auto;
+  margin-top: 5px;
+}
+
+#post-info,
+#post-info-sneaky {
+  text-align: center;
+  z-index: 10;
+
+  margin-top: -33px;
+
+  #post-info-container {
+    @include info-container();
+  }
+
+  .well {
+    -webkit-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
+    -moz-box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
+    box-shadow: inset 0 2px 2px rgba(0,0,0,0.10);
+
+    margin: 5px;
+    padding: 5px;
+    text-align: left;
+
+    max-height: 20px;
+    overflow: hidden;
+
+    background: {
+      color: #222;
+      color: rgba(0,0,0,0.2);
+    }
+
+    border: {
+      left: 1px solid #444;
+      right: 1px solid #444;
+      bottom: 1px solid #555;
+      top: 1px solid #111;
+    }
+
+    .img {
+      margin-right: 5px;
+    }
+
+    i {
+      margin-top: 1px;
+    }
+
+    .avatar {
+      @include border-radius();
+      margin-right: 0;
+    }
+  }
+
+  #post-comments {
+    text-align: left;
+    padding-top: 0;
+  }
+
+  #new-post-comment {
+    -webkit-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
+    -moz-box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
+    box-shadow: 0 -3px 6px -5px rgba(0,0,0,0.8);
+
+    border-top: 1px solid #444;
+    text-align: left;
+    background-image: image-url("hatched-bg-dark.png");
+  }
+
+  #new-post-comment-container {
+    position: relative;
+
+    padding: 10px;
+
+    textarea{
+      height: 18px;
+      width: 318px;
+    }
+
+    form {
+      margin-bottom: 0;
+    }
+
+    .btn {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+    }
+  }
+}
+
+#post-info-sneaky {
+  @include transition(all, 0.2s);
+
+  z-index: 1;
+  position: fixed;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  bottom: 0;
+
+  margin-bottom: -60px;
+  min-height: 20px;
+
+  #post-info-container-sneaky {
+    @include info-container();
+
+    padding: 10px 0;
+    min-height: 20px;
+  }
+}
+
+.home-button {
+  @include transition(opacity, 0.3s);
+  @include opacity(0.6);
+
+  position: absolute;
+  left: 2px;
+  top: 4px;
+
+  padding: 4px 6px;
+
+  &:hover {
+    @include opacity(1);
+  }
+}
+
+.invoker {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+#post-feedback:hover {
+  #post-info-sneaky:not(.passive) {
+    @include opacity(1);
+    margin-bottom: -13px;
+  }
+}
+
+.comment-content h1, .comment-content h2, .comment-content h3, .comment-content h4, .comment-content h5, .comment-content h6 {
+  color: white;
+  text-shadow: 1px 1px black;
+  text-rendering: optimizelegibility;
+}
+
+.post-comment {
+  -moz-box-shadow: 0 1px 2px -2px #999;
+  -webkit-box-shadow: 0 1px 2px -2px #999;
+  box-shadow: 0 1px 2px -2px #999;
+
+  border-bottom: 1px solid #333;
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  &:last-child {
+    box-shadow: none;
+    border-bottom: none;
+  }
+
+  padding: 10px;
+  padding-right: 40px;
+  margin: 0px;
+
+  .avatar {
+    @include border-radius();
+
+    border: {
+      top: 1px solid #222;
+      right: 1px solid #444;
+      left: 1px solid #444;
+      bottom: 1px solid #666;
+    }
+  }
+
+  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
+
+  a:hover {
+    color: #99CCFF
+  }
+
+  time {
+    color: #666;
+    font-size: smaller;
+  }
+
+  .controls {
+    @include transition(opacity);
+    @include opacity(0);
+
+    float: right;
+    margin-right: -40px;
+
+    a {
+      padding: 3px 5px;
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &:hover {
+    .controls {
+      @include opacity(0.4);
+
+      &:hover {
+        @include opacity(1);
+      }
+    }
+  }
+}
+
+.permalink-wrapper,
+#user-controls {
+  height: 30px;
+
+  .avatar {
+    vertical-align: top;
+    height: 27px;
+    width: 27px;
+  }
+
+  a {
+    @include opacity(0.6);
+    @include transition(opacity, 0.3s);
+
+    position: relative;
+
+    z-index: 20;
+
+    padding: 5px;
+    margin-right: 5px;
+    line-height: 24px;
+
+    padding-top: 3px;
+    padding-right: 2px;
+
+    i {
+      padding: 0;
+      margin: 0;
+    }
+
+    color: #fff;
+
+    &.label {
+      @include box-shadow(0, 0, 2px, rgba(255,255,255,0.9));
+      background-color: #000;
+    }
+
+    &.comment {
+      padding-right: 5px;
+      margin-right: 0;
+    }
+
+    &:hover {
+      @include opacity(1);
+      text-decoration: none;
+    }
+  }
+}
+
+#post-feedback {
+/* fixes flicker on hover... no idea as to why */
+  position: relative;
+  z-index: 30;
+}
+
+#close-reactions-pane {
+  display: none;
+
+  text-align: center;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: -3px;
+
+  #close-reactions-pane-container {
+    @include pane-width();
+    top: 0;
+
+    min-height: 30px;
+    display: inline-block;
+    position: relative;
+  }
+}
+
+#post-interactions.active #close-reactions-pane {
+  display: block;
+}
+
+.info-tick {
+  @include opacity(0.8);
+
+  position: absolute;
+  right: 8px;
+  top: 8px;
+}
+
+
+/* stream specific wrapper */
+#stream-interactions {
+  position : fixed;
+  top : 0;
+  bottom : 0;
+  overflow-y : auto;
+
+  #post-info {
+    text-align : left;
+    margin-top : 10px;
+  }
+
+  #user-controls {
+    padding : 7px;
+  }
+}
+
+.permalink-wrapper {
+  float : right;
+  margin-top : 9px;
+  margin-right : -5px;
+  margin-left : 4px;
+}

app/assets/stylesheets/new_styles/_landing.scss

@@ -0,0 +1,113 @@
+/* le declarations */
+#landing {
+  overflow : hidden;
+  position : absolute;
+  min-height : 100%;
+  width : 100%;
+  top : 0;
+  left : 0;
+
+  background : {
+    color : #fff;
+  }
+
+  #sign_up {
+    text-align:center;
+    position : relative;
+    z-index : 20;
+
+    border-bottom: 1px solid #ccc;
+    padding-bottom:50px;
+
+    form {
+      label.control-label { width : 80px !important; text-align:right; }
+      .controls { margin-left : 100px; }
+
+      input[type='submit'] {
+        @include transition(background);
+        @include box-shadow(0,0,0,0);
+
+        font-size:1.2em;
+        background : #99CC00;
+        color : #fff;
+        text-shadow : 0 -1px 0 #669900;
+        border : 1px solid #999;
+
+        &:hover {
+          background : desaturate(#99CC00, 15%);
+        }
+
+        &:active {
+          @include box-shadow(0,0,0,0);
+          background : darken(rgb(255, 77, 54), 2%);
+        }
+      }
+    }
+  }
+
+  #invites {
+    margin : 20px 0;
+  }
+
+  #footer {
+    position : absolute;
+    bottom : 0;
+    left : 0;
+    width : 100%;
+    padding : 10px 0;
+    color : #333;
+    text-align : center;
+  }
+
+  #landing_banner {
+    .container {
+      position:relative;
+    }
+
+    text-align:center;
+    padding:50px;
+    margin-bottom:50px;
+    color:#ccc;
+    background:#222;
+
+    h2 {
+      font-weight:100;
+    }
+
+    .landing-logo {
+      margin-bottom:15px;
+      height:60px;
+    }
+
+    .landing-banner-right {
+      position:absolute;
+      right:0;
+
+      a {
+        color:#ccc;
+        font-size:1.2em;
+        font-weight:100;
+        padding:5px 10px;
+      }
+    }
+
+    .login-button {
+      @include border-radius(3px);
+      border:1px solid #666;
+      background:#111;
+
+      &:hover {
+        background:#222;
+        border:1px solid #999;
+        text-decoration:none;
+      }
+    }
+  }
+
+  #steps {
+    text-align: center;
+    p {
+      color:#666;
+    }
+  }
+}

app/assets/stylesheets/new_styles/_login.scss

@@ -0,0 +1,28 @@
+#login {
+  position : absolute;
+  top : 0;
+  left : 0;
+  padding-top : 200px;
+  min-width : 100%;
+
+  //color : #fff;
+  text-align : center;
+
+  input[type=text],
+  input[type=password] {
+    width : 120px;
+  }
+
+  #huge-text {
+    font-family : Roboto-Light;
+    font-size : 200px;
+    color : #ddd;
+    text-shadow : 0 1px 0 #fff;
+  }
+
+  #forgot_password_link {
+    margin : 40px;
+    color : #999;
+    clear : all;
+  }
+}

app/assets/stylesheets/new_styles/_new_mixins.scss

@@ -0,0 +1,86 @@
+$light-grey: #999;
+$pane-width: 420px;
+$night-background-color : #333;
+$night-text-color : #999;
+
+/* mixins */
+@mixin center($orient:vertical) {
+  display: -webkit-box;
+  -webkit-box-orient: $orient;
+  -webkit-box-pack: center;
+  -webkit-box-align: center;
+
+  display: -moz-box;
+  -moz-box-orient: $orient;
+  -moz-box-pack: center;
+  -moz-box-align: center;
+
+  display: box;
+  box-orient: $orient;
+  box-pack: center;
+  box-align: center;
+}
+
+@mixin pane-width() {
+  width: $pane-width;
+  max-width: 100%;
+}
+
+@mixin background-cover() {
+  background: no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+@mixin info-container-base() {
+  @include box-shadow(0, 6px, 20px, #000);
+  @include dark-hatched-bg();
+
+  border-top: 1px solid #555;
+  color: #ddd;
+}
+
+@mixin info-container() {
+  @include info-container-base();
+  @include border-radius(3px, 0px);
+  @include pane-width();
+
+  display: inline-block;
+  position: relative;
+
+  border-right: 1px solid #444;
+  border-left: 1px solid #444;
+
+  padding-top: 25px;
+
+/* webkit acceleration */
+  -webkit-transform: translateZ(0);
+}
+
+@mixin dark-hatched-bg() {
+  background-color: #444;
+  background-image: image-url("texture/hatched-dark.png");
+}
+
+@mixin photo-shadow() {
+  @include box-shadow(0, 3px, 15px, rgba(0,0,0,0.7));
+}
+
+@mixin media-text() {
+  font-size: 2em; 
+  line-height: 1.2em;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+@mixin newspaper-type() {
+  font-family: Palatino, times, georgia, serif;
+}
+
+@mixin centered-frame(){
+  display: table-cell;
+  vertical-align: middle;
+  text-align: center;
+}

app/assets/stylesheets/new_styles/_registration.scss

@@ -0,0 +1,42 @@
+#registration {
+  position : absolute;
+  top : 0;
+  left : 0;
+  background-color : #afc652;
+  min-height : 100%;
+  min-width : 100%;
+
+  color : #fff;
+
+  .container {
+    margin-top : 100px;
+  }
+
+  #create-something-text {
+    font-family : Roboto-Light;
+    font-size : 100px;
+    line-height : 100px;
+    white-space : nowrap;
+  }
+
+  #diaspora-hearts {
+    font-family : Roboto-Light;
+    font-size : 24px;
+    margin-top : 0.2em;
+    margin-bottom : 1em;
+    white-space : nowrap;
+  }
+
+  #sign-up-text {
+    font-family : Roboto-Bold;
+    color : #7f9448;
+    margin-bottom : 0.5em;
+  }
+
+  #collage {
+    width : 344px;
+    height : auto;
+
+    max-width : 95%;
+  }
+}

app/assets/stylesheets/new_styles/_spinner.scss

@@ -0,0 +1,52 @@
+@-webkit-keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-webkit-keyframes spin {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@-moz-keyframes fade-in {
+  0%   { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@-moz-keyframes spin {
+  0%   { -moz-transform: rotate(0deg); }
+  100% { -moz-transform: rotate(360deg); }
+}
+
+#paginate, #infscr-loading {
+  margin-top: 10px;
+  padding: 8px 0;
+  text-align: center;
+  width: 100%;
+  display: block;
+  clear: both;
+}
+
+.loaded {
+  -webkit-animation: fade-in 0.16s linear;
+  -moz-animation: fade-in 0.16s linear;
+}
+
+.loader {
+  -webkit-mask-image: image-url('static-loader.png');
+  -webkit-animation: spin 1s infinite ease-in-out,
+  fade-in 0.2s ease-in;
+  -moz-animation: spin 1s infinite ease-in-out,
+  fade-in 0.2s ease-in;
+
+  background-image : image-url("static-loader.png");
+
+  display: inline-block;
+  width : 14px;
+  height: 14px;
+
+  &.hidden{
+    display : none;
+  }
+}
+

app/assets/stylesheets/new_styles/_typography.scss

@@ -0,0 +1,27 @@
+/* Roboto */
+@font-face {
+  font-family : Roboto;
+  src : image-url('fonts/Roboto-Regular.ttf');
+  weight : normal;
+}
+
+@font-face {
+  font-family : Roboto-Bold;
+  src : image-url('fonts/Roboto-Bold.ttf');
+  weight : normal;
+}
+
+@font-face {
+  font-family : Roboto-Light;
+  src : image-url('fonts/Roboto-Light.ttf');
+  weight : normal;
+}
+
+body, p, h1, h2, h3, h4, h5, h6, textarea, input, * {
+  font-family : Roboto, Helvetica, sans-serif;
+  font-weight : normal;
+}
+
+a {
+  font-family : inherit;
+}

app/assets/stylesheets/new_styles/_variables.scss

@@ -0,0 +1,22 @@
+$container-width : 1170;
+
+$margin-between-columns : 30;
+$column-width : 295 - $margin-between-columns;
+$raw-two-column-width : ($column-width * 2) + ($margin-between-columns * 2) ;
+$two-column-width : $raw-two-column-width - 30;  //simply subtract an arbitrary ammount :)
+
+$margin-between-rows : 20;
+
+$row-height : $column-width;
+$two-row-height : $raw-two-column-width - 20;
+
+/* colors : http://www.colourlovers.com/palette/2134203/Awezome_in_argyle */
+$cyan : rgb(8,204,249);
+$yellow : rgb(242,244,9);
+$green : rgb(29,235,134);
+$purple : rgb(220,23,166);
+$lime-green : rgb(143, 199,10);
+$orange : rgb(237, 165, 13);
+$red : rgb(246, 68, 60);
+$turquoise : rgb(8, 224, 173);
+$sand : rgb(245, 239, 237);

app/assets/stylesheets/new_styles/_viewer_nav.scss

@@ -0,0 +1,71 @@
+@import '../mixins';
+
+#post-nav {
+  @include transition(opacity, 0.5s);
+  @include opacity(1);
+}
+
+body.idle {
+  #post-nav {
+    @include opacity(0);
+
+    .nav-arrow{
+      &.right {
+        margin-right: -40px;
+      }
+
+      &.left {
+        margin-left: -40px;
+      }
+    }
+
+  }
+}
+
+.nav-arrow {
+  @include opacity(0.8);
+  @include transition(all, 0.3s);
+
+  display: table;
+
+  position: fixed;
+  height: 100%;
+  z-index: 3;
+  top: 0;
+  padding: 0 1.2%;
+
+  background-color: rgba(0,0,0,0);
+
+  .nav-arrow-inner {
+    padding: 0; margin: 0;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  img {
+    @include opacity(0.5);
+
+    height: 30px;
+    width: 30px;
+
+  /* half the size of the nav arrows on mobile phones */
+    @media (max-width: 480px) {
+      height: 15px;
+      width: 15px;
+    }
+  }
+
+  &.left {
+    left: 0;
+    padding-right: 19px;
+  }
+
+  &.right {
+    right: 0;
+    padding-left: 19px;
+  }
+
+  &:hover {
+    background-color: rgba(0,0,0,0.1)
+  }
+}