Clean up hover effects.

- We now have a hover effect for all icons.
- We also now support hover effects for all tags.
- However, we don't have any hover effect for icons in titles.
  That just looks weird.

Additionally, we're getting rid of some bloat and consolidating the CSS
into one place.

3 files changed, 50 insertions, 59 deletions

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index db083a41..7038d0d7 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,3 +1,45 @@
+/* Colors for icons */
+i.resource-icon.is-orangered {
+    color: #FE640A;
+}
+i.resource-icon.is-blurple {
+    color: #7289DA;
+}
+i.resource-icon.is-teal {
+    color: #95DBE5;
+}
+i.resource-icon.is-youtube-red {
+    color: #BB0000;
+}
+i.resource-icon.is-black {
+    color: #2c3334;
+}
+
+/* Colors when icons are hovered */
+i.resource-icon.is-hoverable:hover {
+    filter: brightness(125%);
+}
+i.resource-icon.is-hoverable.is-black:hover {
+    filter: brightness(170%);
+}
+i.resource-icon.is-hoverable.is-teal:hover {
+    filter: brightness(80%);
+}
+
+/* Icon padding */
+.breadcrumb-section {
+    padding: 1rem;
+}
+i.has-icon-padding {
+    padding: 0 10px 25px 0;
+}
+#tab-content p {
+    display: none;
+}
+#tab-content p.is-active {
+display: block;
+}
+
 /* Disable highlighting for all text in the filters. */
 .filter-checkbox,
 .filter-panel label,
@@ -57,6 +99,12 @@ span.filter-box-tag {
     user-select: none;
 }
 
+/* When hovering tags, brighten them a bit. */
+.resource-tag:hover,
+.filter-box-tag:hover {
+    filter: brightness(95%);
+}
+
 /* Move the x down 1 pixel to align center */
 button.delete {
     margin-top: 1px;
diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css
deleted file mode 100644
index c2151bee..00000000
--- a/pydis_site/static/css/resources/resources_list.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.breadcrumb-section {
-    padding: 1rem;
-}
-
-i.resource-icon.is-orangered {
-    color: #FE640A;
-}
-
-i.resource-icon.is-orangered:hover {
-    color: #fe9840;
-}
-
-i.resource-icon.is-blurple {
-    color: #7289DA;
-}
-
-i.resource-icon.is-blurple:hover {
-    color: #93a8da;
-}
-
-i.resource-icon.is-teal {
-    color: #95DBE5;
-}
-
-i.resource-icon.is-teal:hover {
-    color: #a9f5ff;
-}
-
-i.resource-icon.is-youtube-red {
-    color: #BB0000;
-}
-
-i.resource-icon.is-youtube-red:hover {
-    color: #f80000;
-}
-
-i.resource-icon.is-goodreads-cream,
-i.resource-icon.is-black {
-    color: #2c3334;
-}
-
-i.resource-icon.is-goodreads-cream:hover,
-i.resource-icon.is-black:hover {
-    color: #475d6d;
-}
-
-i.has-icon-padding {
-    padding: 0 10px 25px 0;
-}
-
-#tab-content p {
-    display: none;
-}
-
-#tab-content p.is-active {
-display: block;
-}
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 8a1017b5..b06ffd31 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -18,7 +18,7 @@
         {% if 'title_url' in resource %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
                 <a href="{{ resource.title_url }}">
-                    <i class="fas fa-link is-size-3 resource-icon is-primary"></i>
+                    <i class="fas fa-link is-size-3 resource-icon is-hoverable is-primary"></i>
                 </a>
             </span>
         {% endif %}
@@ -27,7 +27,7 @@
         {% for icon in resource.urls %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
                 <a href="{{ icon.url }}">
-                    <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-{{ icon.color }}"></i>
+                    <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-hoverable is-{{ icon.color }}"></i>
                 </a>
             </span>
         {% endfor %}