css: adjust comment / forum post layout on mobile.

* Remove borders around comments.
* Remove background behind commenter name / timestamp.
* Put timestamp on same line as commenter name.

app/javascript/src/styles/base/040_colors.css

@@ -65,8 +65,6 @@
   --forum-vote-up-color: green;
   --forum-vote-meh-color: goldrenrod;
   --forum-vote-down-color: red;
-  --forum-post-border: 1px solid #DDD;
-  --forum-post-author-background: #EEE;
   --forum-post-highlight-background-color: #FFC;
 
   --comment-sticky-background-color: var(--subnav-menu-background-color);
@@ -337,8 +335,6 @@ body[data-user-theme="dark"] {
   --forum-vote-up-color: var(--green-1);
   --forum-vote-meh-color: var(--yellow-1);
   --forum-vote-down-color: var(--red-1);
-  --forum-post-border: 1px solid var(--grey-3);
-  --forum-post-author-background: var(--grey-3);
   --forum-post-highlight-background-color: var(--blue-0);
 
   --jquery-ui-widget-content-text-color: var(--text-color);

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

@@ -128,29 +128,38 @@ form.edit_comment div.input.boolean {
 @media screen and (max-width: 660px) {
   div.comments-for-post div.list-of-comments article.comment {
     display: block;
-    margin-top: 1em;
-    padding: 0;
-    border: var(--forum-post-border);
+    margin-top: 3em;
+    padding: 5px;
 
     div.author {
-      margin: 0;
-      padding: 1em;
-      border-bottom: var(--forum-post-border);
-      background: var(--forum-post-author-background);
-    }
+      margin: 0 0 1em;
 
-    div.content {
-      padding: 1em;
+      h4 {
+        display: inline;
+        margin-right: 0.5em;
+      }
+
+      time {
+        display: inline;
+        color: var(--muted-text-color);
+        font-size: 0.8em;
+      }
     }
   }
 
   div#c-comments div#a-index, div#c-comments div#a-show {
+    margin: 0 0.5em;
+
     div.post {
       display: block;
-      margin: 0;
+      margin: 4em 0;
+
+      &:first-of-type {
+        margin: 1em 0;
+      }
 
       div.preview {
-        margin: 2em auto;
+        margin: 1em auto;
         width: auto;
         height: auto;
       }
@@ -159,11 +168,11 @@ form.edit_comment div.input.boolean {
         div.header div.row span.info {
           display: block;
         }
-
-        div.new-comment {
-          margin: 1em 0;
-        }
       }
     }
   }
+
+  div.new-comment {
+    margin: 1em 0;
+  }
 }

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

@@ -93,18 +93,21 @@ div#c-forum-topics {
 
   div.list-of-forum-posts article.forum-post {
     display: block;
-    margin-top: 1em;
-    border: var(--forum-post-border);
+    margin-top: 3em;
 
     div.author {
-      margin: 0;
-      padding: 1em;
-      border-bottom: var(--forum-post-border);
-      background: var(--forum-post-author-background);
-    }
+      margin: 0 0 1em;
 
-    div.content {
-      padding: 1em;
+      h4 {
+        display: inline;
+        margin-right: 0.5em;
+      }
+
+      time {
+        display: inline;
+        color: var(--muted-text-color);
+        font-size: 0.8em;
+      }
     }
   }
 }