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,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>

View File

@@ -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>