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/
This commit is contained in:
evazion
2021-02-15 18:28:53 -06:00
parent 7b0fee6333
commit 1e80540a04
49 changed files with 245 additions and 450 deletions

View File

@@ -1,8 +1,8 @@
<% page_title "Site Map" %>
<div id="c-static">
<div id="a-site-map" class="fixed-width-container">
<section>
<div id="a-site-map" class="fixed-width-container space-y-4 md:flex md:space-y-0">
<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? %>