Added 'Getting Started' button and started improving homepage style #164
Conversation
| @@ -9,11 +9,24 @@ | |||
| } | |||
|
|
|||
| .hero { | |||
| background: url('/static/img/bg-pattern-dark.png'); | |||
| /* background: url('/static/img/bg-pattern-dark.png'); */ | |||
There was a problem hiding this comment.
Initially, I thought of leaving only the black background; it seemed to me a more modern and minimalist look. If, instead, we want to keep a background image, as an alternative, I would have something similar to this:
What do you think? Otherwise, it's perfectly fine to keep the current one.
| align-items: center; | ||
| justify-content: center; | ||
| background-color: black; | ||
| height: 50vh; |
There was a problem hiding this comment.
more in line with the actual
| height: 50vh; | |
| height: 32vh; |
src/css/custom.css
Outdated
| .text-center { | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
don't we have it already somewhare here?
https://docusaurus.io/docs/styling-layout#styling-your-site-with-infima
There was a problem hiding this comment.
Unfortunately, I couldn't find something similar. Infima doesn't seem to have as many utility classes.
There was a problem hiding this comment.
Instead, it exists, it's not written in the documentation, but by trying, using Infima's style 'with double dash' I managed to use Infima's utility class. I will remove this line of code.
|
I think the text and logo size is too small.
|
The banner in that screenshot is huge. I much prefer the smaller banner on the current site. In my opinion, the focus should be on content, not a header. |
Thank you for your feedback. Yes, this happens because I used 'vh' as a unit of measurement for the height, so if we zoom out the page, the header still occupies half of the height. To fix it, I will remove this unit of measurement and set the height back to its original value. |
There was a problem hiding this comment.
382 kb for an optical effect is a big no for me.
I am also visiting fastify.dev when I am in the train to get links to the documentation for answering people. I know that the image is cached. But still. If somebody wants to visit the page for the first time with his mobile, then traffic is wasted.
E.g. With #125 i also reduced the size of our avatars on the start page. And I especially checked with my mobile that the loading time is improved without having significant impact on the image quality.
Also the new background image seems to be not "crisp" and you can see that the transitions are pixelated. Seems like it was created in photoshop and the subpixels were not fixed. Maybe also the image was compressed first lossy (e.g. first save as jpg) and then transformed to png.
Also the current discussion reminds me of the old "make the logo bigger" joke/problem.
I apologize if my critique is too harsh.
|
Ok, it was just a suggestion. The main change in this pull request was the addition of the two buttons for quick access to the "Getting Started" and "Resources" pages. No problem, let's go back to the current image. |
It seems that when I fixed the width for the two buttons to make them the same size, I have forgotten about these other two. I'll correct this issue. Additionally, I want to add a media query to adjust the spacing between the two buttons for smartphone users. |
mcollina
force-pushed
the
main
branch
2 times, most recently
from
3de85d2 to
8633c45
Compare
Description
This pull request introduces two main changes:
I've opened this pull request to address a specific aspect of issue #133, which is the improvement of the "Getting Started" navigation, while also initiating the process of modernizing the homepage's style.
I'm also open to different ideas and approaches for implementing these changes.
Related Issues
Partially addresses [#133]