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

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

View File

@@ -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? %>
<%= link_to "Save as video (right click and save)", post.tagged_large_file_url %>
<% else %>
WebM conversion pending
<% end %>
</p>
<% if post.has_ugoira_webm? %>
<%= link_to "Save as video (right click and save)", post.tagged_large_file_url %>
<% else %>
WebM conversion pending
<% end %>
</div>