Skip to content

Commit

Permalink
blm: convert to button
Browse files Browse the repository at this point in the history 
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: #3246

Post-Feedback: https://user-images.githubusercontent.com/17770407/92166219-3f73f580-ee06-11ea-893c-0017d5d00ad0.png
  • Loading branch information
Derek Lewis committed Sep 3, 2020
1 parent e7c9507 commit d29ad75
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 26 deletions.
128 changes: 105 additions & 23 deletions layouts/css/page-modules/_home.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -108,3 +85,108 @@
font-size: 1rem;
}
}

/**
* BLM CTA button styles.
* TODO: Remove at conclusion of natural course (days to weeks).

This comment has been minimized.

Sign in to view

Copy link
@MylesBorins

MylesBorins Sep 26, 2020

Contributor

When did this todo get added? I do not recall it being there when I signed off on the PR and would not have agreed to this language

This comment has been minimized.

Sign in to view

Copy link
@DerekNonGeneric

DerekNonGeneric Sep 26, 2020

Author Contributor

This is what you told me on the call.

This comment has been minimized.

Sign in to view

Copy link
@MylesBorins

MylesBorins Sep 26, 2020 •
edited
Loading

Contributor

Saying that we may eventually remove it, and adding this as a TODO in the doc are completely different things.

It would also appear that you added this TODO after reviews before landing, which I find rather surprising. If I am mistaken and it was here when I originally reviewed (something I cannot confirm due to the force push) then I apologize for being mistaken here. But adding this text is not something I would agree to. We have never made a public time boxed commitment to removing this. Nor will social justice ever reach a conclusion or natural course. Further while we may remove the banner from the main page that would not imply it would be completely removed from the site

This comment has been minimized.

Sign in to view

Copy link
@DerekNonGeneric

DerekNonGeneric Sep 26, 2020 •
edited
Loading

Author Contributor

I'm the one who added the time frame, btw. The content that the button links to is outdated already. It's up to you though, that was just my feeling.

This comment has been minimized.

Sign in to view

Copy link
@MylesBorins

MylesBorins Sep 26, 2020

Contributor

Adding a time frame without building consensus around it is completely inappropriate. We can't set those kind of expectations when we don't know what is going to happen.

This comment has been minimized.

Sign in to view

Copy link
@Trott

Trott Sep 26, 2020 •
edited
Loading

Member

I'm sure the comment was added in good faith as a reminder to remove the associated styles when the time came. But yeah, if it's making folks uneasy by suggesting a timeline has been set when it hasn't, then sure, let's remove it.
*/

.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%);
}
6 changes: 3 additions & 3 deletions layouts/index.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down

0 comments on commit d29ad75

Please sign in to comment.