search

p-foundation / pink-app

The repository is created for learning adaptive web design and team collaboration through git and GitHub
https://p-foundation.github.io/pink-app/
0 stars 0 forks source link

fix: removes hover on inactive link #39

Closed rasokolovska closed 7 months ago

rasokolovska commented 7 months ago

Description of the problem

The project faced a problem with a color-changing link to the main page that leads nowhere. When you hover or hold down the cursor on this link, it changes color, which can lead to user confusion and gives the impression that the link has the functionality to go to another page, although it does not.

Solution to the problem

The following changes were made to resolve this issue:

Changes have been made to the header__navigation-link.css file, using the CSS :not() pseudo-class to exclude theheader__navigation-link_active state in the hovered and active link states:

.header__navigation-link:not(.header__navigation-link_active):hover{
   color: rgb(178, 40, 102);
}
.header__navigation-link:not(.header__navigation-link_active):active{
    color: rgb(255, 255, 255, 0.5);
}

I tested the changes in the live server to ensure that the link to the main page does not respond to hovering and active state. This pull request resolves #31

naumch1k commented 7 months ago

@rasokolovska Also, could you make these formatting changes to the PR description?

  1. Please avoid formatting texts as quotes unless they're actual quotations. It makes the text a bit harder to read. Plus, when we check these elements in developer tools (see screenshot), we notice that even in the HTML markup of this page, your texts are wrapped in blockquote. It's not ideal and makes the GitHub page less accessible.
Screenshot 2024-04-08 at 4 09 08 PM
  1. Could you also remove the following from the Solution to the problem section:
    • Checked out updates from the main branch using the git pull command.
    • Created a new branch named fix-hover-on-inactive-link.

Please use this part of your PR description to list the actual changes you made to the codebase 😉

  1. And lastly, could you switch html to CSS in code blocks to apply inline formatting? (see video below for reference):

https://github.com/p-foundation/pink-app/assets/76534205/3c1698db-00d0-4ac6-81b4-c82e6450c305

rasokolovska commented 7 months ago

Hi, thanks for the feedback, I have made changes and corrections