Fix website design

[G0razd]

I've made the initial image cover entire screen like in the screenshot, ive added smoothscroll to the button and made it a button and I've added overflow:auto to the code gits

[wooorm]

Heya!

• can you explain why?
• the cover isn’t 100% because this way people can see that there’s more
• the code style uses single quotes

Generally, adding scroll isn’t bad per se, but I don’t see lots of value either? Can you explain why? Is it really worth including a library for this? Browsers support smooth scrolling too: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

[wooorm]

Ping!

[G0razd]

Hey @wooorm!
Sorry for the delayed reply; my first response hasn't been posted, it seems. I've submitted a commit ba1d76d that should resolve some issues with the updates. In regards to your questions:

• In the screenshot of the website in the repo, there is no visible content on the landing page. From a UX perspective and based on what I've experienced on other websites, it is usually done with a landing page that covers the entirety of the screen and an arrow-down button that is interactive.
• I have a Prettier plugin that recommends double quotes, but I've changed it for you in the second commit ba1d76d.
• I have since removed the smooth scroll package and added the property "scroll-behavior: smooth;" which has generally the same behavior. Docs

I've also created a script that will automatically update all packages in the npm command output, reflecting the real output in commit 6f781e1.

I hope this answers all your questions. This is my first contribution to any open-source project, so feel free to give me pointers on how to make better changes. Thanks.

[wooorm]

In the screenshot of the website in the repo, there is no visible content on the landing page. From a UX perspective and based on what I've experienced on other websites, it is usually done with a landing page that covers the entirety of the screen and an arrow-down button that is interactive.

That’s why the size of the cover is smaller than the entire screen. We could also use 85 or 90 if you prefer to see some text?
The arrow is there not to teach people to click things, but to indicate that they can scroll. And they should! This isn’t a slideshow.
I’m not super opposed to doing a scroll when someone does click. I don’t think it’s a big improvement but its fine. Though, I don’t think you should use 100% height. That hides the fact that folks should scroll.

I have a Prettier plugin that recommends double quotes, but I've changed it for you in the second commit ba1d76d.

And that’s very nice for your own development. Typically, open source projects already use a consistent style already. So I’d recommend turning off these things when you contribute. You can always ask to see if folks want a separate PR formatting things!

I have since removed the smooth scroll package and added the property "scroll-behavior: smooth;" which has generally the same behavior. Docs

👍

I've also created a script that will automatically update all packages in the npm command output, reflecting the real output in commit 6f781e1.

That’s very cool, but seems a bit much to me. I’d rather not slow everyone down that views the website and use their data plans for this.
These things don’t update much. I think it’s fine to not be recent.
This is just a little website: the readmes are up to date and contain extensive docs!
Could you remove it?

This is my first contribution to any open-source project, so feel free to give me pointers on how to make better changes. Thanks.

Welcome! I recommend saying that you’re new early on!
For your future contributions to open source: I recommend discussing what to change and how first, before doing work! See also https://github.com/remarkjs/.github/blob/main/support.md.