[UI] More menu fixes (#870)

* [UI] Fix an overflow issue in the navbar at small resolutions
* [UI] Fix the login button breaking the line
* [Home] Adjust mascot position on mobile
* [UI] Add an artist page link to the navbar
* [UI] Control when the icons disappear at low resolutions
* [UI] Fix the misaligned nav items in Pale Moon
* [Home] Condense the navbar
* [UI] Remove an extraneous scrollbar
* [UI] Simplify the mobile menu on the home page
* [Home] Fix an overflow issue on the menu at low desktop resolutions
* [Home] Reduce the corner rounding

app/javascript/src/styles/common/navigation.scss

@@ -57,6 +57,8 @@ nav.navigation {
       background: themed("color-foreground");
       border-radius: 6px;
 
+      white-space: nowrap;
+
       & > i {
         font-size: 1.5rem;
         color: themed("color-link-active");
@@ -118,7 +120,7 @@ nav.navigation {
 
     // Prevent the tools / help buttons from being pushed
     // way too low on pages with a lot of secondary links
-    overflow: scroll;
+    overflow-y: scroll;
 
     li {
       padding: 0;
@@ -172,6 +174,8 @@ nav.navigation {
         font-size: 125%;
         padding: 0.5rem 1rem;
         text-align: center;
+
+        white-space: nowrap;
   
         i { color: themed("color-link-active"); }
       }
@@ -330,10 +334,10 @@ nav.navigation, html.nav-toggled nav.navigation {
       padding: 0 0.25em;
 
       li {
-        display: flex;
-
         a {
-          align-content: center;
+          display: flex;
+          align-items: center;
+          height: 100%;
 
           border-bottom: 0;
           padding: 0 0.75em;
@@ -355,10 +359,10 @@ nav.navigation, html.nav-toggled nav.navigation {
       overflow: hidden;
 
       li {
-        display: flex;
-
         a {
-          align-content: center;
+          display: flex;
+          align-items: center;
+          height: 100%;
 
           border-bottom: 0;
           padding: 0 0.75em;
@@ -391,10 +395,11 @@ nav.navigation, html.nav-toggled nav.navigation {
       gap: 0;
 
       li {
-        display: flex;
-
         a {
-          align-content: center;
+          display: flex;
+          align-items: center;
+          height: 100%;
+          gap: 0.25em;
 
           background: unset;
           font-size: 1.05em;
@@ -423,13 +428,33 @@ nav.navigation, html.nav-toggled nav.navigation {
           a span { display: none; }
         }
       }
+
+      #nav-themes, #nav-settings { display: none; }
+      @include window-larger-than(875px) {
+        #nav-themes, #nav-settings { display: flex; }
+      }
+      
+      #nav-account span { display: none; }
+      @include window-larger-than(930px) {
+        #nav-account span { display: unset; }
+      }
     }
     .nav-help {
+
+      // At small resolutions, overflow can
+      // cause scrollbars to appear
+      overflow: hidden;
+
       li a img { display: none; }
 
       li.current a {
         background-color: themed("color-foreground");
       }
+
+      #nav-discord, #nav-subscribestar { display: none; }
+      @include window-larger-than(1150px) {
+        #nav-discord, #nav-subscribestar { display: flex; }
+      }
     }
 
     .nav-primary, .nav-tools, .nav-help { box-shadow: unset; }
@@ -439,6 +464,23 @@ nav.navigation, html.nav-toggled nav.navigation {
 // Tweak for the secondary menu on desktop
 body.c-static.a-home {
   @include window-larger-than(800px) {
+
+    nav.navigation {
+
+      // Center and align the navbar
+      grid-template-columns: repeat(4, min-content);
+      justify-content: center;
+
+      // Remove padding to prevent a scrollbar
+      // at low desktop resolutions
+      padding: 0 0 0.5em;
+
+      #nav-subscribestar, #nav-discord, #nav-themes, #nav-settings {
+        display: none;
+      }
+    }
+
+    // Match the background colors
     nav.navigation, menu.nav-logo, menu.nav-secondary {
       background: unset;
     }
@@ -446,4 +488,19 @@ body.c-static.a-home {
       background: var(--bg-color);
     }
   }
+
+  @include window-smaller-than(800px) {
+    // Only show the primary navbar on mobile
+    // since the secondary is empty anyways
+    nav.navigation {
+      grid-template-areas:
+        "logo    logo    controls" 
+        "offleft primary primary " 
+        "offleft tools   tools   " 
+        "offleft help    help    " 
+        "offleft offbott offbott ";
+
+      .nav-secondary { display: none; }
+    }
+  }
 }

app/javascript/src/styles/specific/home.scss

@@ -3,6 +3,12 @@ body.c-static.a-home {
   background-color: var(--bg-color);
   background-image: var(--bg-image);
 
+  background-position-y: 3.75rem;
+
+  @include window-larger-than(800px) {
+    background-position-y: unset;
+  }
+
   #page {
     background: none;
     margin: 25rem auto 0;
@@ -20,7 +26,7 @@ body.c-static.a-home {
 
     padding: 1rem;
     margin: 0.5rem;
-    border-radius: 0.5rem;
+    border-radius: 0.25rem;
     text-align: center;
   }
 
@@ -82,7 +88,7 @@ body.c-static.a-home {
     justify-content: space-between;
     align-items: center;
 
-    border-radius: 0.5rem 0.5rem 0 0;
+    border-radius: 0.25rem 0.25rem 0 0;
 
     @include window-larger-than(480px) {
       margin: 0.5rem 0.5rem 0;
@@ -103,7 +109,7 @@ body.c-static.a-home {
     margin: 0;
     padding: 0.5rem;
 
-    border-radius: 0 0 0.5rem 0.5rem;
+    border-radius: 0 0 0.25rem 0.25rem;
 
     @include window-larger-than(480px) {
       margin: 0 0.5rem;

app/views/layouts/_main_links.html.erb

@@ -1,3 +1,4 @@
+<%= decorated_nav_link_to("Artists", "fas fa-brush", artists_path) %>
 <%= decorated_nav_link_to("Posts", "fas fa-images", posts_path) %>
 <%= decorated_nav_link_to("Pools", "fas fa-book", gallery_pools_path) %>
 <%= decorated_nav_link_to("Sets", "fas fa-clone", post_sets_path) %>