Fixed #98 Hover effect causing unintended padding causing unwanted layout shift

gauravsingh1281 / Rentalog.in--Frontend

Rentalog || Free Rent Management Web App For Landlords. With Rentalog, landlords can keep track of important information about their renters, including their names, addresses, and rental payment history.

https://visionary-fenglisu-db1b1d.netlify.app/

MIT License

95 stars 252 forks source link

Fixed #98 Hover effect causing unintended padding causing unwanted layout shift #99

Closed Suman-Jyoti-Phukan closed 1 year ago

Suman-Jyoti-Phukan commented 1 year ago

Fixed #98

Changes I made

Added scale instead of increasing the text.
Why scale-[1.081]?
Initial text size was 18.5px and when we hover the text the size was increased to 20px. So , to add the same effect in scale I did the scaling by - Scaling factor = Desired size / Initial size Scaling factor = 20 / 18.5 Scaling factor ≈ 1.081
Also , the transition effect will not work as defined in the li element cause you explicitly defined transition in your css rule which has higher precendence .So , to get the desired transition you have to change it:
```
.header-section li {
list-style: none;
font-weight: 600;
font-size: 18.5px;
color: #262626;
transition: ease 200ms;
}
```

netlify[bot] commented 1 year ago

Deploy Preview for visionary-fenglisu-db1b1d ready!

Name	Link
Latest commit	323352da2694b2a7ec682c370fe42469e145d1e5
Latest deploy log	https://app.netlify.com/sites/visionary-fenglisu-db1b1d/deploys/653c1096f3f1fb000833a432
Deploy Preview	https://deploy-preview-99--visionary-fenglisu-db1b1d.netlify.app/
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

gauravsingh1281 commented 1 year ago

Hi @Suman-Jyoti-Phukan please resolve the merge conflict.