css: refactor CSS to use Tailwind-style utility classes.

Refactor CSS to use standard Tailwind-style utility classes instead of
ad-hoc rules. This eliminates a lot of single-purpose rules for specific
UI elements and standardizes margins to be more consistent throughout
the site.

Utility classes are defined manually on an as-needed basis instead of
importing Tailwind as a whole. Naming conventions mostly follow
Tailwind's conventions, otherwise they follow Bootstrap.

* https://tailwindcss.com/docs/
* https://getbootstrap.com/docs/5.0/utilities/spacing/

app/components/tag_list_component/tag_list_component.html.scss

@@ -1,4 +1,8 @@
 .tag-list {
+  a.wiki-link {
+    margin-right: 0.25rem;
+  }
+
   a.search-tag {
     overflow-wrap: normal;
   }
@@ -11,9 +15,7 @@
     }
   }
 
-  &.categorized-tag-list {
+  ul {
-    ul {
+    margin-bottom: 1em;
-      margin-bottom: 1em;
-    }
   }
 }

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

@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 div#page {
   overflow: visible;
   margin: 0 20px;

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

@@ -13,17 +13,12 @@ table.striped {
     }
   }
 
-  .number, .links {
-    text-align: right;
-  }
-
   thead {
     tr {
       border-bottom: var(--table-header-border);
     }
 
     th {
-      font-weight: bold;
       text-align: left;
     }
   }
@@ -72,3 +67,11 @@ table.search, table.aligned-vertical {
 table.aligned-vertical {
   height: 1.75em;
 }
+
+table.table-sm {
+  th, td { padding: 0.25rem; }
+}
+
+table.table-md {
+  th, td { padding: 0.5rem; }
+}

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

@@ -0,0 +1,48 @@
+// A small set of utility classes, modeled after TailwindCSS and Bootstrap.
+//
+// https://tailwindcss.com/docs
+// https://getbootstrap.com/docs/5.0/utilities/spacing/
+
+$spacer: 0.25rem; /* 4px */
+
+.font-monospace { font-family: var(--monospace-font); }
+.font-bold { font-weight: bold; }
+
+.inline-block { display: inline-block; }
+.flex { display: flex; }
+
+.text-center { text-align: center; }
+
+.mx-auto { margin-left: auto; margin-right: auto; }
+.mx-2    { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
+
+.mt-2  { margin-top: 2 * $spacer; }
+.mt-4  { margin-top: 4 * $spacer; }
+
+.mb-2  { margin-bottom: 2 * $spacer; }
+.mb-4  { margin-bottom: 4 * $spacer; }
+
+.ml-4  { margin-left: 4 * $spacer; }
+
+.p-4  { padding: 4 * $spacer; }
+
+.w-1\/4 { width: 25%; }
+.w-full { width: 100%; }
+
+.h-10 { height: 10 * $spacer; }
+
+.space-x-4 > * + * { margin-left: 4 * $spacer; }
+.space-y-4 > * + * { margin-top: 4 * $spacer; }
+
+.align-top { vertical-align: top; }
+
+.flex-auto { flex: 1 1 auto; }
+.items-center { align-items: center; }
+
+@media screen and (min-width: 660px) {
+  .md\:inline-block { display: inline-block; }
+  .md\:flex { display: flex; }
+
+  .md\:space-x-8 > * + * { margin-left: 8 * $spacer; }
+  .md\:space-y-0 > * + * { margin-top: 0; }
+}

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

@@ -1,15 +0,0 @@
-div#c-artist-commentary-versions {
-  #a-index {
-    div.commentary-body-section {
-      padding: 0.5em;
-      margin-bottom: 0.5em;
-      border: var(--footer-border);
-    }
-
-    td.original-column,
-    td.translated-column {
-      padding-top: 0.5em;
-      vertical-align: top;
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-div#c-artists, div#excerpt {
-  .recent-posts h2 {
-    margin: 1em 0 0.5em;
-  }
-
-  div#a-index {
-    td {
-      height: 2.25em; /* should match .artist-other-name line-height */
-    }
-  }
-}

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

@@ -1,6 +1,3 @@
 ul.backtrace {
-  font: var(--monospace-font);
   background: var(--dtext-code-background);
-  padding: 1em;
-  margin-bottom: 1em;
 }

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

@@ -1,5 +0,0 @@
-#c-favorite-groups #a-edit {
-  textarea {
-    height: 10em;
-  }
-}

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

@@ -1,7 +0,0 @@
-#c-ip-addresses {
-  .ip-address-details, .ip-address-map {
-    display: inline-block;
-    margin-right: 2em;
-    vertical-align: top;
-  }
-}

app/javascript/src/styles/specific/mod_queue.scss.erb

@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 div#c-modqueue {
   div.post {
     padding: 1em;

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

@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 a.pool-category-series, .pool-category-series a {
   color: var(--series-pool-color);
 
@@ -16,51 +14,18 @@ a.pool-category-collection, .pool-category-collection a {
   }
 }
 
-div#add-to-pool-dialog {
-  font-size: 0.8em;
-
-  form {
-    margin-bottom: 1em;
-  }
-
-  li {
-    margin-left: 1em;
-    cursor: pointer;
-  }
-}
-
-div#c-pools {
-  textarea {
-    height: 10em;
-  }
-
-  div#a-show {
-    div#description {
-      margin-bottom: 1em;
-    }
-  }
-}
-
 div#c-pool-orders, div#c-favorite-group-orders {
   div#a-edit {
-    ul.ui-sortable {
+    ul.ui-sortable li {
-      list-style-type: none;
+      display: inline-block;
+      min-width: 150px;
 
-      li {
+      &, .post-preview a {
-        cursor: pointer;
+        cursor: move;
-        margin-right: 20px;
-        margin-bottom: 20px;
-        min-width: 150px;
-        min-height: 150px;
-        padding: 10px;
-        display: inline-block;
       }
 
-      li.ui-state-default {
+      &.ui-state-placeholder {
-        background: none;
+        border: none;
-      }
-
-      li.ui-state-placeholder {
         background: none;
       }
     }

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

@@ -7,10 +7,6 @@ body.c-post-versions.a-index {
     min-width: 2em;
   }
 
-  .advanced-search-link {
-    margin: 0 1em;
-  }
-
   ins.diff-obsolete a {
     color: var(--diff-list-obsolete-added-color);
     font-weight: bold;

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

@@ -22,14 +22,6 @@
   }
 }
 
-#saved-searches-nav {
-  margin-top: 1em;
-}
-
-#excerpt p.links {
-  margin-top: 1em;
-}
-
 #edit-dialog {
   /* Hide everything but the rating and tags fields. */
   .post_has_embedded_notes_fieldset, .post_lock_fieldset, .post_parent_id,
@@ -68,11 +60,6 @@
 div#c-posts {
   .fav-buttons {
     font-size: 14pt;
-    margin: 0.5em 0;
-
-    i {
-      margin-right: 0.1em;
-    }
 
     button.ui-button {
       padding: 0.25em 0.75em;
@@ -97,8 +84,6 @@ div#c-posts {
 
   #ugoira-controls {
     div#seek-slider {
-      margin-top: 0.5em;
-      float: right;
       overflow: visible;
       background: var(--ugoira-seek-slider-background);
 
@@ -107,24 +92,12 @@ div#c-posts {
       }
     }
 
-    #save-video-link {
-      margin: 0.5em 0;
-    }
-
-    button {
-      margin-top: 0.3em;
-    }
-
     #ugoira-load-progress {
       display: inline;
       margin-left: 17px;
     }
   }
 
-  .outer-recent-searches {
-    overflow: hidden;
-  }
-
   .post-notice {
     margin: 0.5em 0;
     padding: 0.5em;
@@ -144,40 +117,19 @@ div#c-posts {
     &.post-notice-search { background: var(--post-search-notice-background); }
   }
 
-  aside#sidebar > section > ul {
+  /* override default <button> tag styling */
-    margin-bottom: 1em;
+  #search-box-submit {
-
+    padding: 2px 6px;
-    a.wiki-link {
+    border-left: none;
-      margin-right: 0.3em;
+    border-radius: 0;
-    }
-  }
-
-  aside#sidebar > section > ul ul li {
-    margin-left: 1em;
-  }
-
-  #search-box-form {
-    display: flex;
-
-    input {
-      min-width: 0;
-      flex: 1;
-    }
-
-    #search-box-submit {
-      padding: 2px 6px;
-      border-left: none;
-      border-radius: 0;
-    }
   }
 
   div#a-index {
     menu#post-sections {
-      margin-bottom: 0.5em;
       font-size: var(--text-lg);
 
       li {
-        padding: 0 1em 0.5em 0;
+        padding: 0 1em 0 0;
 
         &.active {
           font-weight: bold;
@@ -191,12 +143,7 @@ div#c-posts {
       word-break: break-all;
     }
 
-    .recommended-posts {
-      margin-top: 1em;
-    }
-
     menu#post-sections {
-      margin: 0;
       font-size: var(--text-lg);
 
       li {
@@ -208,16 +155,11 @@ div#c-posts {
       margin: 1em 0 0.5em;
     }
 
-    textarea {
-      margin-bottom: 0.25em;
-    }
-
     #edit textarea {
       width: 100%;
     }
 
     #favlist {
-      margin-left: 1em;
       word-wrap: break-word;
     }
 
@@ -289,8 +231,6 @@ div#c-posts, div#c-uploads {
   /* Fetch source data box */
   div#source-info {
     border-radius: 4px;
-    margin: 1em 0;
-    padding: 1em;
     border: var(--fetch-source-data-border);
 
     &:not(.loading) #source-info-loading { display: none; }
@@ -338,31 +278,6 @@ div#c-posts, div#c-uploads {
   }
 }
 
-div#c-explore-posts {
-  a.desc {
-    font-weight: bold;
-    margin: 0 0.5em;
-  }
-
-  .date-nav-links {
-    text-align: center;
-  }
-
-  .period {
-    margin: 0 5em;
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-}
-
-div#unapprove-dialog {
-  p {
-    margin-bottom: 1em;
-  }
-}
-
 #add-commentary-dialog {
   input {
     width: 70%;

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

@@ -1,5 +0,0 @@
-#c-static #a-privacy-policy {
-  .summary {
-    font-style: italic;
-  }
-}

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

@@ -7,26 +7,12 @@ div#related-tags-container {
 }
 
 div.related-tags {
-  width: 100%;
-  margin-bottom: 1em;
-  padding: 1em;
   background: var(--related-tags-container-background);
   overflow: auto;
-  border-radius: 4px;
-  display: flex;
   flex-wrap: wrap;
 
-  div.user-related-tags-columns, div.current-related-tags-columns, div.source-related-tags-columns {
-    display: flex;
-  }
-
   div.tag-column {
     max-width: 15em;
-    margin-right: 2em;
-
-    &.is-empty-true {
-      display: none;
-    }
 
     &.wide-column {
       max-width: 45em;

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

@@ -1,15 +0,0 @@
-@import "../base/000_vars.scss";
-
-div#c-static {
-  div#a-site-map {
-    display: flex;
-
-    section {
-      flex: 1;
-
-      ul {
-        margin-bottom: 1.5em;
-      }
-    }
-  }
-}

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

@@ -1,26 +1,6 @@
 div#c-user-upgrades {
   div#a-new {
-    margin: 0 auto;
-
-    * {
-      margin-bottom: 1em;
-    }
-
-    h1 {
-      text-align: center;
-    }
-
     table#feature-comparison {
-      width: 100%;
-
-      th {
-        font-weight: bold;
-      }
-
-      colgroup {
-        width: 10em;
-      }
-
       colgroup#basic {
         background-color: var(--user-upgrade-basic-background-color);
       }
@@ -32,12 +12,6 @@ div#c-user-upgrades {
       colgroup#platinum {
         background-color: var(--user-upgrade-platinum-background-color);
       }
-
-      td, th {
-        text-align: center;
-        vertical-align: top;
-        padding: 0.5em 0;
-      }
     }
   }
 }

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

@@ -5,24 +5,10 @@ div#c-users {
     }
 
     table.user-statistics {
-      tr {
-        height: 1.75em;
-      }
-
       th {
         width: 15%;
         text-align: right;
         padding-right: 1em;
-        vertical-align: top;
-      }
-
-      td {
-        width: 85%;
-        vertical-align: top;
-      }
-
-      p {
-        margin-bottom: 0.5em;
       }
 
       .user-verified-email-icon {
@@ -36,14 +22,6 @@ div#c-users {
   }
 
   div#a-edit {
-    h1 {
-      margin: 0.5em 0;
-    }
-
-    h2 {
-      margin: 0.5em 0;
-    }
-
     div.input {
       margin-bottom: 2em;
     }

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

@@ -10,10 +10,4 @@ div#c-wiki-page-versions {
       text-decoration: none;
     }
   }
-
-  #a-index {
-    table {
-      margin-bottom: 1em;
-    }
-  }
 }

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

@@ -1,5 +1,3 @@
-@import "../base/000_vars.scss";
-
 @media screen and (max-width: 660px) {
   div#page {
     margin: 0 0.5rem;

app/logical/table_builder.rb

@@ -35,12 +35,13 @@ class TableBuilder
     end
   end
 
-  attr_reader :columns, :table_attributes, :items
+  attr_reader :columns, :table_attributes, :row_attributes, :items
 
-  def initialize(items, **table_attributes)
+  def initialize(items, tr: {}, **table_attributes)
     @items = items
     @columns = []
     @table_attributes = { class: "striped", **table_attributes }
+    @row_attributes = tr
 
     if items.respond_to?(:model_name)
       @table_attributes[:id] ||= "#{items.model_name.plural.dasherize}-table"
@@ -58,6 +59,7 @@ class TableBuilder
 
     {
       id: "#{item.model_name.singular.dasherize}-#{item.id}",
+      **row_attributes,
       **ApplicationController.helpers.data_attributes_for(item, "data", item.html_data_attributes)
     }
   end

app/views/artist_commentary_versions/_listing.html.erb

@@ -12,35 +12,31 @@
     <% end %>
     <% if listing_type(:post_id) == :standard %>
       <% t.column "Version", width: "3%" do |commentary_version| %>
-        <%= link_to "#{commentary_version.post_id}.#{commentary_version.id}»", artist_commentary_versions_path(search: {post_id: commentary_version.post_id}, anchor: "artist-commentary-version-#{commentary_version.id}") %>
+        <%= link_to "#{commentary_version.post_id}.#{commentary_version.id}&nbsp;»".html_safe, artist_commentary_versions_path(search: {post_id: commentary_version.post_id}, anchor: "artist-commentary-version-#{commentary_version.id}") %>
       <% end %>
     <% end %>
-    <% t.column "Original", width: "40%", td: {class: "diff-body"} do |commentary_version| %>
+    <% t.column "Original", width: "40%", td: { class: "diff-body align-top mt-2" } do |commentary_version| %>
       <% if !commentary_version.unchanged_empty?(:original_title) %>
-        <b>Title:</b>
+        <p class="commentary-body-section font-bold">
-        <div class="commentary-body-section">
           <%= commentary_version_field_diff(commentary_version, params[:type], :original_title) %>
-        </div>
+        </p>
       <% end %>
       <% if !commentary_version.unchanged_empty?(:original_description) %>
-        <b>Description:</b>
+        <p class="commentary-body-section">
-        <div class="commentary-body-section">
           <%= commentary_version_field_diff(commentary_version, params[:type], :original_description) %>
-        </div>
+        </p>
       <% end %>
     <% end %>
-    <% t.column "Translated", width: "40%", td: {class: "diff-body"} do |commentary_version| %>
+    <% t.column "Translated", width: "40%", td: { class: "diff-body align-top mt-4" } do |commentary_version| %>
       <% if !commentary_version.unchanged_empty?(:translated_title) %>
-        <b>Title:</b>
+        <p class="commentary-body-section font-bold">
-        <div class="commentary-body-section">
           <%= commentary_version_field_diff(commentary_version, params[:type], :translated_title) %>
-        </div>
+        </p>
       <% end %>
       <% if !commentary_version.unchanged_empty?(:translated_description) %>
-        <b>Description:</b>
+        <p class="commentary-body-section">
-        <div class="commentary-body-section">
           <%= commentary_version_field_diff(commentary_version, params[:type], :translated_description) %>
-        </div>
+        </p>
       <% end %>
     <% end %>
     <% t.column "Changes", width: "3%" do |commentary_version| %>

app/views/artists/index.html.erb

@@ -4,7 +4,7 @@
   <div id="a-index">
     <%= render "search" %>
 
-    <%= table_for @artists, class: "striped autofit" do |t| %>
+    <%= table_for @artists, class: "striped autofit", tr: { class: "h-10" } do |t| %>
       <% t.column "Name" do |artist| %>
         <%= link_to artist.name, artist, class: "tag-type-#{Tag.categories.artist}" %>
         <span class="post-count"><%= artist.tag.try(:post_count) || 0 %></span>

app/views/explore/posts/_nav_links.html.erb

@@ -1,7 +1,7 @@
 <%# path, date, scale, %>
 
-<p class="date-nav-links">
+<div class="date-nav-links text-center md:space-x-8">
   <%= render "explore/posts/nav_links_for_scale", path: path, date: date, selected_scale: scale, scale: "day" %>
   <%= render "explore/posts/nav_links_for_scale", path: path, date: date, selected_scale: scale, scale: "week" %>
   <%= render "explore/posts/nav_links_for_scale", path: path, date: date, selected_scale: scale, scale: "month" %>
-</p>
+</div>

app/views/explore/posts/_nav_links_for_scale.html.erb

@@ -1,17 +1,17 @@
 <%# path, date, selected_scale, scale %>
 
-<span class="period">
+<div class="text-center md:inline-block mb-2">
   <% if selected_scale == scale %>
     <%= link_to "« prev", send(path, date: prev_date_for_scale(date, scale), scale: scale), id: "paginator-prev", rel: "prev", "data-shortcut": "a left" %>
   <% else %>
     <%= link_to "« prev", send(path, date: prev_date_for_scale(date, scale), scale: scale) %>
   <% end %>
 
-  <%= link_to scale.capitalize, send(path, date: date, scale: scale), class: "desc" %>
+  <%= link_to scale.capitalize, send(path, date: date, scale: scale), class: "font-bold mx-2" %>
 
   <% if selected_scale == scale %>
     <%= link_to "next »", send(path, date: next_date_for_scale(date, scale), scale: scale), id: "paginator-next", rel: "next", "data-shortcut": "d right" %>
   <% else %>
     <%= link_to "next »", send(path, date: next_date_for_scale(date, scale), scale: scale) %>
   <% end %>
-</span>
+</div>

app/views/favorite_group_orders/edit.html.erb

@@ -7,9 +7,9 @@
 
     <ul id="sortable">
       <% @favorite_group.posts.limit(1_000).each do |post| %>
-        <li class="ui-state-default" id="favorite_group[post_ids]_<%= post.id %>">
+        <%= tag.li id: "favorite_group[post_ids]_#{post.id}" do -%>
-          <%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" %>
+          <%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" -%>
-        </li>
+        <% end -%>
       <% end %>
     </ul>
 

app/views/ip_addresses/_info.html.erb

@@ -1,75 +1,77 @@
-<div class="ip-address-details">
+<div class="space-x-4">
-  <table class="aligned-vertical">
+  <div class="inline-block">
-    <tr>
+    <table class="aligned-vertical">
-      <th>Location</th>
-      <td>
-        <% if ip_info.dig(:location, :city) %>
-          <%= ip_info.dig(:location, :city) %>,
-        <% end %>
-        <% if ip_info.dig(:location, :region, :name).present? %>
-          <%= ip_info.dig(:location, :region, :name) %>,
-        <% end %>
-        <%= ip_info.dig(:location, :country, :name) %>
-      </td>
-    </tr>
-    <tr>
-      <th>Network</th>
-      <td>
-        <%= link_to ip_info.dig(:connection, :route), ip_addresses_path(search: { ip_addr: ip_info.dig(:connection, :route) }) %>
-        (<%= link_to "info", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}/#{ip_info.dig(:connection, :route)}"  %>)
-      </td>
-    </tr>
-    <tr>
-      <th>Proxy</th>
-      <td><%= ip_address.lookup.is_proxy? ? "yes" : "no" %></td>
-    </tr>
-    <tr>
-      <th>IP Banned</th>
-      <td>
-        <% if IpBan.ip_matches(ip_address.ip_addr.to_s).exists? %>
-          yes (<%= link_to "info", ip_bans_path(search: { ip_addr: ip_address.to_s }) %>)
-        <% else %>
-          no
-        <% end %>
-      </td>
-    </tr>
-    <tr>
-      <th>Type</th>
-      <td><%= ip_info.dig(:connection, :type) %></td>
-    </tr>
-    <tr>
-      <th>ASN</th>
-      <td>
-        <%= link_to "AS#{ip_info.dig(:connection, :asn)}", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}" %>
-      </td>
-    </tr>
-    <tr>
-      <th>Organization</th>
-      <td>
-        <%= ip_info.dig(:connection, :organization) %>
-      </td>
-    </tr>
-    <% if ip_info.dig(:carrier, :name).present? %>
       <tr>
-        <th>Mobile Carrier</th>
+        <th>Location</th>
-        <td><%= ip_info.dig(:carrier, :name) %></td>
+        <td>
+          <% if ip_info.dig(:location, :city) %>
+            <%= ip_info.dig(:location, :city) %>,
+          <% end %>
+          <% if ip_info.dig(:location, :region, :name).present? %>
+            <%= ip_info.dig(:location, :region, :name) %>,
+          <% end %>
+          <%= ip_info.dig(:location, :country, :name) %>
+        </td>
       </tr>
-    <% end %>
+      <tr>
-    <tr>
+        <th>Network</th>
-      <th>Website</th>
+        <td>
-      <td><%= external_link_to("http://#{ip_info.dig(:connection, :domain)}") %></td>
+          <%= link_to ip_info.dig(:connection, :route), ip_addresses_path(search: { ip_addr: ip_info.dig(:connection, :route) }) %>
-    </tr>
+          (<%= link_to "info", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}/#{ip_info.dig(:connection, :route)}"  %>)
-    <tr>
+        </td>
-      <th>Details</th>
+      </tr>
-      <td>
+      <tr>
-        <details>
+        <th>Proxy</th>
-          <pre><%= JSON.pretty_generate(ip_info) %></pre>
+        <td><%= ip_address.lookup.is_proxy? ? "yes" : "no" %></td>
-        </details>
+      </tr>
-      </td>
+      <tr>
-    </tr>
+        <th>IP Banned</th>
-  </table>
+        <td>
-</div>
+          <% if IpBan.ip_matches(ip_address.ip_addr.to_s).exists? %>
+            yes (<%= link_to "info", ip_bans_path(search: { ip_addr: ip_address.to_s }) %>)
+          <% else %>
+            no
+          <% end %>
+        </td>
+      </tr>
+      <tr>
+        <th>Type</th>
+        <td><%= ip_info.dig(:connection, :type) %></td>
+      </tr>
+      <tr>
+        <th>ASN</th>
+        <td>
+          <%= link_to "AS#{ip_info.dig(:connection, :asn)}", "https://ipinfo.io/AS#{ip_info.dig(:connection, :asn)}" %>
+        </td>
+      </tr>
+      <tr>
+        <th>Organization</th>
+        <td>
+          <%= ip_info.dig(:connection, :organization) %>
+        </td>
+      </tr>
+      <% if ip_info.dig(:carrier, :name).present? %>
+        <tr>
+          <th>Mobile Carrier</th>
+          <td><%= ip_info.dig(:carrier, :name) %></td>
+        </tr>
+      <% end %>
+      <tr>
+        <th>Website</th>
+        <td><%= external_link_to("http://#{ip_info.dig(:connection, :domain)}") %></td>
+      </tr>
+      <tr>
+        <th>Details</th>
+        <td>
+          <details>
+            <pre><%= JSON.pretty_generate(ip_info) %></pre>
+          </details>
+        </td>
+      </tr>
+    </table>
+  </div>
 
-<div class="ip-address-map">
+  <div class="inline-block align-top">
-  <%= embedded_map(ip_info.dig(:location, :latitude), ip_info.dig(:location, :longitude), 300, 200) %>
+    <%= embedded_map(ip_info.dig(:location, :latitude), ip_info.dig(:location, :longitude), 300, 200) %>
+  </div>
 </div>

app/views/pool_orders/edit.html.erb

@@ -13,9 +13,9 @@
 
         <ul id="sortable">
           <% @pool.posts.each do |post| %>
-            <li class="ui-state-default" id="pool[post_ids]_<%= post.id %>">
+            <%= tag.li id: "pool[post_ids]_#{post.id}" do -%>
-              <%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" %>
+              <%= post_preview(post, show_deleted: true).presence || "Hidden: Post ##{post.id}" -%>
-            </li>
+            <% end -%>
           <% end %>
         </ul>
       <% else %>

app/views/pools/show.html.erb

@@ -14,7 +14,7 @@
       <% end %>
     </h1>
 
-    <div id="description" class="prose">
+    <div id="description" class="prose mb-4">
       <%= format_text(@pool.description) %>
     </div>
 

app/views/post_versions/index.html.erb

@@ -14,8 +14,11 @@
       <%= f.input :added_tags_include_all, label: "Added Tags", input_html: { "data-autocomplete": "tag-query", value: params.dig(:search, :added_tags_include_all) } %>
       <%= f.input :removed_tags_include_all, label: "Removed Tags", input_html: { "data-autocomplete": "tag-query", value: params.dig(:search, :removed_tags_include_all) } %>
       <%= f.input :changed_tags, label: "Changed Tags", input_html: { "data-autocomplete": "tag-query", value: params.dig(:search, :changed_tags) }, hint: "Added or removed tags" %>
-      <%= f.submit "Search" %>
+
-      <%= link_to "Advanced", search_post_versions_path(params.except(:controller, :action, :index, :commit, :type).permit!), class: "advanced-search-link" %>
+      <div class="flex items-center space-x-4">
+        <%= f.submit "Search" %>
+        <%= link_to "Advanced", search_post_versions_path(params.except(:controller, :action, :index, :commit, :type).permit!) %>
+      </div>
     <% end %>
 
     <%= render "posts/partials/common/inline_blacklist" %>

app/views/posts/index.html.erb

@@ -16,7 +16,7 @@
 <% end %>
 
 <% content_for(:content) do %>
-  <menu id="post-sections">
+  <menu id="post-sections" class="mb-4">
     <li class="active"><a href="#" id="show-posts-link">Posts</a></li>
 
     <% if @post_set.artist.present? %>

app/views/posts/partials/common/_search.html.erb

@@ -2,11 +2,11 @@
 
 <section id="search-box">
   <h2>Search</h2>
-  <%= form_tag(path, method: "get", id: "search-box-form") do %>
+  <%= form_tag(path, method: "get", id: "search-box-form", class: "flex") do %>
     <% if params[:random] %>
       <%= hidden_field_tag :random, params[:random] %>
     <% end %>
-    <%= text_field_tag("tags", tags, :id => tags_dom_id, :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %>
+    <%= text_field_tag("tags", tags, :id => tags_dom_id, :class => "flex-auto", :"data-shortcut" => "q", :"data-autocomplete" => "tag-query") %>
     <button id="search-box-submit" type="submit"><%= search_icon %></button>
   <% end %>
 </section>

app/views/posts/partials/index/_excerpt.html.erb

@@ -15,7 +15,7 @@
         <%= render "artists/summary", artist: artist %>
         <%= render "tag_relationships/alias_and_implication_list", tag: artist.tag %>
 
-        <p class="links">
+        <p class="mt-4">
           <% if artist.wiki_page.present? %>
             <%= link_to "View wiki", artist.wiki_page, id: "view-wiki-link" %> |
           <% end %>
@@ -33,7 +33,7 @@
         <%= format_text(wiki_page.body) %>
         <%= render "tag_relationships/alias_and_implication_list", tag: wiki_page.tag %>
 
-        <p class="links">
+        <p class="mt-4">
           <%= link_to_wiki "View wiki", wiki_page.title, id: "view-wiki-link" %>
         </p>
       </div>
@@ -52,7 +52,7 @@
         <%= format_text(post_set.pool.description) %>
       </div>
 
-      <p class="links">
+      <p class="mt-4">
         <%= link_to "View pool", pool_path(post_set.pool.id) %>
       </p>
     <% end %>

app/views/posts/partials/show/_information.html.erb

@@ -28,7 +28,7 @@
     <% if policy(post).can_view_favlist? %>
     <%= link_to "Show »", "#", id: "show-favlist-link", style: ("display: none;" if post.fav_count == 0) %>
     <%= link_to "« Hide", "#", id: "hide-favlist-link", style: "display: none;" %>
-    <div id="favlist" style="display: none;">
+    <div id="favlist" style="display: none;" class="ml-4">
       <%= render "posts/partials/show/favorite_list", post: post %>
     </div>
   <% end %></li>

app/views/posts/partials/show/_ugoira_original.html.erb

@@ -10,16 +10,14 @@
 ) %>
 
 <div id="ugoira-controls">
-  <div id="ugoira-control-panel" style="width: <%= [@post.image_width, 350].max %>px;">
+  <div id="ugoira-control-panel" class="mb-2 flex items-center" style="width: <%= [@post.image_width, 350].max %>px;">
     <%= button_tag "Play", :id => "ugoira-play", :style => "display: none;" %>
     <%= button_tag "Pause", :id => "ugoira-pause" %>
-    <div id="seek-slider" style="width: <%= [@post.image_width, 350].max - 81 %>px;"></div>
+    <div id="seek-slider" class="ml-4" style="width: <%= [@post.image_width, 350].max - 81 %>px;"></div>
   </div>
-  <p id="save-video-link">
+  <% if post.has_ugoira_webm? %>
-    <% if post.has_ugoira_webm? %>
+    <%= link_to "Save as video (right click and save)", post.tagged_large_file_url %>
-      <%= link_to "Save as video (right click and save)", post.tagged_large_file_url %>
+  <% else %>
-    <% else %>
+    WebM conversion pending
-      WebM conversion pending
+  <% end %>
-    <% end %>
-  </p>
 </div>

app/views/posts/show.html.erb

@@ -50,7 +50,7 @@
   <% end -%>
 
   <% if policy(Favorite).create? %>
-    <%= content_tag(:div, class: "fav-buttons fav-buttons-#{@post.favorited_by?(CurrentUser.user)}") do %>
+    <%= content_tag(:div, class: "mb-2 fav-buttons fav-buttons-#{@post.favorited_by?(CurrentUser.user)}") do %>
       <%= form_tag(favorites_path(post_id: @post.id), method: "post", id: "add-fav-button", "data-remote": true) do %>
         <%= button_tag empty_heart_icon, class: "ui-button ui-widget ui-corner-all", "data-disable-with": spinner_icon %>
       <% end %>
@@ -86,7 +86,7 @@
     <%= render_post_navbar(@post, current_user: CurrentUser.user, search: params[:q]) %>
   <% end %>
 
-  <menu id="post-sections">
+  <menu id="post-sections" class="mb-4">
     <li class="active"><a href="#comments">Comments</a></li>
 
     <% if RecommenderService.available_for_post?(@post) %>

app/views/related_tags/_container.html.erb

@@ -5,7 +5,7 @@
     <a href="#" id="hide-related-tags-link">«</a>
   </h3>
 
-  <div class="related-tags">
+  <div class="related-tags w-full mb-4 p-4 flex space-x-4">
     <%= render "related_tags/user_tags", related_tags: nil %>
     <%= render "related_tags/current_tags", related_tags: nil %>
     <%= render "related_tags/source_tags", source: nil %>

app/views/related_tags/_current_tags.html.erb

@@ -1,4 +1,4 @@
-<div class="current-related-tags-columns">
+<div class="current-related-tags-columns flex space-x-4">
   <% if related_tags.present? %>
     <%= render "related_tags/tag_column", tags: related_tags.tags.map(&:name), class: "general-related-tags-column", title: related_tags.pretty_name %>
     <%= render "related_tags/tag_column", tags: related_tags.wiki_page_tags, class: "wiki-related-tags-column", title: link_to_wiki("wiki:#{related_tags.pretty_name}", related_tags.query) %>

app/views/related_tags/_source_tags.html.erb

@@ -1,6 +1,6 @@
-<div class="source-related-tags-columns">
+<div class="source-related-tags-columns flex space-x-4">
   <% if source.present? %>
-    <%= render "related_tags/tag_column", tags: source.translated_tags.map(&:name), title: "Translated Tags" %>
+    <%= render "related_tags/tag_column", tags: source.translated_tags.map(&:name), class: "translated-tags-related-tags-column", title: "Translated Tags" %>
 
     <div class="tag-column wide-column artist-related-tags-column">
       <h3>Artist</h3>

app/views/related_tags/_tag_column.html.erb

@@ -1,7 +1,7 @@
-<%# tags, title, class (optional) %>
+<%# tags, title, class %>
 
-<%= content_tag(:div, class: ["tag-column", local_assigns[:class] || "#{title.parameterize}-related-tags-column", "is-empty-#{tags.empty?}"].join(" ")) do %>
+<% if tags.present? %>
-  <% if tags.present? %>
+  <%= tag.div class: ["tag-column", local_assigns[:class]] do %>
     <h3><%= title %></h3>
     <%= render_simple_tag_list(tags) %>
   <% end %>

app/views/related_tags/_user_tags.html.erb

@@ -1,6 +1,6 @@
-<div class="user-related-tags-columns">
+<div class="user-related-tags-columns flex space-x-4">
   <% if related_tags.present? %>
-    <%= render "related_tags/tag_column", tags: related_tags.recent_tags, title: "Recent" %>
+    <%= render "related_tags/tag_column", tags: related_tags.recent_tags, class: "recent-related-tags-column", title: "Recent" %>
-    <%= render "related_tags/tag_column", tags: related_tags.favorite_tags, title: "Frequent" %>
+    <%= render "related_tags/tag_column", tags: related_tags.favorite_tags, class: "frequent-related-tags-column", title: "Frequent" %>
   <% end %>
 </div>

app/views/saved_searches/index.html.erb

@@ -36,7 +36,7 @@
       <% t.column "Created" do |ss| %>
         <%= time_ago_in_words_tagged ss.created_at %>
       <% end %>
-      <% t.column th: {class: "links"}, td: {class: "links"} do |ss| %>
+      <% t.column column: "control" do |ss| %>
         <%= link_to "edit", edit_saved_search_path(ss) %>
           | <%= link_to "delete", saved_search_path(ss), :method => :delete, :remote => true %>
       <% end %>

app/views/sources/_info.html.erb

@@ -1,6 +1,6 @@
 <%# source %>
 
-<div id="source-info">
+<div id="source-info" class="p-4 mb-4">
   <%= link_to "Fetch source data", source_path, id: "fetch-data-manual" %>
   <%= spinner_icon(id: "source-info-loading") %>
 

app/views/static/_backtrace.html.erb

@@ -1,6 +1,6 @@
 <%# backtrace %>
 
-<ul class="backtrace">
+<ul class="backtrace font-monospace p-4 mb-4">
   <% if defined?(exception) %>
     <li><%= exception.class.to_s %> exception raised</li>
   <% end %>

app/views/static/privacy_policy.html.erb

@@ -8,7 +8,7 @@
   <div id="a-privacy-policy" class="prose fixed-width-container">
     <h1>Privacy Policy</h1>
 
-    <p class="summary">Last updated: July 5, 2020</p>
+    <p><em>Last updated: July 5, 2020</em></p>
 
     <p>This privacy policy describes what information <%= @app_name %>
     (collectively "we", "us", "our") collects about you when you use our website
@@ -25,7 +25,7 @@
 
     <h6>Information You Provide To Us</h6>
 
-    <p class="summary">Summary: We collect information you directly give us.</p>
+    <p><em>Summary: We collect information you directly give us.</em></p>
 
     <p>We collect information you directly provide to us when you use our
     Services. What information we collect depends on how you use our Services.
@@ -76,9 +76,9 @@
 
     <h6>Information We Collect Automatically</h6>
 
-    <p class="summary">Summary: We collect some information about you
+    <p><em>Summary: We collect some information about you
     automatically, including your IP address, information about your computer,
-    and information about your site usage.</p>
+    and information about your site usage.</em></p>
 
     <ul class="list-bulleted">
       <li><strong>Log and usage data</strong>. We may log information about you
@@ -100,9 +100,9 @@
 
     <h6>Information We Collect From Other Sources</h6>
 
-    <p class="summary">Summary: If you choose to link other sites to your
+    <p><em>Summary: If you choose to link other sites to your
     <%= @app_name %> account, we will receive profile information about you
-    from those sites.</p>
+    from those sites.</em></p>
 
     <p>We may receive information about you from other sources and combine that
     information with other information we have about you. For example, we may
@@ -114,8 +114,8 @@
 
     <h4>How We Use Your Information</h4>
 
-    <p class="summary">Summary: We use your information to provide services to
+    <p><em>Summary: We use your information to provide services to
-    you, to operate the Site, and to enforce our Terms of Service.</p>
+    you, to operate the Site, and to enforce our Terms of Service.</em></p>
 
     <p>We use your information to:</p>
 
@@ -173,10 +173,10 @@
 
     <h4>How Information About You Is Shared</h4>
 
-    <p class="summary">Summary: Most activity on <%= @app_name %> is public. We
+    <p><em>Summary: Most activity on <%= @app_name %> is public. We
     won't share your information with advertisers without your consent. We
     won't share information about you with third parties, except as required
-    under certain conditions.</p>
+    under certain conditions.</em></p>
 
     <p>When you use the Site, certain information about you may be shared with
     other users, with Site moderators or other authorized users, or with the
@@ -312,9 +312,9 @@
 
     <h6>How We Handle Linked Accounts</h6>
 
-    <p class="summary">Summary: If you link other sites to your <%= @app_name %>
+    <p><em>Summary: If you link other sites to your <%= @app_name %>
     account, we will receive profile information about you from those sites. We
-    won't disclose any information about you to those sites.</p>
+    won't disclose any information about you to those sites.</em></p>
 
     <p>We may offer you the ability to sign up or login using third-party
     social media accounts (such as your Google or Twitter accounts), or to link
@@ -352,8 +352,8 @@
 
     <h6>Deleting Your Account</h6>
 
-    <p class="summary">Summary: You may deactivate your account, but we may
+    <p><em>Summary: You may deactivate your account, but we may
-    retain your IP address and your public contributions to the Site.</p>
+    retain your IP address and your public contributions to the Site.</em></p>
 
     <p>If you would like to delete your account, you may request your
     account to be deactivated <%= link_to "here", maintenance_user_deletion_path %>.</p>
@@ -409,9 +409,9 @@
 
     <h6>Data Retention</h6>
 
-    <p class="summary">Summary: We keep your information for as long as
+    <p><em>Summary: We keep your information for as long as
     necessary to fulfill the purposes outlined in this privacy policy, unless
-    otherwise required by law.</p>
+    otherwise required by law.</em></p>
 
     <p>We store the information we collect for as long as it is necessary for
     the purpose(s) for which we originally collected it. We may retain certain
@@ -426,7 +426,7 @@
 
     <h6>International Data Transfers</h6>
 
-    <p class="summary">Summary: We store data in the United States and operate under US law.</p>
+    <p><em>Summary: We store data in the United States and operate under US law.</em></p>
 
     <p>We are based in the United States and we process and store information
     on servers located in the United States. We may store information on
@@ -439,9 +439,9 @@
 
     <h6>Information Security</h6>
 
-    <p class="summary">Summary: We take reasonable measures to secure your
+    <p><em>Summary: We take reasonable measures to secure your
     data. We will promptly notify you of breaches of your personal
-    information.</p>
+    information.</em></p>
 
     <p>We take reasonable measures to protect your personal information from
     loss, theft, misuse, unauthorized access, disclosure, alteration, or
@@ -461,7 +461,7 @@
 
     <h6>Changes to this Policy</h6>
 
-    <p class="summary">Summary: We may update this policy from time to time.</p>
+    <p><em>Summary: We may update this policy from time to time.</em></p>
 
     <p>We may update this Privacy Policy from time to time. The updated policy
     will be indicated by a new "Last updated" date at the top of this page. If

app/views/static/site_map.html.erb

@@ -1,8 +1,8 @@
 <% page_title "Site Map" %>
 
 <div id="c-static">
-  <div id="a-site-map" class="fixed-width-container">
+  <div id="a-site-map" class="fixed-width-container space-y-4 md:flex md:space-y-0">
-    <section>
+    <section class="flex-auto space-y-4">
       <ul>
         <li><h2>Posts</h2></li>
         <li><%= link_to_wiki "Help", "help:posts" %></li>
@@ -44,7 +44,7 @@
         <li><%= link_to("Changes", artist_versions_path) %></li>
       </ul>
     </section>
-    <section>
+    <section class="flex-auto space-y-4">
       <ul>
         <li><h2>Tags</h2></li>
         <li><%= link_to_wiki "Help", "help:tags" %></li>
@@ -75,7 +75,7 @@
         <li><%= link_to("Missed Searches", missed_searches_explore_posts_path) %></li>
       </ul>
     </section>
-    <section>
+    <section class="flex-auto space-y-4">
       <ul>
         <li><h2>Comments</h2></li>
         <li><%= link_to_wiki "Help", "help:comments" %></li>
@@ -107,7 +107,7 @@
         <li><%= link_to("Changes", artist_commentary_versions_path) %></li>
       </ul>
     </section>
-    <section>
+    <section class="flex-auto space-y-4">
       <ul>
         <li><h2>Profile</h2></li>
         <% if CurrentUser.is_anonymous? %>

app/views/user_upgrades/new.html.erb

@@ -5,10 +5,10 @@
 <%= render "users/secondary_links" %>
 
 <div id="c-user-upgrades">
-  <div id="a-new" class="fixed-width-container">
+  <div id="a-new" class="fixed-width-container mx-auto">
 
     <% if @user_upgrade.is_gift? %>
-      <h1>Gift Account Upgrade</h1>
+      <h1 class="text-center mb-4">Gift Account Upgrade</h1>
 
       <% if @user_upgrade.recipient.is_platinum? %>
         <p><%= link_to_user @recipient %> is already above Platinum level and can't be upgraded!</p>
@@ -16,7 +16,7 @@
         <h6>You are gifting this upgrade to <%= link_to_user @user_upgrade.recipient %>.</h6>
       <% end %>
     <% else %>
-      <h1>Upgrade Account</h1>
+      <h1 class="text-center mb-4">Upgrade Account</h1>
 
       <p>Upgrading your account gives you exclusive benefits and helps support
       <%= Danbooru.config.canonical_app_name %>. Your support helps keep the
@@ -26,7 +26,7 @@
       their profile page and look for a "Gift Upgrade" link.</p>
     <% end %>
 
-    <table id="feature-comparison">
+    <table id="feature-comparison" class="w-full text-center table-md">
       <thead>
         <tr>
           <th></th>
@@ -36,10 +36,10 @@
         </tr>
       </thead>
       <tbody>
-        <colgroup id="labels"></colgroup>
+        <colgroup id="labels" class="w-1/4"></colgroup>
-        <colgroup id="basic"></colgroup>
+        <colgroup id="basic" class="w-1/4"></colgroup>
-        <colgroup id="gold"></colgroup>
+        <colgroup id="gold" class="w-1/4"></colgroup>
-        <colgroup id="platinum"></colgroup>
+        <colgroup id="platinum" class="w-1/4"></colgroup>
         <tr>
           <td></td>
           <td>Free</td>

app/views/users/_statistics.html.erb

@@ -1,6 +1,6 @@
 <div>
   <h2>Statistics</h2>
-  <table width="100%" class="user-statistics">
+  <table width="100%" class="user-statistics table-sm">
     <tbody>
       <tr>
         <th>User ID</th>

app/views/wiki_page_versions/_listing.html.erb

@@ -34,7 +34,7 @@
     <% end %>
 
     <% if listing_type(:wiki_page_id, member_check: false, types: [:page, :global]) == :page %>
-      <%= submit_tag "Diff" %>
+      <%= submit_tag "Diff", class: "mt-4" %>
     <% end %>
   <% end %>
 </div>