Merge pull request #2526 from awesomerobot/master

adding some topic layout flexibility

app/assets/stylesheets/desktop/topic-post.scss

@@ -52,18 +52,12 @@ h1 .topic-statuses .topic-status i {
 
 .reply-to-tab {
   position: absolute;
-  right: 430px;
+  right: 40%;
   z-index: 400;
   padding: 13px 6px 5px;
-  border-top: 1px solid scale-color-diff();
   font-size: 12px;
   color: scale-color($primary, $lightness: 50%);
-  @include medium-width {
-    right: 320px;
-  }
-  @include small-width {
-    right: 280px;
-  }
+
 }
 
 .gutter {
@@ -258,29 +252,36 @@ nav.post-controls {
   h1, h2, h3 {margin: 10px 0;}
   a.mention {background: darken(scale-color-diff(), 10%);}
 
-  .topic-body { width: 610px; border: none; }
+  .topic-body {
+     width: 84%;
+     padding-left: 1%;
+     padding-right: 1%;
+     }
+
+  .topic-avatar {
+     width: 45px;
+     margin: 0 10px;
+
+  }
+
+
 
   // bottom means "reply expansion" below a post
   &.bottom {
     &.hidden {display: block; opacity: 0; }
   }
   &.bottom .arrow {float: right; margin: 0 0 0 0;}
-  &.bottom { margin-top: -11px;}
+  &.bottom {
+  margin-top: -11px;
+}
 
   // top means "in reply to expansion" above a post
   &.top {
-    margin-left: 66px;
-    max-width: 713px;
-    @include medium-width {
-    margin-left: 59px;
-    }
-    @include small-width {
-    margin-left: 57px;
-    max-width: 720px;
-    }
+    margin-left: 5.4594229%;
+    width: 62.6690712%;
+
   }
   &.top.topic-body {padding-left: 0;}
-    .topic-avatar {border: none; padding-left: 15px;}
     .post-date {color: scale-color($primary, $lightness: 50%);}
     .fa-arrow-up {margin-left: 5px;}
     .row {border-top: 1px solid darken(scale-color-diff(), 10%); padding-top: 7px;}
@@ -550,9 +551,6 @@ text-overflow: ellipsis;
   }
 }
 
-
-
-
 .extra-info {
   h1 {
     margin: 5px 0 0 0;
@@ -731,9 +729,8 @@ blockquote > *:last-child {
 .gutter {
   float: left;
   margin-top: 15px;
-  padding-left: 15px;
-  /* urgent fix, must set max width or long gutter width float flows under posts */
-  max-width: 215px;
+  padding-left: 01.3525699%;
+  width: 28%;
 
   ul {margin: 0;}
   li {margin-bottom: 10px;}
@@ -762,22 +759,24 @@ blockquote > *:last-child {
 }
 
 .topic-body {
-  width: 695px;
+  width: 62.6690712%;
   float: left;
   position: relative;
   border-top: 1px solid scale-color-diff();
-  padding: 12px 0 15px 0;
+  padding: 12px .5% 15px .5%;
   &.highlighted {
     background-color: scale-color($tertiary, $lightness: 85%);
   }
   img:not(.avatar), svg {
-    max-width: 100%;
+    max-width: 100% !important;
+    height: auto !important;
   }
 }
 .topic-avatar {
  border-top: 1px solid scale-color-diff();
  padding-top: 16px;
- width: 55px;
+ width: 04.9594229%;
+ min-width: 45px;
  float: left;
 
  .wiki {
@@ -1087,3 +1086,36 @@ and (max-width : 870px) {
     }
   }
 }
+
+@media only screen
+and (max-width : 850px) {
+
+  .gutter {
+    display: none;
+    }
+  #topic-progress, #topic-progress-expanded {
+    left: 210px;
+  }
+
+  .topic-avatar {
+    width: 5%;
+  }
+
+  .post-cloak .reply-to-tab {
+      right: 15%;
+    }
+
+  .topic-body {
+      width: 92%;
+      padding-left: 1%;
+    }
+
+  .embedded-posts {
+    // top means "in reply to expansion" above a post
+    &.top {
+      margin-left: 6%;
+      width: 93%;
+
+    }
+  }
+}