From b34e41cd6f5e3db4628d70e2433a8bfa6a05e81b Mon Sep 17 00:00:00 2001
From: Derek Lewis <DerekNonGeneric@inf.is>
Date: Wed, 15 Jul 2020 04:47:05 -0400
Subject: [PATCH] blm: convert to button

The commit improves the visual appeal of the BLM CTA.

Notes:
    https://user-images.githubusercontent.com/17770407/87524387-1cbf2f00-c656-11ea-8e94-7f80de3ed847.png
    https://user-images.githubusercontent.com/17770407/87524580-53954500-c656-11ea-8991-2935a8fcfdef.png

Refs: https://github.com/nodejs/nodejs.org/pull/3246

Post-Feedback: https://user-images.githubusercontent.com/17770407/92166219-3f73f580-ee06-11ea-893c-0017d5d00ad0.png
---
 layouts/css/page-modules/_home.scss | 128 +++++++++++++++++++++++-----
 layouts/index.hbs                   |   6 +-
 2 files changed, 108 insertions(+), 26 deletions(-)

diff --git a/layouts/css/page-modules/_home.scss b/layouts/css/page-modules/_home.scss
index cb2f2229a9554..16a8685dbace1 100644
--- a/layouts/css/page-modules/_home.scss
+++ b/layouts/css/page-modules/_home.scss
@@ -1,26 +1,3 @@
-.home-blacklivesmatter {
-  padding-top: 10px;
-  font-size: 16px;
-  color: $gray;
-}
-
-.home-blacklivesmatter-banner {
-  font-size: 130%;
-  background-color: $node-gray;
-  padding: 5px 15px;
-  border-radius: 2px;
-  margin-top: 1em;
-  a {
-    background-color: $black;
-    color: $white;
-    padding: .5em;
-    transition: padding .2s ease-in-out;
-    &:hover {
-      padding: .6em;
-    }
-  }
-}
-
 .home-version {
   padding-top: 10px;
   font-size: 16px;
@@ -108,3 +85,108 @@
     font-size: 1rem;
   }
 }
+
+/**
+ * BLM CTA button styles.
+ * TODO: Remove at conclusion of natural course (days to weeks).
+ */
+
+.home-blacklivesmatterblock {
+  display: block;
+  font-size: 16px;
+  height: 4rem;
+  position: relative;
+}
+
+.home-blacklivesmatterbutton {
+  color: $white !important;
+  display: block;
+  font-size: 130%;
+  font-weight: 400;
+  left: 50%;
+  top: 50%;
+  max-width: 100%;
+  padding: .5em 20%;
+  position: absolute;
+  transform: translateX(-50%) translateY(-50%);
+  transition: padding .2s ease-in-out;
+
+  &:active,
+  &:focus,
+  &:hover {
+    padding: calc(.5em * 1.2) calc(20% * 1.2);
+  }
+
+  small {
+    display: block;
+    font-size: 1rem;
+  }
+}
+
+/**
+ * Accessible button role styles (copypasta) integrated into site color scheme.
+ * @author W3C
+ * @see https://www.w3.org/TR/wai-aria-practices/examples/button/button.html
+ */
+
+[role="button"] {
+  border: 1px solid hsl(0, 0%, 39%);
+  border-radius: 5px;
+  box-shadow: 0 1px 2px hsl(0, 0%, 45%);
+  color: #fff;
+  text-shadow: 0 -1px 1px hsl(0, 0%, 15%);
+  background-color: hsl(0, 0%, 31%);
+  background-image: linear-gradient(to bottom, hsl(0, 0%, 33%), hsl(0, 0%, 27%));
+}
+
+[role="button"]:hover {
+  border-color: hsl(0, 0%, 19%);
+  background-color: hsl(0, 0%, 21%);
+  background-image: linear-gradient(to bottom, hsl(0, 0%, 23%), hsl(0, 0%, 17%));
+  cursor: pointer;
+}
+
+[role="button"]:focus {
+  outline: none;
+}
+
+[role="button"]:focus::before {
+  position: absolute;
+  z-index: -1;
+
+  /* button border width - outline width - offset */
+  top: calc(-1px - 3px - 3px);
+  right: calc(-1px - 3px - 3px);
+  bottom: calc(-1px - 3px - 3px);
+  left: calc(-1px - 3px - 3px);
+  border: 3px solid hsl(0, 0%, 39%);
+
+  /* button border radius + outline width + offset */
+  border-radius: calc(5px + 3px + 3px);
+  content: "";
+}
+
+[role="button"]:active {
+  border-color: hsl(0, 0%, 29%);
+  background-color: hsl(0, 0%, 11%);
+  background-image: linear-gradient(to bottom, hsl(0, 0%, 33%), hsl(0, 0%, 27%));
+  box-shadow: inset 0 3px 5px 1px hsl(0, 0%, 10%);
+}
+
+[role="button"][aria-pressed] {
+  border-color: hsl(0, 0%, 29%);
+  box-shadow: 0 1px 2px hsl(0, 0%, 35%);
+  text-shadow: 0 -1px 1px hsl(0, 0%, 5%);
+  background-color: hsl(0, 0%, 31%);
+  background-image: linear-gradient(to bottom, hsl(0, 0%, 33%), hsl(0, 0%, 27%));
+}
+
+[role="button"][aria-pressed]:hover {
+  border-color: hsl(0, 0%, 9%);
+  background-color: hsl(0, 0%, 31%);
+  background-image: linear-gradient(to bottom, hsl(0, 0%, 13%), hsl(0, 0%, 7%));
+}
+
+[role="button"][aria-pressed]:focus::before {
+  border-color: hsl(0, 0%, 29%);
+}
diff --git a/layouts/index.hbs b/layouts/index.hbs
index 79c8cef56b333..f0d3b047b3873 100644
--- a/layouts/index.hbs
+++ b/layouts/index.hbs
@@ -13,9 +13,9 @@
         {{{ contents }}}
 
         {{#if project.blacklivesmatter.visible}}
-          <p class="home-blacklivesmatter home-blacklivesmatter-banner">
-            <a href="{{ project.blacklivesmatter.link }}">{{ project.blacklivesmatter.text }}</a>
-          </p>
+          <div class="home-blacklivesmatterblock">
+            <a tabindex="0" role="button" aria-pressed="false" class="home-blacklivesmatterbutton" href="{{ project.blacklivesmatter.link }}">{{ project.blacklivesmatter.text }}</a>
+          </div>
         {{/if}}
 
         {{#if project.banner.visible}}