Redesign documents

[rosylilly]

New design of documents.

It's includes some fixes:

• No <frame>
• Incremental Search for classes and modules
• Fix spacing for readability

You can preview this PR. Let's access https://crystal-doc-new-design.herokuapp.com/ .

[rosylilly]

# 
Setting environment variables from .travis.yml
$ export ARCH=i386
$ export ARCH_CMD=linux32

...

.......................................................................................................................................................
No output has been received in the last 10m0s, this potentially indicates a stalled build or something wrong with the build itself.
The build has been terminated

How can i fix it?

[jhass]

Don't worry, it's not you. The 32bit build just does that sometimes for some reason :/

[jhass]

This is awesome ❤️ I only have some minor remarks:

• I'd add some more margin to the search field, make it roughly the same width as the list items below. I think also a little more left padding couldn't hurt there.
• http://crystal-lang.org uses a black and white design, maybe we should consider keeping it that way?
• The :visited color provides very low contrast and I don't feel like it's useful information at all here, I'd just keep it white.
• Can we easily make the search include nested items too, that is search over their full name, eg. Crypto::BCrypt should show up if you search for BCrypt.

Maybe for a later iteration I think it would be awesome to have methods too in the search results and I think I wouldn't even mind them in the tree, similar to how devdocs.io does it.

[jhass]

Maybe something into this direction?

[ysbaddaden]

Maybe keep the blue links (but a nicer one than #00F) and have a light-gray background (#EEE) for the sidebar? That would better fit most projects by default.

Thought the purple scheme was very nice overall.

[oprypin]

Great stuff! There is so much thought put into everything.
No frames is amazing.
The list on the left autoscrolls too!

Some issues, though:

• The arrows look weird here on Linux+Firefox. Also, relying on CSS rotations may be dangerous.
• When clicking a module name, it should expand like with the arrow.
• When changing pages, the arrow expanding animations take some time.

Nitpicks/suggestions:

• The purple highlight when hovering over a summary item is distracting (too strong).
• You put "#"/"permalink" in the topright corner. Why not put the "source" link there as well?
• Search box looks strange there. Maybe it should have some margins. Maybe it's too round?

[asterite]

@rosylilly I love this new design!! ❤️❤️❤️❤️❤️❤️

I'll merge this right away. I think it's a million years ahead of what the current docs look and behave like. We can always tweek and enhance the small details later.

And I like the purple color too 😊

@BlaXpirit it was me who added that top "permalink", because it was hard to get it with all those frames. But now we can remove it. A "source" link is hard because a type might spawn multiple files... but there's the "defined in" section which lists them, and you can click them.

[rosylilly]

Thank you for review.
I'll continue to fix!

ref:

This design's color palette: http://paletton.com/palette.php?uid=64v0N0kmOkocquJhYphs3fazG9T

[oprypin]

• When clicking a module name, it should expand like with the arrow.
• When changing pages, the arrow expanding animations take some time.

Both of these are fixed easily and surprisingly well by changing the classes from parent current to parent current open.

Currently opened modules will be expanded AND when exiting from it it will be collapsed back unless you used arrow to expand it.

Check it out here: http://blaxpirit.github.io/crsfml/api/SF/Shader.html
(I really did need this change so that SF is expanded by default, so I applied this through dirty hacks)

[asterite]

@rosylilly I thought something was different: the code snippets have a different style! They look much clean and professional now. Thank you again!