css: switch comments and forum posts to flexbox.

app/javascript/src/styles/specific/comments.scss

@@ -1,15 +1,13 @@
 @import "../base/000_vars.scss";
 
 div.comments-for-post {
-  div.notices {
-    margin: 1em 0;
-  }
-
   div.list-of-comments {
     article.comment {
+      display: flex;
       margin-bottom: 2em;
       word-wrap: break-word;
       padding: 5px;
+      flex: 1;
 
       &[data-is-sticky="true"] {
         background: var(--comment-sticky-background-color);
@@ -36,9 +34,7 @@ div.comments-for-post {
       }
 
       div.author {
-        width: 12em;
-        float: left;
-        overflow: hidden;
+        flex-basis: 12em;
         margin-right: 1em;
 
         h1 {
@@ -48,8 +44,7 @@ div.comments-for-post {
       }
 
       div.content {
-        margin-left: 13em;
-        min-width: 17em;
+        flex: 1;
 
         menu {
           li {
@@ -61,12 +56,6 @@ div.comments-for-post {
   }
 }
 
-div#c-posts {
-  div.comments-for-post {
-    float: left;
-  }
-}
-
 div#c-comments {
   div#a-index, div#a-show {
     div.header {
@@ -83,15 +72,6 @@ div#c-comments {
       }
     }
 
-    div.preview {
-      float: left;
-      width: 154px;
-      height: 154px;
-      margin-right: 30px;
-      overflow: hidden;
-      text-align: center;
-    }
-
     div.post-preview {
       &[data-tags~=animated], &[data-file-ext=swf], &[data-file-ext=webm], &[data-file-ext=zip], &[data-file-ext=mp4] {
         div.preview {
@@ -115,24 +95,19 @@ div#c-comments {
     }
 
     div.post {
+      display: flex;
       margin-bottom: 4em;
 
-      div.comments-for-post {
-        margin-left: 184px;
-        min-width: 30em;
-        
-        div.list-of-comments {
-          float: left;
-          width: 100%;
-        }
+      div.preview {
+        width: 154px;
+        height: 154px;
+        margin-right: 30px;
+        overflow: hidden;
+        text-align: center;
       }
-    }
-    
-    div.comments-for-post {
-      div.post {
-        article.comment {
-          margin-left: 184px;
-        }
+
+      div.comments-for-post {
+        flex: 1;
       }
     }
   }

app/javascript/src/styles/specific/forum.scss

@@ -1,6 +1,7 @@
 div.list-of-forum-posts {
   article {
-    margin: 1em 0em;
+    display: flex;
+    margin-top: 3em;
     word-wrap: break-word;
 
     a.voted {
@@ -24,9 +25,7 @@ div.list-of-forum-posts {
     }
 
     div.author {
-      padding: 1em 1em 0 1em;
-      width: 12em;
-      float: left;
+      flex-basis: 13em;
 
       time {
         font-style: italic;
@@ -34,8 +33,7 @@ div.list-of-forum-posts {
     }
 
     div.content {
-      padding: 1em;
-      margin-left: 14em;
+      flex: 1;
 
       .edit_forum_post, .edit_forum_topic {
         display: none;
@@ -91,20 +89,18 @@ div#c-forum-topics {
   }
 
   div.list-of-forum-posts article {
+    display: block;
+    margin-top: 1em;
     border: var(--forum-post-border);
 
-    div.author, div.content {
-      width: auto;
-      float: none;
-    }
-
     div.author {
+      padding: 1em 1em 0;
       border-bottom: var(--forum-post-border);
       background: var(--forum-post-author-background);
     }
 
     div.content {
-      margin-left: 0;
+      padding: 1em;
     }
   }
 }

app/javascript/src/styles/specific/posts.scss

@@ -391,10 +391,6 @@ div#c-posts {
       right: 5px;
       cursor: pointer;
     }
-    
-    div.comments-for-post {
-      width:100%
-    }
 
     #artist-commentary {
       border: var(--post-artist-commentary-container-border);

app/javascript/src/styles/specific/z_responsive.scss

@@ -224,7 +224,6 @@
 
   div#page {
     div.comments-for-post div.list-of-comments article.comment div.content {
-      clear: both;
       margin: 0;
     }
   }