Homepage scroll indicator#1178
Conversation
JulienVig
left a comment
JulienVig
left a comment
There was a problem hiding this comment.
Mostly subjective preferences, the one important thing is that the lab logos are outside the screen on phones
| <span :class="bigTextTw"> A joint project of </span> | ||
| <div class="flex flex-row items-center gap-8"> | ||
| <a href="https://www.epfl.ch/labs/mlo/" target="_blank"> | ||
| <MLOLogo /> | ||
| </a> | ||
| <a href="https://www.light-laboratory.org/" target="_blank"> | ||
| <LightLogo /> | ||
| </a> | ||
| </div> | ||
| <span :class="bigTextTw"> Supported by </span> | ||
| <div class="flex flex-row items-center gap-8"> | ||
| <a href="https://www.epfl.ch/en/" target="_blank"> | ||
| <EPFL /> | ||
| </a> | ||
| <a href="https://www.ariadnelabs.org/" target="_blank"> | ||
| <AriadneLabsLogo /> | ||
| </a> |
There was a problem hiding this comment.
The new spacing makes the logo too far from the subheadings:
There was a problem hiding this comment.
Ironically I think this is a tailwind merge conflict haha
gap is defined twice, and the first definition seems to take precedence
I just reversed both declarations, should be good now
There was a problem hiding this comment.
Haha damn maybe at least using TailwindMerge will be useful?
It doesn't look any different after pulling your last commit, how does it look on your side?
There was a problem hiding this comment.
Look better on my side
There was a problem hiding this comment.
Reverting your last commit doesn't change anything on my side. I also tried using tailwind-merge and it doesn't change anything either so I assume it's not a class merge glitch.
Also your screenshot doesn't show any font size difference between headingTw and subheadingTw, while on mine subheadings are much smaller which I think explains why there is much more empty space:
Setting gap-8 in paneTw instead of gap-16 makes it look better on mine.
There was a problem hiding this comment.
Idk what I did in the previous screenshot, my bad
Now should be the last try, !gap-2 overrides the paneTw default value and should fix it for real ( 🤞 )
| Start training your AI models privately today. | ||
| </span> | ||
| <div class="mt-4 flex flex-wrap justify-center gap-x-4"> | ||
| <div class="flex flex-row justify-center gap-4"> |
There was a problem hiding this comment.
I think it looks too close without the mt-4
There was a problem hiding this comment.
seems like you didn't add mt-4, the button looks a bit too close to the text right now
JulienVig
left a comment
JulienVig
left a comment
There was a problem hiding this comment.
All good! just asked to add one mt-4
| <span :class="bigTextTw"> A joint project of </span> | ||
| <div class="flex flex-row items-center gap-8"> | ||
| <a href="https://www.epfl.ch/labs/mlo/" target="_blank"> | ||
| <MLOLogo /> | ||
| </a> | ||
| <a href="https://www.light-laboratory.org/" target="_blank"> | ||
| <LightLogo /> | ||
| </a> | ||
| </div> | ||
| <span :class="bigTextTw"> Supported by </span> | ||
| <div class="flex flex-row items-center gap-8"> | ||
| <a href="https://www.epfl.ch/en/" target="_blank"> | ||
| <EPFL /> | ||
| </a> | ||
| <a href="https://www.ariadnelabs.org/" target="_blank"> | ||
| <AriadneLabsLogo /> | ||
| </a> |
| Start training your AI models privately today. | ||
| </span> | ||
| <div class="mt-4 flex flex-wrap justify-center gap-x-4"> | ||
| <div class="flex flex-row justify-center gap-4"> |
There was a problem hiding this comment.
seems like you didn't add mt-4, the button looks a bit too close to the text right now
2 participants
Add a clickable bouncing chevron to the first screen of the homepage to show that the page is scrollable. Also cleans up the tailwind classes in the page. Some alignments/gap have slightly moved but I don't think it's bad ?
Screenshots
Before
After
closes #1142