Product blog bug fixes [mozilla#11634] (mozilla#11995)

* Fix missing image.
* Add focus styles to story button.
* Add hover/focus styles to related stories.
* Fix nav z-index.

bedrock/stories/templates/stories/articles/art-of-engagement.html

@@ -81,7 +81,7 @@ <h3 class="c-stories-article-section-title">A Sense of Belonging</h3>
     <p>Even so, community remains a vague and slippery concept at many companies. Often it is just another word marketers use to describe customers, and frequently it is a one-way street down which brands encourage consumers to take on some of the work of spreading the word about their products. That’s never been the case at Mozilla, where a passionate, highly engaged volunteer community has helped build its products from the early, bug-filled days of the first Firefox browser.</p>
 
     {{ stories_image(
-      image_url="img/stories/engagement-hero.png",
+      image_url="img/stories/engagement-hero.jpg",
       include_highres=True,
       alt="",
       width="1010",

media/css/stories/stories-article.scss

@@ -572,6 +572,7 @@ html.mzp-has-sticky-navigation .c-navigation.mzp-is-sticky {
         z-index: 2;
     }
 
+    .c-navigation,
     .mzp-c-footer {
         z-index: 2;
         position: relative;

media/css/stories/stories-landing.scss

@@ -164,7 +164,9 @@ $image-path: '/media/protocol/img';
         text-decoration: none;
         text-transform: none;
 
-        &:hover {
+        &:hover,
+        &:focus,
+        &:active {
             background: #ededf0;
         }
 

media/css/stories/stories-shared.scss

@@ -86,8 +86,12 @@ $image-path: '/media/protocol/img';
         text-decoration: none;
         color: $color-black;
 
-        &:hover {
-            .card-title,
+        &:hover,
+        &:focus {
+            .card-title {
+                text-decoration: underline;
+            }
+
             .card-desc {
                 text-decoration: none;
             }