Style updates

[lukebemish]

Here's my attempt at style pokes, put here as a draft PR so that it's easily visible.

(see discussion around https://discord.com/channels/313125603924639766/1155593265379283035/1155600668451672085)

Current state (updates 25-Sep-2023):

---

Preview URL: https://pr-4.neoforged-website-previews.pages.dev

[Poopooracoocoo]

Good to see some changes here! Not super keen on that background colour. I'd go with a more standard grey; lighter and redder, for both contrast and appearance. And the larger max-width makes it harder to read.

[lukebemish]

The background color is taken straight from the logo; I could try a different one but honestly I'm not entirely sold contrast wise with some other greys; with the orange highlights, a redder grey tends to make links disappear. The max width... on my screen it's definitely readable at that width, and keep in mind that the width is actually capped so on larger screens it'll limit how wide it is. (My screen is pretty dang small because it's a laptop)

[lukebemish]

Updated the width stuff after a bit of poking around - it should now look reasonable on both very wide and very small screens

[lukebemish]

I've additionally done some stuff so that stuff shouldn't jump around as much while loading the page, and instructed hugo to create webp images that can be alternatively loaded if a browser supports it to speed up image loading (this doesn't make sense with the size and sort of images present here)

[neoforged-pages-deployments[bot]]

Deploying with Cloudflare Pages

Name	Result
Last commit:	8abd680a6091b157f05a7c32377e8ba673409aa0
Status:	✅ Deploy successful!
Preview URL:	https://11fe2780.neoforged-website-previews.pages.dev
PR Preview URL:	https://pr-4.neoforged-website-previews.pages.dev

[Poopooracoocoo]

Would you please consider reducing the max width more?

[lukebemish]

It's capped at the lower of 1920 or 80% of the screen except on small screens. From the screenshots I've seen on larger screens it seems to be fine, but if you could share a screenshot of what you see the issue as being that would be helpful

[lukebemish]

(ignore the broken download button for now. It's funky because of some hard coding in the old system I need to fix)

[cpw]

I wholeheartedly approve. :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1: :+1:

[Poopooracoocoo]

The issue is that larger widths make it harder to read as it creates more distance for your eyes to go to the next line. Try reading the news post, for example. I have the same issues with the width on my desktop and on my laptop. I feel that a max width of 1920px is too much and a min width of 1380px is too much.

[lukebemish]

Well, the min width certainly can't be any smaller... that's what it shows up as on my screen, and I know that that's a reasonable size. My question is: I've seen screenshots from other people of it at the max width and it still seemed readable. However, this was with a limited selection of screen configurations, of course - if it's difficult to read on your screen, can you share a screenshot so that we know what that looks like?

[Poopooracoocoo]

Screenshots

[cpw]

Delaying the whole restyle because of trivial tweaks to widths is not something I want to happen. I think it is excellently readable across a variety of devices and browser sizes.

[Poopooracoocoo]

I didn't ask for it to be delayed lol. I requested changes a while ago. Narrower widths are standard on websites.