Merge branch 'betastrip' of git://github.com/DeadSuperHero/diaspora

app/assets/javascripts/app/pages/framer.js

-//= require ../views/post/small_frame
-
-app.pages.Framer = app.views.Base.extend({
-  templateName : "flow",
-
-  id : "post-content",
-
-  subviews : {
-    ".flow-content" : "framerContent",
-    ".flow-controls .controls" : "framerControls"
-  },
-
-  initialize : function(){
-    this.model = app.frame
-    if(!this.model.get("frame_name")) this.model.setFrameName()
-
-    this.model.authorIsCurrentUser = function(){ return true }
-    this.model.bind("sync", this.navigateNext, this)
-
-    this.framerContent = new app.views.framerContent({model : this.model})
-    this.framerControls = new app.views.framerControls({model : this.model})
-  },
-
-  unbind : function(){
-    this.model.off()
-  },
-
-  navigateNext : function(){
-    if(parent.location.pathname == '/new_bookmarklet') {
-      this.bookmarkletNavigation()
-    } else {
-      this.defaultNavigation()
-    }
-  },
-
-  bookmarkletNavigation : function() {
-    parent.close()
-  },
-
-  defaultNavigation : function() {
-    var url = app.currentUser.expProfileUrl()
-    app.router.navigate(url, {trigger: true, replace: true})
-  }
-});
-
-app.views.framerContent = app.views.Base.extend({
-  templateName : "framer-content",
-
-  events : {
-    "change input" : "setFormAttrs"
-  },
-
-  subviews : {
-    ".preview" : "smallFrameView",
-    ".template-picker" : 'templatePicker'
-  },
-
-  formAttrs : {
-    "input.mood:checked" : "frame_name"
-  },
-
-  initialize : function(){
-    this.model.bind("change:frame_name", this.render, this)
-  },
-
-  smallFrameView : function() {
-    return new app.views.Post.EditableSmallFrame({model : this.model})
-  },
-
-  presenter : function() {
-    var selectedFrame = this.model.get("frame_name")
-      , templates = this.model.applicableTemplates();  //new app.models.Post.TemplatePicker(this.model).frameMoods;
-
-    return _.extend(this.defaultPresenter(), {
-      templates : _.map(templates, function(template) {
-        return {
-          name : template,
-          checked : selectedFrame === template
-        }
-      })
-    })
-  }
-});
-
-app.views.Post.EditableSmallFrame = app.views.Post.SmallFrame.extend({
-  className : "canvas-frame editable",
-
-  events : {
-    "keyup [contentEditable]" : "setFormAttrs"
-  },
-
-  formAttrs : {
-    ".text-content p" : "text"
-  },
-
-  postRenderTemplate : function(){
-    this.$(".text-content p").attr("contentEditable", true)
-  }
-});
-
-app.views.framerControls = app.views.Base.extend({
-  templateName : 'framer-controls',
-
-  events : {
-    "click input.done" : "saveFrame",
-    "click input.back" : "editFrame",
-    "change input" : "setFormAttrs"
-  },
-
-  subviews:{
-    ".aspect-selector" : "aspectsDropdown",
-    ".service-selector" : "servicesSelector"
-  },
-
-  formAttrs : {
-    "input.aspect_ids" : "aspect_ids[]",
-    "input.services" : "services[]"
-  },
-
-  initialize : function(){
-    this.aspectsDropdown = new app.views.AspectsDropdown({model:this.model});
-    this.servicesSelector = new app.views.ServicesSelector({model:this.model});
-  },
-
-  saveFrame : function(){
-    this.setFormAttrs()
-    if(this.inValidFrame()) {
-      return false;
-    } 
-    this.$('input').prop('disabled', 'disabled')
-    this.model.save()
-
-    this.trackPost()
-  },
-
-  trackPost : function() {
-    var model = this.model
-
-    app.instrument("track", "Posted", {
-      text : model.hasText(),
-      photos : model.hasPhotos(),
-      template : model.get("frame_name")
-    })
-  },
-
-  inValidFrame : function(){
-    return (this.model.get('text').trim().length == 0)  && (this.model.get('photos').length == 0)
-  },
-
-  editFrame : function(){
-    app.router.renderPage(function(){return new app.pages.Composer({model : app.frame})})
-    app.router.navigate("/posts/new")
-  }
-});

app/assets/javascripts/app/pages/profile.js

-//= require ../views/profile_info_view
-
-app.pages.Profile = app.views.Base.extend({
-  templateName : "profile",
-  id : "profile",
-
-  subviews : {
-    "#profile-info" : "profileInfo",
-    "#canvas" : "canvasView",
-    "#wallpaper-upload" : "wallpaperForm",
-    "#composer" : "composerView"
-  },
-
-  events : {
-    "click #edit-mode-toggle" : "toggleEdit",
-    "click #logout-button" : "logOutConfirm",
-    "click #composer-button" : "showComposer"
-  },
-
-  tooltipSelector : "*[rel=tooltip]",
-
-  personGUID : null,
-  editMode : false,
-  composeMode : false,
-
-  initialize : function(options) {
-    this.personGUID = options.personId
-
-    this.model = this.model || app.models.Profile.preloadOrFetch(this.personGUID)
-    this.stream = options && options.stream || new app.models.Stream()
-    this.stream.preloadOrFetch()
-
-    this.initViews()
-
-    /* binds */
-    this.stream.items.bind("remove", this.pulsateNewPostControl, this)
-    $(window).on("keydown", _.bind(this.closeComposer, this))
-  },
-
-  initViews : function(){
-    this.canvasView = new app.views.Canvas({ model : this.stream })
-    this.wallpaperForm = new app.forms.Wallpaper()
-    this.profileInfo = new app.views.ProfileInfo({ model : this.model })
-    this.composerView = new app.pages.Composer();
-  },
-
-  render :function () {
-    var self = this;
-    this.model.deferred
-      .done(function () {
-        self.setPageTitleAndBackground()
-        app.views.Base.prototype.render.call(self)
-      })
-      .done(function () {
-        self.stream.deferred.done(_.bind(self.pulsateNewPostControl, self));
-      })
-
-    return self
-  },
-
-  presenter : function(){
-    var bio =  this.model.get("bio") || ''
-
-    return _.extend(this.defaultPresenter(),
-      {text : this.model && app.helpers.textFormatter(bio, this.model) })
-  },
-
-  pulsateNewPostControl : function() {
-    this.$("#composer-button")[
-      this.stream.items.length == 0
-        ? 'addClass'
-        : 'removeClass'
-      ]("pulse")
-  },
-
-  setPageTitleAndBackground : function() {
-    console.log(this.model.attributes)
-    if(this.model.get("name")) {
-      document.title = this.model.get("name")
-      this.$el.css("background-image", "url(" + this.model.get("wallpaper") + ")")
-    }
-  },
-
-  toggleEdit : function(evt) {
-    if(evt) { evt.preventDefault() }
-    this.editMode = !this.editMode
-    this.$el.toggleClass("edit-mode")
-  },
-
-  showComposer : function(evt) {
-    if(evt) { evt.preventDefault() }
-
-    this.toggleComposer()
-    this.$("#post_text").focus()
-
-    app.router.navigate("/posts/new")
-  },
-
-  closeComposer : function(evt) {
-    if(!evt) { return }
-
-    if(this.composeMode && evt.keyCode == 27) {
-      this.toggleComposer()
-      evt.preventDefault()
-
-      // we should check for text and fire a warning prompt before exiting & clear the form
-      app.router.navigate(app.currentUser.expProfileUrl(), {replace : true})
-    }
-  },
-
-  toggleComposer : function(){
-    this.composeMode = !this.composeMode
-    $("body").toggleClass("lock")
-
-    if(!this.composeMode) {
-      this.$("#composer").toggleClass("zoom-out")
-      setTimeout('this.$("#composer").toggleClass("hidden").toggleClass("zoom-out")', 200)
-    } else {
-      this.$("#composer").toggleClass("hidden")
-    }
-    this.$("#composer").toggleClass("zoom-in")
-  },
-
-  logOutConfirm : function(evt) {
-    if(!confirm("Are you sure you want to log out?"))
-      evt.preventDefault();
-  },
-});

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

-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)
-  },
-
-  postRenderTemplate : function() {
-    this.$("#header").css("background-image", "url(" + app.currentUser.get("wallpaper") + ")")
-   _.defer(function(){$('body').scrollspy({target : '.stream-frame-wrapper', offset : 205})})
-  },
-
-  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 + "?ex=true&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/app/views/canvas_view.js

-app.views.Canvas = app.views.InfScroll.extend({
-  initialize: function(){
-    this.stream = this.model
-    this.collection = this.stream.items
-    this.postClass = app.views.Post.CanvasFrame
-    this.postViews = []
-    this.setupInfiniteScroll()
-    this.stream.bind("reLayout", this.reLayout, this)
-    this.stream.bind("fetched", this.triggerRelayoutAfterImagesLoaded, this)
-  },
-
-  renderTemplate : function() {
-    this.stream.deferred.done(_.bind(function(){
-      if(this.stream.items.isEmpty()){
-        var message
-          , person = app.page.model
-        if(person.get("is_own_profile")){
-          message = "Make something to start the magic."
-        } else {
-          var name = person.get("name") || ""
-          message = name + " hasn't posted anything yet."
-        }
-
-        this.$el.html("<p class='no-post-message'>" + message + "</p>")
-      } else {
-        this.renderInitialPosts()
-      }
-
-      //needs to be deferred so it happens after html rendering finishes
-      _.defer(_.bind(this.mason, this))
-    }, this))
-  },
-
-  addPostView : function(post) {
-    _.defer(_.bind(function(){ this.$el.isotope("insert", this.createPostView(post).render().$el) }, this))
-  },
-
-  mason : function() {
-    var el = this.$el;
-
-    /* make two calls to isotope
-       1) on dom ready
-       2) on images ready
-     */
-    triggerIsotope(el) && el.imagesLoaded(_.bind(function(){
-      this.reLayout()
-    },this))
-
-    function triggerIsotope(element) {
-      return element.isotope({
-        itemSelector : '.canvas-frame',
-        visibleStyle : {scale : 1},
-        hiddenStyle : {scale : 0.001},
-        containerStyle : {position : "relative"},
-        masonry : {
-          columnWidth : 292.5
-        }
-      })
-    }
-  },
-
-  triggerRelayoutAfterImagesLoaded : function(){
-    //event apparently only fires once
-    this.$el.imagesLoaded(_.bind(this.reLayout, this))
-  },
-
-  reLayout : function(){
-    this.$el.isotope("reLayout")
-  }
-});

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

-@import 'mixins';
-@import 'new_styles/new_mixins';
-@import 'new_styles/variables';
-
-/* core */
-@import 'new_styles/flash_messages';
-
-/* custom animations */
-@import 'new_styles/animations';
-
-/* mainly for the post viewer & composer */
-@import 'new_styles/base';
-@import 'new_styles/composer';
-@import 'new_styles/interactions';
-@import 'new_styles/viewer_nav';
-
-/* profile */
-@import 'new_styles/canvas';
-@import 'new_styles/spinner';
-@import 'new_styles/profile';
-
-/* font overrides */
-@import 'new_styles/typography';
-
-/* isotope */
-@import 'new_styles/isotope_transitions';
-
-/* login */
-@import 'new_styles/login';
-@import 'new_styles/registration';
-@import 'new_styles/landing';
-
-@import 'new_styles/forms';
-
-
-@include video-overlay();
\ No newline at end of file

app/assets/stylesheets/new_styles/_animations.scss

-@-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; }
-}
\ No newline at end of file

app/assets/stylesheets/new_styles/_base.scss

-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/_canvas.scss

-@mixin wide() {
-  width : $two-column-width + px;
-}
-
-a.logo{
-text-decoration: none;
-color: white;
-  &:hover{
-    text-decoration: none;
-    color: white;
-    cursor: pointer;
-  }
-}
-.no-post-message {
-  text-align: center;
-  margin-top: 50px;
-  font-size: 1.2em;
-}
-
-.canvas-frame {
-  float : left;
-  margin : 10px;
-  margin-bottom : 18px;
-
-  max-width : 100%;
-
-  /* expand / contract cursor declarations */
-  &.x2 .content {
-    cursor : nw-resize;
-    cursor : -moz-zoom-out;
-    cursor : -webkit-zoom-out;
-  }
-  .content {
-    cursor : nwse-resize;
-    cursor : -moz-zoom-in;
-    cursor : -webkit-zoom-in;
-  }
-
-  .content {
-    /* default height to be overridden */
-    min-height : $column-width + px;
-  }
-
-  &.has-media .content {
-    min-height : 0;
-  }
-
-  .content {
-    @include transition(-webkit-transform);
-    @include box-shadow(0, 8px, 50px, rgba(0,0,0,0.9));
-
-    background-image : image_url("texture/paper.jpg");
-
-    &:hover {
-      .info {
-        top : 0;
-      }
-    }
-
-    &:active {
-      -webkit-transform : scale(0.99);
-    }
-
-    img {
-      border : none;
-    }
-
-    //hax to deal with markdownify
-    p {
-      font-size: inherit;
-      line-height: inherit;
-    }
-
-    position : relative;
-
-    background-color : #fff;
-
-    width : $column-width + px;
-    max-width : 100%;
-
-    overflow : hidden;
-
-    /* used in masking photos with overflow: hidden; */
-    .image-container {
-      overflow : hidden;
-      width : 100%;
-
-      img {
-        width: 100%;
-        max-width : 100%;
-      }
-    }
-  }
-
-  .embed-frame {
-    .thumb {
-      position : relative;
-    }
-    img  {
-      width: 100%;
-    }
-
-    iframe {
-      height : 100%;
-      width : 100%;
-      max-height: 222px;
-    }
-  }
-
-  .controls{
-    position : absolute;
-    z-index : 100;
-    top : 10px;
-    right : 10px;
-
-    display : none;
-
-    .edit-mode & {
-      display : inline-block;
-    }
-
-    a, span {
-      display : inline-block;
-      background-size : 30px 30px;
-      height : 30px;
-      width : 30px;
-      text-decoration : none;
-    }
-
-    .delete {
-      background-image : image_url('buttons/delete.png');
-
-      &:hover {
-        background-image : image_url('buttons/delete_hover.png');
-      }
-    }
-  }
-
-  .info {
-    @include transition(top);
-    @include box-shadow(0,1px,3px,rgba(0,0,0,0.3));
-    @include opacity(0.8);
-
-    cursor : pointer;
-
-    background-color : rgba(255,255,255,0.8);
-    border-bottom : 1px solid #fff;
-
-    color : #000;
-
-    position : absolute;
-    top : -32px;
-    right : 0;
-    text-align : center;
-    width : 100%;
-
-    z-index : 30;
-
-    padding : 5px 0;
-
-    &:hover {
-      @include opacity(0.9);
-    }
-
-    i {
-      margin-left:  3px;
-    }
-
-    .avatar {
-      position : absolute;
-      top : 0;
-      left : 0;
-
-      height : 29px;
-      width : 29px;
-    }
-
-    .timestamp,
-    .permalink {
-      margin : 1px 7px;
-    }
-
-    .timestamp {
-      float : left;
-      margin-top : 2px;
-    }
-
-    .permalink {
-      cursor : pointer;
-      float : right;
-    }
-  }
-
-  .background-color {
-    height : 100%;
-    width : 100%;
-    position: absolute;
-    top : 0;
-    left : 0;
-  }
-
-  .text-content {
-    position : relative;
-    z-index : 10;
-    color : #000;
-
-    text-shadow : 0 2px 0 rgba(#fff,0.6), 0 -1px 2px rgba(#555, 0.1);
-    font-size : 1.5em;
-    line-height : 1.2em;
-
-    /* I'D DO ANYTHING FOR TEXT, BUT I WON'T DO THAT (see: http://www.youtube.com/watch?v=9GNhdQRbXhc) */
-    max-height : 485.5px;
-
-    img {
-      max-width: 100%;
-      width: 100%;
-    }
-
-    p {
-      word-break : break-word;
-    }
-
-    p:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &.cyan .background-color   { background-color : rgba($cyan, 0.2); }
-  &.green .background-color  { background-color : rgba($green, 0.2); }
-  &.yellow .background-color { background-color : rgba($yellow, 0.2); }
-  &.purple .background-color { background-color : rgba($purple, 0.2); }
-  &.lime-green .background-color { background-color : rgba($lime-green, 0.2); }
-  &.orange .background-color { background-color : rgba($orange, 0.2); }
-  &.red .background-color { background-color : rgba($red, 0.2); }
-  &.turquoise .background-color { background-color : rgba($turquoise, 0.2); }
-  &.sand .background-color { background-color : rgba($sand, 0.8); }
-
-  &.blog-text {
-    .text-content {
-      padding : 10px;
-      color : #222;
-
-      p {
-        text-shadow : none;
-
-        font-family : Palatino, Georgia, Times, serif;
-        font-weight : normal;
-        font-size : 0.8em;
-        line-height : 1.5em;
-        text-align : justify;
-      }
-    }
-  }
-
-  &:no-text {
-    img {
-      border : none;
-    }
-  }
-
-  &:not(.wallpaper) {
-    img {
-      border-bottom : 1px solid #ddd;
-    }
-
-    .text-content {
-      padding : 20px;
-      font-size : 14px;
-      line-height : 18px;
-      color : #444;
-    }
-  }
-
-  &.editable:not(.has-media),
-  &.big-text {
-    .text-content {
-      display : table;
-      height : 225px;
-      width : 225px;
-      margin: 0px auto;
-      
-      p {
-        display : table-cell;
-        vertical-align : middle;
-
-        font-size : 2.0em;
-        line-height : 1.1em;
-        text-align : center;
-      }
-    }
-  }
-
-  &.editable:not(.has-media) p {
-    min-width : 225px;
-    min-height : 225px;
-  }
-
-  &.x2.big-text .text-content {
-    width : $two-column-width - 40 + px;
-  }
-
-  /* larger declarations */
-  &.x2.width .content { @include wide(); }
-
-  &.sticky-note.x2.height  .content {
-    min-height : $two-row-height + px;
-  }
-
-  &.wallpaper {
-    .image-container {
-      background-color: black;
-    }
-
-    &.has-text{
-      img {
-        //image container background is black, lowering opacity darkens image
-        @include opacity(0.7);
-      }
-    }
-
-    .text-content {
-      position: absolute;
-      left: 0;
-      width: 100%;
-      top: 40%;
-      @include centered-frame();
-      font-size: 2em;
-      color: white;
-
-      p {
-        text-shadow : none;
-        padding : 0 10px;
-      }
-    }
-  }
-
-  /* new styles go! */
-  &.typist {
-    .content {
-      background : {
-        image : image_url("texture/typist.png");
-        color : transparent;
-      }
-    }
-
-    .background-color {
-      display : none;
-    }
-
-    p {
-      font-family : "American Typewriter", "Courier";
-      letter-spacing : 1.5px;
-      font-size : 0.9em;
-      color : #111;
-    }
-  }
-
-  &.fridge {
-    p {
-      font : {
-        family : "Noteworthy", "Marker Felt", "Comic Sans";
-        style : italic;
-      }
-      font-size : 2em;
-      line-height : 1.4em;
-    }
-  }
-
-  &.vanilla {
-    .content {
-      background :{
-        color : #fff;
-        image : image_url("texture/vanilla.jpg");
-      }
-    }
-
-    .background-color {
-      display : none;
-    }
-
-    p {
-      color : #111;
-      text-shadow : none;
-      font : {
-        weight : normal;
-        family : Roboto-Light;
-      }
-    }
-  }
-}
-
-/* new stream overrides */
-#stream {
-  color : #fff;
-  background-color : #222;
-
-  .background {
-    @include box-shadow(-2px, 0, 7px, rgba(0,0,0,0.8));
-    @include dark-hatched-bg();
-
-    position : fixed;
-    height : 100%;
-    width : 100%;
-  }
-
-
-  #stream-interactions,
-  #stream-content {
-    padding-top : 90px;
-  }
-}
-
-#stream-content {
-  .stream-frame {
-    .stream-frame-wrapper {
-      position: relative; //interactions scroll spy gets confused about div height when there are images without this line.
-    }
-    margin-bottom : 40px;
-
-    .stream-frame-feedback {
-      float : right;
-      margin-top : 8px;
-    }
-
-    .photo-backdrop .text-content p,
-    .status-with-photo-backdrop .text-content p {
-      color: #111;
-    }
-
-    .canvas-frame {
-      .info {
-        display : none;
-      }
-    }
-
-    /* a media box object */
-    .author {
-      margin : 0;
-
-      .bd {
-        margin-top : 11px;
-      }
-    }
-
-    .selected-frame {
-      .content {
-        border: 10px solid red;
-      }
-    }
-  }
-
-  .canvas-frame {
-    width: 100%;
-    margin : 0;
-    float : none;
-
-    .content {
-      width: 100%;
-
-      /* cursor overrides */
-      cursor : pointer;
-    }
-  }
-}
-
-/* responsive */
-@media (max-width: 767px) {
-  body {
-    padding : 0;
-  }
-
-  .canvas-frame {
-    width : 100%;
-    margin-left : 0;
-    margin-right : 0;
-
-    margin-bottom : 10px;
-
-    .content {
-      font-size : 0.9em;
-      margin : 0;
-      width : auto !important;
-    }
-  }
-}

app/assets/stylesheets/new_styles/_composer.scss

-#composer.zoom-in #framer {
-  -webkit-animation: ease-over 0.2s;
-  -moz-animation: ease-over 0.2s;
-  -ms-animation: ease-over 0.2s;
-}
-
-#composer.zoom-out #framer {
-  -webkit-animation: ease-out 0.2s;
-  -moz-animation: ease-out 0.2s;
-  -ms-animation: ease-out 0.2s;
-}
-
-#composer #framer {
-  padding-top : 100px;
-}
-
-#framer {
-  color : #fff;
-  background-color : rgba(0,0,0,0.8);
-
- background-image : image_url("texture/hatched-dark.png");
-
-  z-index : 200;
-
-  text-align : left;
-
-  position : absolute;
-  left : 0;
-  top : 0;
-
-  height : 100%;
-  width : 100%;
-
-  overflow : auto;
-
-  .new_picture{
-    margin-top: 4%;
-  }
-
-  .photos{
-    margin-top: 5px;
-  }
-
-  input[disabled] {
-      background: inherit;
-  }
-
-  textarea#post_text{
-    height: 100px;
-    padding : 10px;
-  }
-
-  .template-picker {
-    float : left;
-    margin-left : 10px;
-    margin-right : -100px; // prevent the picker from being bumped down under the frame.
-
-    input {
-      display : none;
-    }
-
-
-    label {
-      @include transition(background-color);
-      @include border-radius();
-
-      display : inline-block;
-
-      cursor : pointer;
-
-      margin-right: 11px;
-      padding: 7px;
-      color: #999;
-      font-size: 14px;
-      line-height: 2em;
-
-      &:hover {
-        img {
-          border : 4px solid rgba(255,255,255,1);
-        }
-      }
-
-      .template-name {
-        text-align : center;
-        text-transform : uppercase;
-      }
-
-      img {
-        @include border-radius(5px);
-        @include transition(border);
-
-        border : 4px solid transparent;
-        background-color : #ddd;
-
-        height : 54px;
-        width : 54px;
-      }
-    }
-
-    input:checked + label {
-      .template-name {
-        color : $link-blue;
-      }
-
-      img {
-        border : 4px solid $link-blue;
-      }
-    }
-  }
-
-  .preview {
-    .canvas-frame {
-      margin-left : 0;
-
-      &:hover {
-        [contentEditable] {
-          @include box-shadow(0,0,5px,$link-blue);
-        }
-      }
-
-      [contentEditable]:focus {
-        @include box-shadow(0,0,0,rgba(0,0,0,0));
-        outline : none;
-      }
-    }
-
-    .content {
-      cursor : auto;
-
-      &:active {
-        -webkit-transform : none;
-      }
-
-      .info {
-        display : none;
-      }
-    }
-  }
-
-  .flow-controls {
-    padding: 20px 0;
-    max-height: 68px;
-
-    .aspect-selector {
-      display : inline-block;
-
-      .aspects_dropdown {
-        display : inline-block;
-      }
-
-      form {
-        margin: 0
-      }
-
-      i, input {
-        display: none;
-      }
-
-      input:checked + label i {
-        display: inline-block;
-        position: absolute;
-        left : 3px;
-        margin-top : 1px;
-      }
-
-      label {
-        margin : 0;
-        padding : 5px 0;
-
-        &:hover {
-          background-color : #eee;
-        }
-
-        span:not(.caret) {
-          padding-left: 21px;
-        }
-      }
-    }
-
-    .service-selector {
-      display : inline-block;
-    }
-
-    .dropdown-menu {
-      text-align: left;
-    }
-  }
-
-  // this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
-  // if you change this, check toggling the new publisher service broadcasts is still sensible
-  // the checkbox should be hidden, and in the off state the service icons should be lighter
-  // when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
-  .magic-service-selector {
-    margin : 0;
-
-    label { display : inline; }
-
-    img {
-      @include transition(opacity);
-      @include box-shadow(0,0,0,0);
-
-      cursor : pointer;
-      height : 70px;
-      width : 54px;
-    }
-
-    input:not(:checked) + label {
-      img {
-        @include opacity(0.4);
-      }
-    }
-
-    input:checked + label {
-      &:hover img {
-        @include opacity(1);
-      }
-    }
-
-    input {
-      display : none;
-    }
-  }
-}
-
-input[type="image"] {
-  height : 70px;
-  width : 70px;
-
-  &:active {
-    -webkit-transform : scale(0.95);
-       -moz-transform : scale(0.95);
-        -ms-transform : scale(0.95);
-  }
-}
-
-.flow-controls {
-  text-align : center;
-}
-
-.new_photo .photo{
-  display: inline;
-  max-width: 240px;
-  max-height: 240px;
-  padding: 2px;
-}
-
-#photo_upload_button {
-  position: relative;
-  margin-bottom : 9px;
-
-  input{
-    @include opacity(0);
-    position: absolute;
-    top: 0;
-    left: 0;
-    height:100%;
-    cursor : pointer;
-  }
-}
\ No newline at end of file

app/assets/stylesheets/new_styles/_flash_messages.scss

-
-@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);
-  }
-}
\ No newline at end of file

app/assets/stylesheets/new_styles/_forms.scss

-/* 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);
-  }
-}
\ No newline at end of file

app/assets/stylesheets/new_styles/_interactions.scss

-@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;
-}
\ No newline at end of file

app/assets/stylesheets/new_styles/_isotope_transitions.scss

-/* Start: Recommended Isotope styles */
-
-/**** Isotope Filtering ****/
-
-.isotope-item {
-  z-index: 2;
-}
-
-.isotope-hidden.isotope-item {
-  pointer-events: none;
-  z-index: 1;
-}
-
-/**** Isotope CSS3 transitions ****/
-
-.isotope,
-.isotope .isotope-item {
-  -webkit-transition-duration: 0.4s;
-  -moz-transition-duration: 0.4s;
-  -ms-transition-duration: 0.4s;
-  -o-transition-duration: 0.4s;
-  transition-duration: 0.4s;
-}
-
-.isotope {
-  -webkit-transition-property: height, width;
-  -moz-transition-property: height, width;
-  -ms-transition-property: height, width;
-  -o-transition-property: height, width;
-  transition-property: height, width;
-}
-
-.isotope .isotope-item {
-  -webkit-transition-property: -webkit-transform, opacity;
-  -moz-transition-property:    -moz-transform, opacity;
-  -ms-transition-property:     -ms-transform, opacity;
-  -o-transition-property:         top, left, opacity;
-  transition-property:         transform, opacity;
-}
-
-/**** disabling Isotope CSS3 transitions ****/
-
-.isotope.no-transition,
-.isotope.no-transition .isotope-item,
-.isotope .isotope-item.no-transition {
-  -webkit-transition-duration: 0s;
-  -moz-transition-duration: 0s;
-  -ms-transition-duration: 0s;
-  -o-transition-duration: 0s;
-  transition-duration: 0s;
-}
-
-/* End: Recommended Isotope styles */
-
-
-
-/* disable CSS transitions for containers with infinite scrolling*/
-.isotope.infinite-scrolling {
-  -webkit-transition: none;
-  -moz-transition: none;
-  -ms-transition: none;
-  -o-transition: none;
-  transition: none;
-}

app/assets/stylesheets/new_styles/_landing.scss

-/* 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

-#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

-$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/_profile.scss

-#profile {
-  min-height : 100%;
-
-  color : #fff;
-  background : {
-    color : #333;
-
-    /* The background-image property will be user-generated and set in `app.pages.Profile` (app/assets/javascripts/app/pages/profile.js)
-       and should ONLY be set once the image is fully loaded.
-
-       Optimal imagemagick manipulation settings for uploaded image (via trial & error):
-
-       `mogrify -brightness-contrast -40x-50`
-
-       NOTE: I noticed that just turning the brightness down had an adverse affect on contrast,
-       thus the "washing out" at -50 contrast.  For more info on this specific command, read the documentation
-       on it here: http://www.imagemagick.org/script/command-line-options.php#brightness-contrast */
-
-    size : cover;
-    attachment : fixed;
-  }
-}
-
-/* getting started pulse animation */
-#composer-button.pulse {
-  -webkit-animation: opacity-pulse 1s infinite;
-  -moz-animation:    opacity-pulse 1s infinite;
-  -ms-animation:     opacity-pulse 1s infinite;
-}
-
-/* functionality under edit mode */
-.edit-mode {
-  #edit-mode-toggle.control {
-    @include opacity(1);
-  }
-
-  .canvas-frame .info {
-    display : none;
-  }
-}
-
-#profile-header {
- text-align : center;
- padding : 50px;
- padding-bottom : 0;
-}
-
-.profile-image-container {
-  border-radius: 140px;
-  border : 3px solid #fff;
-  box-shadow : 0 0 2px rgba(0,0,0,0.5), 0 0 10px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.5), inset 0 -2px 4px rgba(255,255,255,0.3);
-  background-size: cover;
-
-  height : 140px;
-  width : 140px;
-  background : {
-    position : center;
-    image : image-url('user/default.png');
-  }
-
-  display : inline-block;
-
-  margin-bottom : 5px;
-
-  &.small {
-    height : 40px;
-    width : 40px;
-    border : 2px solid #fff;
-  }
-
-  &.smaller {
-    height : 34px;
-    width : 34px;
-    border : 2px solid #ccc;
-  }
-
-  &.micro {
-    height : 24px;
-    width : 24px;
-    border : 2px solid #fff;
-  }
-}
-
-#profile-controls {
-  text-align : right;
-  padding : 10px 16px;
-
-  /* when our buttons aren't there, we still want to maintain a persistent height */
-  min-height : 40px;
-
-  .control {
-    @include transition(opacity);
-    @include opacity(0.6);
-    @include border-radius(3px);
-    @include box-shadow(0, 1px, 2px, rgba(0,0,0,0.8));
-
-    font-family : Roboto-Bold;
-    color : #ccc;
-
-    position : relative;
-    top : 11px;
-
-    background-color : #000;
-    border : 1px solid #666;
-
-    padding : 10px;
-    padding-top : 10px;
-    margin-left : 8px;
-
-    &#composer-button {
-      position : relative;
-      font-size : 14px;
-      line-height : 14px;
-      padding-bottom : 8px;
-      padding-top : 9px;
-      padding-right : 8px;
-    }
-
-    &#edit-mode-toggle {
-      top : 10px;
-      padding-bottom : 10px;
-      img {
-        margin-top : -5px;
-      }
-    }
-
-    img {
-      height : 16px;
-    }
-
-    &:hover {
-      @include opacity(1);
-      background-color : #000;
-      text-decoration : none;
-    }
-
-    &:active {
-      @include opacity(0.8);
-    }
-  }
-}
-
-#profile-stats {
-  i {
-    @include transition(opacity);
-    @include opacity(0.7);
-  }
-
-  a:hover {
-    text-decoration : none;
-  }
-
-  a:hover > i,
-  a:hover > img
-  {
-    @include opacity(1);
-  }
-
-  .divider {
-    color : #999;
-  }
-
-  .cake {
-    @include opacity(0.63);
-
-    width : 11px;
-    height : 15px;
-
-    margin-right : 2px;
-    position : relative;
-    top : -3px;
-  }
-
-  .stat {
-    margin : 10px 5px;
-
-    &.services {
-      .service {
-        position : relative;
-        margin-right : 2px;
-        top : -2px;
-
-        img {
-          @include transition(opacity);
-          @include opacity(0.5);
-
-          height : 14px;
-          width : 14px;
-        }
-
-        & > img:hover {
-          @include opacity(1);
-        }
-
-        &:hover {
-          text-decoration : none;
-        }
-
-        &:last-child {
-          margin-right : 0;
-        }
-      }
-    }
-  }
-}
-
-#profile-bio {
-  display : none;
-
-  margin-top : 20px;
-  text-align : center;
-
-  p {
-    color : #777;
-    display : inline-block;
-    width : $two-column-width + px;
-    text-align : center;
-  }
-}
-
-/* responsive */
-@media (max-width: 767px) {
-  #profile {
-    background-size : 767px;
-  }
-
-  .profile-image-container {
-    height : 100px;
-    width : 100px;
-    border-width : 2px;
-  }
-
-  #profile-controls {
-    display : none;
-  }
-
-  #profile-header {
-    padding : 20px;
-  }
-
-  #wallpaper-upload,
-  .edit-control {
-    display : none;
-  }
-}
\ No newline at end of file

app/assets/stylesheets/new_styles/_registration.scss

-#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%;
-  }
-}
\ No newline at end of file

app/assets/stylesheets/new_styles/_spinner.scss

-@-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;
-  }
-}
-