Make highlight icons act as additional Show All buttons.

_includes/assets/css/screen.css

@@ -83,6 +83,10 @@
     line-height: 2;
   }
 
+  .highlight-icon {
+    cursor: pointer;
+  }
+
   .show-all:hover, .show-highlights:hover, #print:hover,
   .show-all:focus, .show-highlights:focus, #print:focus {
     background-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 100, 0.1) 20%, rgba(0, 0, 100, 0.2) 30%, rgba(0, 0, 100, 0.2) 70%, rgba(0, 0, 100, 0.1) 80%, transparent 100%);

_includes/assets/js/main.js

@@ -16,7 +16,7 @@
   }
 
   document.addEventListener("click", function(event) {
-    if (event.target.matches(".show-all, .show-all *")) {
+    if (event.target.matches(".show-all, .show-all *, .highlight-icon, .highlight-icon *")) {
       showAll(event.target);
     } else if (event.target.matches(".show-highlights, .show-highlights *")) {
       showHighlights(event.target);

_includes/components/resume/highlight-icon.njk

@@ -1,5 +1,5 @@
 <img
     class="highlight-icon"
     src="/img/spotlights.svg"
-    alt="Showing highlights only. Click Show All (in the header) to show additional (but likely irrelevant) data."
+    alt="Showing highlights only. Click to show additional (but likely irrelevant) data."
-    title="Showing highlights only. Click Show All (in the header) to show additional (but likely irrelevant) data." />
+    title="Showing highlights only. Click to show additional (but likely irrelevant) data." />