fix dropdown

assets/css/common/mixins.css

@@ -58,9 +58,3 @@
     color var(--transition-animation-duration) ease,
     background var(--transition-animation-duration) ease;
 }
-
-@define-mixin subgrid {
-  display: grid;
-  grid-template-columns: 1 / -1;
-  grid-gap: inherit;
-}

assets/css/elements/base.css

@@ -74,3 +74,12 @@ p,
     padding-right: var(--padding-normal);
   }
 }
+
+/* Apparently this is necessary for dropdowns because
+   we can't have subgrids yet, and subgrids aren't really
+   polyfillable for any pre-late-2023 browsers. Ugh! */
+
+.icon--fixed {
+  width: 1em;
+  padding: var(--padding-small);
+}

assets/css/elements/dropdown.css

@@ -6,6 +6,7 @@
 .dropdown__content {
   background: var(--primary-muted-color);
   border: 1px solid var(--primary-border-color);
+  border-radius: var(--border-radius-inner);
   position: absolute;
   display: none;
   top: 100%;
@@ -13,13 +14,13 @@
 }
 
 .dropdown:hover .dropdown__content {
-  display: block;
+  display: grid;
   min-width: 100%;
   z-index: 999;
+  overflow: hidden;
 }
 
 .dropdown__content > :not(.hidden) {
-  display: block;
   white-space: nowrap;
 }
 
@@ -31,7 +32,7 @@
 .dropdown__item {
   display: grid;
   grid-template-columns: auto 1fr;
-  color: var(--text-color);
+  color: var(--text-color) !important;
 }
 
 .dropdown__text {
@@ -41,18 +42,22 @@
 }
 
 .dropdown__item:hover .dropdown__text {
-  background: var(--primary-dark-color);
+  background: var(--primary-color);
 }
 
 .dropdown__icon {
   padding: 0 var(--padding-small);
   background: var(--primary-dark-color);
-  border-right: 1px solid var(--primary-muted-color);
+}
+
+.dropdown__item:hover .dropdown__icon {
+  background: var(--primary-color);
 }
 
 .dropdown__separator {
   margin: 0;
-  border-color: var(--primary-border-color);
+  border: 1px solid var(--primary-border-color);
+  border-top: 0;
 }
 
 .dropdown__link {
@@ -61,5 +66,5 @@
 }
 
 .dropdown__link:hover {
-  background: var(--primary-dark-color);
+  background: var(--primary-color);
 }

assets/css/views/header.css

@@ -8,9 +8,15 @@ header {
 }
 
 .header__link {
+  @mixin animated-transition;
   color: var(--text-color) !important;
 }
 
+.header__link:hover {
+  @mixin animated-transition;
+  color: var(--primary-link-color) !important;
+}
+
 .header__link--user {
   display: flex;
   align-items: center;
@@ -80,6 +86,10 @@ nav.header__secondary .header__link {
   color: var(--text-light-color) !important;
 }
 
+nav.header__secondary .header__link:hover {
+  color: var(--primary-link-color) !important;
+}
+
 nav.dropdown__content {
   line-height: var(--navbar-secondary-size);
 }

lib/philomena_web/templates/layout/_header.html.slime

@@ -56,75 +56,62 @@ header
         = render PhilomenaWeb.UserAttributionView, "_user_avatar.html", object: %{user: @current_user}, class: "avatar--navbar"
         i.fa.fa-chevron-down
       nav.dropdown__content.dropdown__content--right.hidden--mobile.js-burger-links
-        a href=Routes.profile_path(@conn, :show, @current_user)
+        a.dropdown__item href=Routes.profile_path(@conn, :show, @current_user)
-          .dropdown__item
+          .dropdown__icon
-            .dropdown__icon
+            i.fa.icon--fixed.fa-user
-              i.fa.icon--padded.small.fa-user
+          .dropdown__text
-            .dropdown__text
+            = @current_user.name
-              = @current_user.name
         hr.dropdown__separator
-        a href="/search?q=my:watched"
+        a.dropdown__item href="/search?q=my:watched"
-          .dropdown__item
+          .dropdown__icon
-            .dropdown__icon
+            i.fa.icon--fixed.fa-eye
-              i.fa.icon--padded.small.fa-eye
+          .dropdown__text Watched
-            .dropdown__text Watched
+        a.dropdown__item href="/search?q=my:faves"
-        a href="/search?q=my:faves"
+          .dropdown__icon
-          .dropdown__item
+            i.fa.icon--fixed.fa-star
-            .dropdown__icon
+          .dropdown__text Faves
-              i.fa.icon--padded.small.fa-star
+        a.dropdown__item href="/search?q=my:upvotes"
-            .dropdown__text Faves
+          .dropdown__icon
-        a href="/search?q=my:upvotes"
+            i.fa.icon--fixed.fa-arrow-up
-          .dropdown__item
+          .dropdown__text Upvotes
-            .dropdown__icon
+        a.dropdown__item href=Routes.gallery_path(@conn, :index, gallery: [creator: @current_user.name])
-              i.fa.icon--padded.small.fa-arrow-up
+          .dropdown__icon
-            .dropdown__text Upvotes
+            i.fa.icon--fixed.fa-image
-        a href=Routes.gallery_path(@conn, :index, gallery: [creator: @current_user.name])
+          .dropdown__text Galleries
-          .dropdown__item
+        a.dropdown__item href="/search?q=my:uploads"
-            .dropdown__icon
+          .dropdown__icon
-              i.fa.icon--padded.small.fa-image
+            i.fa.icon--fixed.fa-upload
-            .dropdown__text Galleries
+          .dropdown__text Uploads
-        a href="/search?q=my:uploads"
+        a.dropdown__item href="/comments?cq=my:comments"
-          .dropdown__item
+          .dropdown__icon
-            .dropdown__icon
+            i.fa.icon--fixed.fa-comments
-              i.fa.icon--padded.small.fa-upload
+          .dropdown__text Comments
-            .dropdown__text Uploads
+        a.dropdown__item href="/posts?pq=my:posts"
-        a href="/comments?cq=my:comments"
+          .dropdown__icon
-          .dropdown__item
+            i.fa.icon--fixed.fa-pen-square
-            .dropdown__icon
+          .dropdown__text Posts
-              i.fa.icon--padded.small.fa-comments
+        a.dropdown__item href=Routes.profile_artist_link_path(@conn, :index, @current_user)
-            .dropdown__text Comments
+          .dropdown__icon
-        a href="/posts?pq=my:posts"
+            i.fa.icon--fixed.fa-link
-          .dropdown__item
+          .dropdown__text Links
-            .dropdown__icon
+        a.dropdown__item href="/conversations"
-              i.fa.icon--padded.small.fa-pen-square
+          .dropdown__icon
-            .dropdown__text Posts
+            i.fa.icon--fixed.fa-envelope
-        a href=Routes.profile_artist_link_path(@conn, :index, @current_user)
+          .dropdown__text Messages
-          .dropdown__item
-            .dropdown__icon
-              i.fa.icon--padded.small.fa-link
-            .dropdown__text Links
-        a href="/conversations"
-          .dropdown__item
-            .dropdown__icon
-              i.fa.icon--padded.small.fa-envelope
-            .dropdown__text Messages
         hr.dropdown__separator
-        a href="/settings/edit"
+        a.dropdown__item href="/settings/edit"
-          .dropdown__item
+          .dropdown__icon
-            .dropdown__icon
+            i.fa.icon--fixed.fa-cogs
-              i.fa.icon--padded.small.fa-cogs
+          .dropdown__text Settings
-            .dropdown__text Settings
+        a.dropdown__item href=Routes.registration_path(@conn, :edit)
-        a href=Routes.registration_path(@conn, :edit)
+          .dropdown__icon
-          .dropdown__item
+            i.fa.icon--fixed.fa-user
-            .dropdown__icon
+          .dropdown__text Account
-              i.fa.icon--padded.small.fa-user
-            .dropdown__text Account
         hr.dropdown__separator
-        a href=Routes.session_path(@conn, :delete) data-method="delete"
+        a.dropdown__item href=Routes.session_path(@conn, :delete) data-method="delete"
-          .dropdown__item
+          .dropdown__icon
-            .dropdown__icon
+            i.fa.icon--fixed.fa-sign-out-alt
-              i.fa.icon--padded.small.fa-sign-out-alt
+          .dropdown__text Logout
-            .dropdown__text Logout
   - else
     a.header__link.hidden--mobile href="/filters"
       | Filters (
@@ -132,7 +119,7 @@ header
       | )
     span.js-burger-links.hidden--mobile
       a.header__link href="/settings/edit"
-        i.fa.icon--padded.small.fa-cogs.hidden--desktop>
+        i.fa.icon--fixed.fa-cogs.hidden--desktop>
         | Settings
     a.header__link href=Routes.registration_path(@conn, :new)
       | Register