improve new SPV

* Hopefully fix OEmbed view
* Fix OpenGraph view
* Fix middle border
* Add spacing at the bottom
* Fix comment styles by not including old SPV styles for them (TODO: maybe rescue some stuff there, like the code tag styling)
* Fix avatar size for default avatar
* Remove border below comment pane
* Fix overflow of post body with a lot of text
* Fix stylesheet inclusion

app/assets/stylesheets/_mixins.css.scss

@@ -108,6 +108,9 @@ $default-border-radius: 3px;
 }
 
 @mixin video-overlay(){
+  position: relative;
+  cursor: pointer;
+
   .video-overlay {
     background : {
       color: rgba(0,0,0, .65);

app/assets/stylesheets/application.css.sass

@@ -1,11 +1,13 @@
 @import 'compass'
-@import 'ui.css.scss'
-@import '_mixins.css.scss'
-@import '_flash_messages.scss'
+@import 'ui'
+@import '_mixins'
+@import '_flash_messages'
 @import 'new_styles/_spinner'
-@import 'sidebar.css.scss'
-@import 'header.css.scss'
-@import 'sprites.css.scss'
+
+@import 'sidebar'
+@import 'header'
+@import 'sprites'
+@import 'opengraph'
 
 /* ====== media ====== */
 .media
@@ -1592,32 +1594,11 @@ ul#press_logos
       :width 100%
 
       .thumb
-        :position relative
-        :cursor pointer
         @include video-overlay()
 
       iframe, .thumb img
         :width 100%
 
-    .opengraph
-      :width 100%
-      a
-        :display block
-        :text-decoration none
-        :color #000
-        :margin 10px 0px 10px 0px
-        :border-top solid 1px #DDD
-        :border-bottom solid 1px #DDD
-        :padding 10px 0px 5px 0px
-        :overflow hidden
-
-        img
-          :margin 0px 5px 5px 0px
-          :float left
-          :max-width 155px
-        .og-title
-          :margin-bottom 5px
-
 .conversation_participants
   :background
     :color $background

app/assets/stylesheets/default.css

@@ -10,5 +10,4 @@
 *= require vendor/facebox
 *= require vendor/fileuploader
 *= require vendor/autoSuggest
-*= require single-post-view
 */

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

@@ -4,11 +4,9 @@
 
 /* core */
 @import 'new_styles/flash_messages';
-@import 'sprites.css.scss';
-@import 'header.css.scss';
+@import 'sprites';
 
 @import 'new_styles/base';
-@import 'new_styles/interactions';
 @import 'new_styles/viewer_nav';
 
 /* font overrides */
@@ -21,5 +19,8 @@
 
 @import 'new_styles/forms';
 
-
-@include video-overlay();
+/* new SPV */
+@import 'header';
+@import 'bootstrap-headerfix';
+@import 'opengraph';
+@import 'single-post-view';

app/assets/stylesheets/opengraph.css.scss

@@ -0,0 +1,24 @@
+.opengraph {
+  width: 100%;
+
+  a {
+    display: block;
+    text-decoration: none;;
+    color: #000;
+    margin: 10px 0px 10px 0px;
+    border-top: solid 1px #DDD;
+    border-bottom: solid 1px #DDD;
+    padding: 10px 0px 5px 0px;
+    overflow: hidden;
+
+    img {
+      margin: 0px 5px 5px 0px;
+      float: left;
+      max-width: 155px;
+    }
+
+    .og-title {
+      margin-bottom: 5px;
+    }
+  }
+}

app/assets/stylesheets/single-post-view.css.sass

@@ -1,10 +1,15 @@
 #single-post-container
   padding-top: 20px
+  padding-bottom: 3em
+
 #single-post-content
   #head
     color: #aaa
     font-size: 12px
   #author
+    .img
+      max-width: 25%
+    .avatar
     .bd
       padding-left: 10px
   border-right: solid 1px #ccc
@@ -12,6 +17,7 @@
   #body
     margin-left: 20px
     padding-top: 20px
+    width: auto
     .photo_attachments
       padding-bottom: 10px
       img
@@ -21,21 +27,40 @@
         padding-bottom: 5px
         max-width: 90%
 
+    .oembed
+      background: image-url('ajax-loader2.gif') no-repeat center center
+      float: left
+      width: 95%
+
+      .thumb
+        @include video-overlay()
+
+      iframe, .thumb img
+        width: 100%
+        min-height: 60%
+
 #single-post-interactions
+  border-left: 1px solid #ccc
+  position: relative
+  left: -1px
+  margin-left: 0
+  padding-left: 2.5%
   #likes, #reshares, #comments-meta
     padding-bottom: 5px
   .comment
     border-bottom: solid 1px #ccc
     padding-top: 10px
     padding-bottom: 10px
+
     p
       margin: 0
   textarea
     width: 95%
+  .new_comment_form_wrapper
+    border-bottom: none
   a
     color: #3f8fba
   .timeago
     color: #aaaaaa
     text-decoration: none
     font-size: smaller
-

app/helpers/layout_helper.rb

@@ -56,8 +56,7 @@ module LayoutHelper
 
   def include_base_css_framework(use_bootstrap=false)
     if use_bootstrap || @aspect == :getting_started
-      stylesheet_link_tag('bootstrap-complete') +
-      stylesheet_link_tag('bootstrap-headerfix')
+      stylesheet_link_tag('bootstrap-complete')
     else
       stylesheet_link_tag 'blueprint', :media => 'screen'
     end