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.
@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.
