Major Improvements & Xtras

[Rahuletto]

In Progress:

Done:

✔ Indicator for multi-image
✔ Hover effect in gtk/icons/dotfiles select box
✔ Fix Stretched images
✔ Ability to zoom in images
✔ Ability to close image by clicking background

Note !

This is not the most efficient way to achieve. So if you have a better way, Make sure to suggest ;)

[Rahuletto]

✔ Fix Stretched images

This PR also fixes images to be in a exact ratio and prevents stretching

Example:

Before	After

[Rahuletto]

✔ Ability to zoom in images

This PR also implements zoom-in/zoom-out functionality to images (Only few images work by this system due to CSS)

Slider:

Example:

100% width	200% width

[Rahuletto]

⭕ Minor Improvements

This PR also improved styles and some minor yet unnoticeable changes

✔ New Theme Color !
✔ New Scrollbar with floating effect [Meaning it is not in a corner] (like Safari/Discord scrollbar)
✔ Updated transitions ! Now things feel much snappier
✔ Fixed contrast issues

• ✔ Fixed contrast issues

Before	After

• ✔ New Scrollbar with floating effect

This styling rule follows my new portfolio style too ! (Btw the old site styling is somewhat based on my old portfolio site)

Before	After

[Rahuletto]

This is to address the issue #46

@Pesc0 @ArmoredVortex @ManorSailor

[ArmoredVortex]

I don't know if its just me but the zoom just doesn't work for me at the moment. Browser: Firefox-Nightly 106.0a1 User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0

The slider does change the size of the images but they overflow all the time. Plus the slider doesn't work for a lot of images.

[Rahuletto]

This is mainly due to the original image size. If u try with an image that has a large size (like some gtk-themes), you can zoom. I don't know why. Maybe we can implement it via scale() in css. And these changes have been made under 3 hours (rushed). I'll implement a native zoom system if I manage to 😳

And yea I made it to overflow and make it change the zoom position via the scrollbar.

This is not the final product so maybe we can change it.

[Rahuletto]

✔ Indication for multi-image

This PR commit implements an indication to see the number of images available

[Rahuletto]

⭕ Minor Update

• ✔ Zooming

  Zoom now works on every image as we are using transform: scale() instead of width property

• ✔ Range slider

  Now the design is consistent through the site ! The range slider styling is now very similar to scrollbar styling also making the light theme cooler

[Rahuletto]

This PR is ready for review and can be merged