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.

[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!

[simonsteiger]

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

Ouch! I didn't think of that, hmm. The current solution is definitely better then.

Maybe there's a way to shrink the card width and force one row until it collapses into the mobile layout with a single column? I'd be happy to tinker with this a bit in the next days; if it doesn't work, we can simply stick with your current solution. :)

[shravanngoswamii]

Maybe there's a way to shrink the card width and force one row until it collapses into the mobile layout with a single column? I'd be happy to tinker with this a bit in the next days; if it doesn't work, we can simply stick with your current solution. :)

Feel free to experiment and push directly to this branch—I’ve added you as a collaborator!

One more favor @simonsteiger, if you have some time: Could you modularize the styles.css and convert all the styles to SCSS, like you did in your original PR? That approach was more optimized than what I’m using now, and I’m not much familiar with SCSS or design principles myself.

here is the your modularized theming code from that old PR for reference, incase you try: theming.zip

[simonsteiger]

Could you modularize the styles.css and convert all the styles to SCSS, like you did in your original PR?

Oh, I'd be happy to help, yes! I should be able to find the time for this. :)

[shravanngoswamii]

Oh, I'd be happy to help, yes! I should be able to find the time for this. :)

Let me know if you need my help!

[simonsteiger]

No worries, I'm on it :)

[simonsteiger]

@shravanngoswamii How much "liberty" do I have regarding the specific colours / grey tones that are currently used in the styles.css document? I would try to match the current ones as best as possible, but instead of specifying two or more different hex codes, I'd try get as close as possible with one base colour and then lighten($color, 5%) or so.

[shravanngoswamii]

@simonsteiger Please feel free to change the colors to whatever looks best — we arrived at this grey based on your earlier experiments. Your UI/UX and color sense are far better than mine 😅! We just need to make sure that docs site matches this one: TuringLang/docs#613

EDIT: (I will update docs PR based on your changes, no worries)

[simonsteiger]

Alright, so far so good I guess. I think I've managed to transfer all the CSS styles to SCSS styles. I definitely didn't figure out how to change the hover color of the icons in the navbar, asked Claude and it wasn't of much help either (likely also me not working hard enough to prompt it properly). I felt it was minor enough to leave it for now, but if you @shravanngoswamii recall how you did that, I'd be happy to correct it of course.

The most notable style change I've made is probably to the hover effect of the cards. I found the hover effect of the buttons interesting (grey border by default, no border + translateY + stronger shadow on hover), and applied the same to the hover effects of the cards in both light and dark mode. I like it how it "feels" and also that it's similar effects across the website.
Happy to switch back to the light blue borders though if you prefer this! :)

[shravanngoswamii]

I definitely didn't figure out how to change the hover color of the icons in the navbar, asked Claude and it wasn't of much help either (likely also me not working hard enough to prompt it properly).

Previously, I wasn't using !important for links (a:hover {}) so that was being applied to it, now in your updated SCSS, _layouts.scss is setting the color for all .nav-link elements using an !important tag. This prevents the hover effect from applying. We need to add a more specific rule that targets the links on hover and also uses !important to override the base style.

I felt it was minor enough to leave it for now, but if you @shravanngoswamii recall how you did that, I'd be happy to correct it of course.

I have updated it, no worries!