css: replace more css with tailwind-style classes.

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

@@ -119,6 +119,7 @@ $spacer: 0.25rem; /* 4px */
 .mt-8  { margin-top: 8 * $spacer; }
 
 .mb-2  { margin-bottom: 2 * $spacer; }
+.mb-3  { margin-bottom: 3 * $spacer; }
 .mb-4  { margin-bottom: 4 * $spacer; }
 .mb-8  { margin-bottom: 8 * $spacer; }
 
@@ -171,6 +172,7 @@ $spacer: 0.25rem; /* 4px */
 .w-600px { width: 600px; }
 
 .min-w-0 { min-width: 0; }
+.min-w-4 { min-width: 4 * $spacer; }
 
 .max-w-full { max-width: 100%; }
 .max-h-full { max-height: 100%; }
@@ -205,7 +207,11 @@ $spacer: 0.25rem; /* 4px */
 .space-x-1 > * + * { margin-left: 1 * $spacer; }
 .space-x-2 > * + * { margin-left: 2 * $spacer; }
 .space-x-4 > * + * { margin-left: 4 * $spacer; }
+
+.space-y-2 > * + * { margin-top: 2 * $spacer; }
 .space-y-4 > * + * { margin-top: 4 * $spacer; }
+.space-y-8 > * + * { margin-top: 8 * $spacer; }
+.space-y-12 > * + * { margin-top: 12 * $spacer; }
 
 .gap-1 { gap: 1 * $spacer; }
 .gap-2 { gap: 2 * $spacer; }

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

@@ -1,50 +1,5 @@
-@import "../base/000_vars";
-
-div#c-comments {
-  div#a-index {
-    div.header {
-      margin-bottom: 1em;
-
-      span.info {
-        margin-right: 1.5em;
-      }
-
-      strong, time {
-        margin-right: 0.3em;
-      }
-    }
-
-    div.post {
-      display: flex;
-      margin-bottom: 4em;
-    }
-  }
-}
-
-form.edit_comment div.input.boolean {
-  display: inline-block;
-
-  label {
-    font-weight: normal;
-    vertical-align: initial;
-  }
-}
-
-@media screen and (max-width: 660px) {
-  div#c-comments div#a-index, div#c-comments div#a-show {
-    div.post {
-      display: block;
-      margin: 2em 0;
-
-      &:first-of-type {
-        margin: 1em 0;
-      }
-
-      div.preview {
-        margin: 1em auto;
-        width: auto;
-        height: auto;
-      }
-    }
+div#c-comments div#a-index, div#c-comments div#a-show {
+  .post .post-preview {
+    display: flex;
   }
 }

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

@@ -1,13 +1,4 @@
 div#c-forum-topics {
-  td.status-column {
-    white-space: nowrap;
-    text-align: right;
-  }
-
-  td.creator-column, td.updated-by-column {
-    white-space: nowrap;
-  }
-
   a.topic-status {
     margin-right: 0.25em;
 
@@ -53,24 +44,4 @@ div#c-forum-topics {
       &:hover { background-color: var(--forum-topic-status-rejected-color); }
     }
   }
-
-  #a-index {
-    .updated-at-column {
-      white-space: nowrap;
-    }
-
-    .creator-column, .updated-by-column, .updated-at-column {
-      @media screen and (max-width: 660px) {
-        display: none;
-      }
-    }
-  }
-}
-
-#c-forum-posts #a-index {
-  tr[data-topic-is-deleted="true"] .forum-post-topic-title::after,
-  tr[data-is-deleted="true"] .forum-post-excerpt::after {
-    content: " (deleted)";
-    color: var(--muted-text-color);
-  }
 }

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

@@ -1,15 +0,0 @@
-div#c-static {
-  div#a-keyboard-shortcuts {
-    section.column {
-      min-width: 25em;
-
-      ul {
-        margin-bottom: 2em;
-      }
-
-      li {
-        margin-bottom: 0.5em;
-      }
-    }
-  }
-}

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

@@ -1,21 +1,9 @@
 div#c-uploads {
   div#a-show {
-    .artist-commentary {
-      margin-top: 1em;
-    }
-
-    .commentary-translation {
-      margin-top: 1em;
-    }
-
     div#upload-guide-notice {
       margin-bottom: 2em;
     }
 
-    ul#links {
-      margin-bottom: 1em;
-    }
-
     div#related-posts-by-source, div#iqdb-similar {
       display: inline-block;
     }
@@ -38,10 +26,4 @@ div#c-uploads {
       margin-top: 1em;
     }
   }
-
-  div#a-index {
-    .info {
-      margin-right: 1.5em;
-    }
-  }
 }