Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Footer design audit #118

Merged
merged 7 commits into from
Mar 15, 2023
Merged

Footer design audit #118

merged 7 commits into from
Mar 15, 2023

Conversation

nmakuch
Copy link
Contributor

@nmakuch nmakuch commented Mar 13, 2023

This Pull Request consists of the following work:

1) Updating the footer link styles to match the link styles on figma

Before After
footer-link-states-before footer-link-states-after

2) Fixing alignment issues

  • The left and right slot's content wasn't aligning properly so it's been updated
Before After
Screen Shot 2023-03-13 at 17 41 15 Screen Shot 2023-03-13 at 19 15 48

3) Updating tokens

Copy link
Collaborator

@ethanWallace ethanWallace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put some comments into the Footer CSS file.

Also have a couple questions:

  • Do we need the underline on the sub footer links? They were originally styled that way to match the current style of the canada.ca footer
  • Should the links in the contextual band and main footer also have the new focus style?

@@ -145,24 +147,33 @@

@media screen and (min-width: 64em) {
display: inline-block;

gcds-signature {
margin: 0 0 0 auto;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we turn this into a footer component token.

text-decoration: underline;
text-underline-offset: 0.1em;
text-decoration-color: currentColor;
text-decoration-thickness: var(--gcds-border-width-sm);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above


&:hover {
color: var(--gcds-footer-sub-hover-text);
text-decoration-thickness: var(--gcds-border-width-md);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above

&:active {
color: var(--gcds-footer-sub-active-text);
background-color: var(--gcds-footer-sub-active-background);
border-radius: var(--gcds-border-radius-sm);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment as above

@nmakuch nmakuch requested a review from ethanWallace March 14, 2023 22:00
Copy link
Collaborator

@ethanWallace ethanWallace left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@nmakuch nmakuch merged commit b9203d7 into main Mar 15, 2023
@nmakuch nmakuch deleted the footer-design-audit branch March 15, 2023 12:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants