New landing page design

[shravanngoswamii]

Continuing #105
Preview the changes: https://turinglang.org/pr-previews/119

[github-actions]

Preview the changes: https://turinglang.org/pr-previews/119
Please avoid using the search feature and navigation bar in PR previews!

[shravanngoswamii]

If anyone is interested, then please feel free to take on this PR!

[simonsteiger]

I will definitely have time to finish this in July. Which points would you like to see addressed before this PR can be merged?

[penelopeysm]

Revisiting this. Is there a reason why the old PR was closed?

Also, I'd personally be happy to merge if some of the placeholder content is removed. Honestly, it's not like the existing front page has any resources, so even a fairly clean slate would be a huge improvement over the current one.

[shravanngoswamii]

Were you thinking about something similar to a logo or a different animation?

No animation, just simple branding header, I used new logo now and its looking good!

The new max width layout looks awesome by the way!

Thank You!

But again, take this with a grain of salt – I absolutely get the visual appeal of hover effects and I'm fine keeping it as is, too. :)

I added some consistent styles for border and hover effect, lets keep it for now!

[mhauru]

Looks really neat, good work @shravanngoswamii!

Only thing I would change is that in the News section, I'm not sure how the items that are displayed are picked, but currently it shows e.g. a post from 2019 announcing our blog. Maybe it could instead just show the three newest ones?

[shravanngoswamii]

Only thing I would change is that in the News section, I'm not sure how the items that are displayed are picked, but currently it shows e.g. a post from 2019 announcing our blog. Maybe it could instead just show the three newest ones?

We just have to put on_landing: true in metadata of post to make it appear on landing page! I chose 2 latest newletters, 1 GSoC post, 1 research blog, and the blog announcement! Latest 6 post which have on_landing: true appears!

[simonsteiger]

Great work @shravanngoswamii !

What do you think about changing the justify-content: center property in .panel-wrapper to justify-content: space-between? This would align the outer borders of the section headers like "What is Turing.jl? [...]" with those of the cards following below.

The aligned version is more appealing to my eyes, but once again this is of course subjective to some degree.

---

With justify-content: center:

---

With justify-content: space-between:

[shravanngoswamii]

Great work @shravanngoswamii !

All thanks to you @simonsteiger!

What do you think about changing the justify-content: center property in .panel-wrapper to justify-content: space-between? This would align the outer borders of the section headers like "What is Turing.jl? [...]" with those of the cards following below.

I did think of that first, but using justify-content: space-between messes up the layout on some other screen sizes, like see:

justify-content: center	justify-content: space-between

We can try something else, but I thought having bit space make the content look nested under titles so I kept it!