Novastorm14 / arrrgenes-treasure-tours

Fix colour contrast & colour blindness related problems on a piratey tourism website.
0 stars 0 forks source link

Arrgenes-treasure-tours Issue #1

Open Novastorm14 opened 2 years ago

Novastorm14 commented 2 years ago

Hi Wendy, sorry to be asking this so late but I cannot for the life of me figure out what Markbot is asking me to do. It keeps giving me this error even though ".nav a" is an unnecessary selector once you add the nav element. I also included all the code related to the nav just incase there is some issue with it I am not seeing.

image

nav ul { margin: 0; padding: 0; list-style-type: none; display: flex; align-items: center; }

nav a { color: #fff; padding: .5em; border-radius: 1em; text-decoration: none; }

@wendywarren

Novastorm14 commented 2 years ago

I added a completely unnecessary nav class to the ul element and markbot accepted it but I doubt that is the proper way to do it.

wendywarren commented 2 years ago

Hi @Novastorm14,

I just checked and somehow you were able to submit without the adjustments to hover and focus in your css.

When it comes to the hover and focus states there are certain styles that are used for both that can be shared in one rule within your css, then for focus you will want to create a new rule that changes the outline appearance and give it an offset.

When you tab through the page for the focus state you will notice there are three areas that have links (nav, .banner and .card).

For all three you will need to reference the video I posted on Slack to show the behaviour for hover and focus and insert the appropriate styles for each of the following:

.nav a:hover,
.nav a:focus {
  background-color: **insert correct color**;
}

.nav a:focus {
  outline: .15rem solid insert correct color;
}
.banner a:hover,
.banner a:focus {
  background-color: **insert correct color**;
  color: insert correct color;
}

.banner a:focus {
  outline: .15rem solid **insert correct color**;
  outline-offset: .3rem;
}
.card a:hover,
.card a:focus {
  background-color:  **insert correct color**;
  color:  **insert correct color**;
}

.card a:focus {
  outline: .15rem solid  **insert correct color**;
  outline-offset: .3rem;
}

Very bizarre that it let you submit.

Thanks, Wendy