The Crystal website at crystal-lang.org has received a major overhaul.
We have a fresh design and a ton of other improvements, such as better support for mobile devices and dark mode, as well as updated and new content. Check out the new install page, for example!
Read more in the announcement:
https://crystal-lang.org/2024/03/27/website-relaunchLooks really nice! Love the attention on accessibility!
Very cool.
I like that we can still rotate the crystal with the mouse.
Gee, didn’t know that before. The things you learn…
Can you put back the link to the github repo at the top on the home page.
In Safari 15.6.1 this page Install - The Crystal Programming Language lacks left and right margin.
@straight-shoota deserves a large chunk of the praise here 
In particular many of the improvements like the dark mode and other accessibility options are his own doing.
Hm, actually it looks like all pages lack margins? 
No idea what’s wrong there and I have no means to investigate myself.
Would you mind opening an issue at Issues · crystal-lang/crystal-website · GitHub with a couple of screenshots?
It would be a great help if you could take a look into the developer tools to see if any CSS rules show any errors?
Odd, we also got another report on the whole page being broken on Safari 16.6. With Safari 17.4.1 it looks good here. Is it possible for you to upgrade and test again?
really? here (Safari 17.4.1) only when reducing the viewport I lose the margin (and this is expected)
The Shards example overflows and scrolls, but I’m not seeing a visible scrollbar. All the others have scrollbars where necessary
Works well with latest Firefox and Chrome on macOS 12.7.4
Very sluggish on latest Safari 17.4.1 though. Haven’t had time to dig into it yet.
The is only 1 property marked as unsupported in Safari 15.6.1: container-type: inline-size; (body element, set in layout.scss:13)
But the zero margin problem is due to it being set in reset.scss:11:
There ia also a JS error in console in Safari 15.6.1
[Error] ReferenceError: Can’t find variable: $
Global Code (bundle.js:6:99)
But, in Chrome there is also a JS error in console, but different one:
bundle.js:391 Uncaught TypeError: Cannot read properties of null (reading ‘querySelectorAll’)
at bundle.js:391:30
(anonymous) @ bundle.js:391
Nope, I’ll have to wait until my current very dated MacBook dies and then I’ll get new Safari :)
We managed to work around a couple of layout issues in WebKit. So it should look much smoother in Safari now. 
Lesson learned: WebKit needs more extensive testing, it apparently has fallen behind Blink quite a bit (and Gecko). As far as I can tell, the issues we had were genuine browser bugs and they weren’t even in the most modern CSS features (most are apparently caused by a faulty calculation of flexbox items’ inline size).
We’re still getting reports for some weird rendering issue in mobile Safari:
This is very hard to debug and we haven’t even established the specific conditions, looks like recent Safari versions are affected, but only on iPhone. Any help is appreciated.
Would it be possible to add a light mode for the bit at the top? Personally I can’t read it; the rest of the page looks good though.
Oh, that’s valuable information. Could you be more specific what’s the issue? White text on dark background? The dark background itself?
Is there some kind of browser setting that we could respond to?
I understand you’d prefer a version where the header has basically a filter: invert(); like this:
Yeah, that looks quite nice to me. In contrast (no pun intended) to most other developers, I find dark mode really strains my eyes, I have to squint to read it. Even then, I think the dark grey on top of the black background is hard to read, although maybe everyone else has their monitor on very high. Personally I keep everything in light as it’s easier to read, and I have the brightness down generally as low as it goes and never had any problems at 3AM. And I guess it also looks a bit odd having an all-black banner section given the website is in light mode by default. Just the top menu might make sense, but it’s a massive shift as I scroll down that looks a bit odd to me.
And yes, AFAIK most recent browsers have a light/dark setting. Nextcloud keeps resetting for me and it’s very annoying ;)
