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}} -
+ {{/if}} {{#if project.banner.visible}}