Grey triangle focus indicator on main nav (#360)

Author: thatbudakguy

srcmedia/scss/_mixins.scss

@@ -279,14 +279,14 @@
     }
 }
 
-@mixin triangle-overlay($color) {
+@mixin triangle-overlay($color, $size) {
     height: 0;
     width: 0;
-    left: calc(100% - 50px);
-    border-right: 25px solid $color;
-    border-bottom: 25px solid $color;
-    border-top: 25px solid transparent;
-    border-left: 25px solid transparent;
+    left: calc(100% - #{$size});
+    border-right: calc(#{$size} / 2) solid $color;
+    border-bottom: calc(#{$size} / 2) solid $color;
+    border-top: calc(#{$size} / 2) solid transparent;
+    border-left: calc(#{$size} / 2) solid transparent;
     z-index: -1;
     opacity: 0.5;
 }

srcmedia/scss/snippets/_links.scss

@@ -39,6 +39,7 @@ a.archive-link { // "view the archive" button
     width: 30px;
     box-shadow: 0 0 6px 0 $french-blue;
     z-index: 10;
+    text-decoration: none;
 
     @media (min-width: $largeMonitor) {
         left: calc(50% + #{$largeMonitor} / 2 - 4rem);

srcmedia/scss/snippets/_nav.scss

@@ -180,24 +180,54 @@
         }
 
         &.about.triangle::before {
-            @include triangle-overlay($rosy-pink);
+            @include triangle-overlay($rosy-pink, 54px);
         }
 
         &.editorial.active::before {
-            @include triangle-overlay($twilight);
+            @include triangle-overlay($twilight, 54px);
         }
 
         &.collections,
         &.archive {
             &.active::before {
-                @include triangle-overlay($seafoam-blue);
+                @include triangle-overlay($seafoam-blue, 54px);
             }
         }
+
+        // grey hover/focus triangle overlay for main nav menu items
+        &.collections,
+        &.archive,
+        &.editorial {
+            &.focus::before,
+            &:focus::before,
+            &:hover::before {
+                @include triangle-overlay($white, 54px);
+                opacity: 1;
+            }
+        }
+    }
+
+    // smaller hover/focus triangle for items in the about menu
+    .submenu .item:focus-within::before,
+    .about .item:hover::before {
+        display: block;
+        @include triangle-overlay($white, 40px);
+        opacity: 1;
+    }
+
+    // PPA logo/brand has smaller triangle shifted to the bottom; no hover
+    .brand .item:focus::before,
+    .brand .item.focus::before {
+        top: 54px;
+        @include triangle-overlay($white, 42px);
+        opacity: 1;
     }
 
-    a.item:hover {
-        border-bottom: 10px solid $french-blue;
-        padding-bottom: 8px;
+    // remove default outline focus indicator
+    a.item:focus,
+    a.item.focus,
+    .item a:focus {
+        outline: none;
     }
 
     .search .search.icon {

templates/snippets/about.html

@@ -1,9 +1,9 @@
 {% load static %}
 
 <div class="about ui simple item dropdown{% if active == 'about' %} triangle{% endif %}">
-    <div tabindex=0 class="text">About</div>
+    <div class="text">About</div>
     <img class="dropdown icon" src="{% static 'img/icons/RightChevron.svg' %}" alt="">
-    <div class="menu">
+    <div class="menu submenu">
         {# NOTE: currently relies on editorial not having show_in_menu set #}
         {% for page in request.site.root_page.get_children.live.in_menu %}
         <div class="item"><a href="{{ page.url }}">{{ page.title }}</a></div>