css: factor out shared forum post / comment css.

app/javascript/src/styles/common/messages.scss

@@ -0,0 +1,53 @@
+div.list-of-messages {
+  margin: 1em 0;
+
+  article.message {
+    display: flex;
+    margin-top: 2em;
+    word-wrap: break-word;
+    padding: 5px;
+
+    &:first-of-type {
+      margin-top: 1em;
+    }
+
+    div.author {
+      flex-basis: 12em;
+      margin-right: 1em;
+
+      time {
+        font-style: italic;
+      }
+    }
+
+    div.content {
+      flex: 1;
+
+      menu {
+        li {
+          margin-right: 1em;
+        }
+      }
+    }
+
+    @media (max-width: 660px) {
+      display: block;
+      margin-top: 3em;
+
+      div.author {
+        margin: 0 0 1em;
+
+        h4 {
+          display: inline;
+          margin-right: 0.5em;
+        }
+
+        time {
+          display: inline;
+          color: var(--muted-text-color);
+          font-size: 0.8em;
+        }
+      }
+    }
+  }
+}

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

@@ -7,16 +7,8 @@ div.comments-for-post {
 
   div.list-of-comments {
     article.comment {
-      display: flex;
-      margin-top: 2em;
-      word-wrap: break-word;
-      padding: 5px;
       flex: 1;
 
-      &:first-of-type {
-        margin-top: 1em;
-      }
-
       &[data-is-sticky="true"] {
         background: var(--comment-sticky-background-color);
       }
@@ -40,25 +32,6 @@ div.comments-for-post {
           opacity: 1.0;
         }
       }
-
-      div.author {
-        flex-basis: 12em;
-        margin-right: 1em;
-
-        time {
-          font-style: italic;
-        }
-      }
-
-      div.content {
-        flex: 1;
-
-        menu {
-          li {
-            margin-right: 1em;
-          }
-        }
-      }
     }
   }
 }
@@ -126,27 +99,6 @@ 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: 3em;
-    padding: 5px;
-
-    div.author {
-      margin: 0 0 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;
 
@@ -171,8 +123,4 @@ form.edit_comment div.input.boolean {
       }
     }
   }
-
-  div.new-comment {
-    margin: 1em 0;
-  }
 }

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

@@ -1,13 +1,5 @@
 div.list-of-forum-posts {
   article.forum-post {
-    display: flex;
-    margin-top: 2em;
-    word-wrap: break-word;
-
-    &:first-of-type {
-      margin-top: 1em;
-    }
-
     a.voted {
       font-weight: bold;
     }
@@ -24,18 +16,7 @@ div.list-of-forum-posts {
       color: var(--forum-vote-down-color);
     }
 
-    div.author {
-      flex-basis: 12em;
-      margin-right: 1em;
-
-      time {
-        font-style: italic;
-      }
-    }
-
     div.content {
-      flex: 1;
-
       .edit_forum_post, .edit_forum_topic {
         display: none;
       }
@@ -44,10 +25,6 @@ div.list-of-forum-posts {
         ul.votes {
           margin: 0.5em 0;
         }
-
-        li {
-          margin-right: 1em;
-        }
       }
     }
   }
@@ -86,24 +63,4 @@ div#c-forum-topics {
   #c-forum-topics #a-show {
     padding: 0 0.5em;
   }
-
-  div.list-of-forum-posts article.forum-post {
-    display: block;
-    margin-top: 3em;
-
-    div.author {
-      margin: 0 0 1em;
-
-      h4 {
-        display: inline;
-        margin-right: 0.5em;
-      }
-
-      time {
-        display: inline;
-        color: var(--muted-text-color);
-        font-size: 0.8em;
-      }
-    }
-  }
 }