Update visual design #52

[porunov]

Updated visual design based on this theme https://github.com/jeromelachaud/freelancer-theme

The design is responsive for desktop, tablets, mobile phones.

DEMO: https://porunov.github.io/janusgraph.org

Fixes #52

Signed-off-by: Oleksandr Porunov alexandr.porunov@gmail.com

[porunov]

The design has been tested in latest versions of Chromium (Fedora OS) and Chrome (Android OS).

[porunov]

@FlorianHockmann Thank you for the review! I've addressed your issues. About Google Fonts, I've just deleted Google Fonts because fallback fonts are almost identical as for me. If you think those fonts are more appealing then fallback fonts, then I can upload those Google Fonts directly into the website.

[porunov]

I also found out that github page contains more users in production than main page. Is it OK if I add them into main page also?

[FlorianHockmann]

I also found out that github page contains more users in production than main page. Is it OK if I add them into main page also?

I vaguely remember that the homepage only contains users who approved showing their logo there. Since we don't show logos in the README.md, we can still list them there even if we don't have the permission to use their logo.

[porunov]

I vaguely remember that the homepage only contains users who approved showing their logo there. Since we don't show logos in the README.md, we can still list them there even if we don't have the permission to use their logo.

Do you know how should we ask for this permission? Can it be just personal email or should we ask in some discussion thread?

[farodin91]

• We should use the same color schema in the docs and in the frontpage.
• We should use the same font for all text e.g. header and feature tiles.
• We could add a getting started button after all feature tiles. (more present than in the footer)
• Why you link the apache software foundation but not the linux foundation in footer?
• We should remove giraph from the list of Analytics tools.

[porunov]

We should use the same color schema in the docs and in the frontpage.

I used colors from the style but changed the green color to be a little bit lighter because otherwise the logo of JanusGraph isn't clearly seen. If we use green color in header then another green color where logo is present should be changed to another color. This style uses 3 colors to divide sections and docs uses 2 colors. So, we should choose which colors we should use in which sections. Do you have proposals? I can use for example the header and footer with #4caf50 which is the color of the docs header and another color which is a little bit less green so that Janus word would be seen. For example:

Is it a good combination or should we use other color?

We should use the same font for all text e.g. header and feature tiles.

I am not a designer. There were different fonts for header and other text. I can change to the same font if needed.

We could add a getting started button after all feature tiles. (more present than in the footer)

What if we just change the place of Getting started button with See documentation button? Also, we can just use Getting started button in instead of See documentation button and remove the button in the footer completely.

Why you link the apache software foundation but not the linux foundation in footer?

There is no link to linux foundation in the current website ( janusgraph.org ) but I can add this link.

We should remove giraph from the list of Analytics tools.

I can remove it but I copy pasted it from the current website. Also, as I understand Giraph is supported in 0.3.x but will be dropped in 0.4.x am I right?

[FlorianHockmann]

Do you know how should we ask for this permission? Can it be just personal email or should we ask in some discussion thread?

I assume that these things are agreed upon when we add a production user in the first place, but I'm not sure. Maybe @mbrukman can correct me if I'm wrong.

I can remove it but I copy pasted it from the current website. Also, as I understand Giraph is supported in 0.3.x but will be dropped in 0.4.x am I right?

I would also not change any content in a PR like this. That makes the review only more complicated. This PR focuses on changing the design so it shouldn't change any content in my opinion. But yes, Giraph was was removed in TinkerPop 3.4.0 and therefore JanusGraph 0.4.0. We also already have an issue here to update the TinkerPop related content: #45.

[farodin91]

Is it a good combination or should we use other color?

We could use a tool like https://www.colorhexa.com/4caf50 to choose colors based on the JanusGraph green.

There is no link to linux foundation in the current website ( janusgraph.org ) but I can add this link.

It's a bit funny we link apache but not linux foundation where we are part of.

What if we just change the place of Getting started button with See documentation button?

This sounds great.

[porunov]

@chupman

In the middle section with all the value adds like scalable, open source, etc. the icons and text don't line up quite right. I tried adding padding-right: 20% to .second-title and it looked a little better to me, but it would still need more tuning.

This padding moves text too far on some resolutions and text is out of the blocks.

Other suggestions are good.

[porunov]

JanusGraph green logo color hash #108768

[chupman]

How about instead:

.second-title {
...
    margin-right: 30px;
}

[porunov]

I think if we use color #4caf50 for the header then we should use another shade of green for below background. Something like: #9cd69e , #5ac281, #7ad69c or something else

[porunov]

How about instead:

.second-title { ... margin-right: 30px; }

Looks better. Applied.

[porunov]

@farodin91 @chupman I think I've addressed all your comments. Except removing Giraph because it will be handled in a separate PR. I don't know if the current set of colors is better or worse but it now looks more like the style in the documentation here https://farodin91.github.io/janusgraph .

[chupman]

@porunov, Wow that's a lot of green. I'm going to agree with what you were alluding to and say the color scheme looks worse.

[porunov]

@chupman I can change back to those colors which were in use by default. Or should I use some other colors?

[porunov]

The previous colors were:

9fe6d8 - light green content sections

rgb: "24,288,156" - for some buttons

2c3e50 - header, footer above and navigation buttons

233140 - footer below and hovered navigation buttons

All colors can be changed in _config.yml in section color.

[porunov]

The previous colors were dark blue and turquoise. We could also use the color scheme from https://www.linuxfoundation.org/ (blue and turquoise). Any other proposals?

[porunov]

The colors are turned back to defaults. I have moved almost all colors to configuration file so that it would be easy to play with different colors if someone wants to find a better color scheme. I propose to not hold this PR just because of color scheme because it is hard for me to find the color scheme which will be appealing to everyone. If anyone have good color scheme then update _config.yml color scheme and post it here so that I could apply it. Otherwise the color scheme can be applied with another PR.

@chupman @farodin91 I am requesting to check if I've resolved your comments apart from color scheme.

[chupman]

@farodin91 @porunov This will go live as soon as we merge into master. If we want to do the color scheme in a separate PR this should target a feature branch instead of master

[porunov]

@chupman I am OK with default color scheme. Do you want to use another color scheme?

[porunov]

Choosing a nice color scheme can take a lot of time. I am proposing to go live with default colors. The problem is that we don't have a volunteer currently who will choose a nice color scheme. That is why we can stuck in a feature branch for a really long time. If anyone finds a better color scheme then we always can update it with a separate PR. As for me, this default color scheme looks better then the current website janusgraph.org . I don't see anything bad if we update color scheme in the future (again, if anyone decide to update it).

[chupman]

I just keeping thinking that it's a lot of green. I have 2 more css proposals. I felt like the logo section was too big. Shrinking it will make is so users don't have to scroll down to see the getting started and view it on github buttons (Also results is slightly less green). The second block is for mobile layout. After these fixes I'm fine with revisiting the color scheme after the mkdocs PR is ready.

@media (min-width: 768px)
header .container {
    padding-top: 120px;
    padding-bottom: 50px;
}

header .container {
    padding-top: 80px;
    padding-bottom: 30px;
}

[farodin91]

If you reduce the padding of logo section, than you should also reduce the size of the logo.

[porunov]

@chupman I just want to ask, do you see a dark blue or green header right now? If you see a green header then you should clear your browser cache. I notice that Chromium caches css styles

[chupman]

I'd say it looks like a seafoam green, not the dark green you tried earlier. I'm fine with making the logo a bit smaller, but I thought it looked fine with just the style updates I listed. 170px of padding was a lot

color code I'm seeing is#9fe6d8 as to not get into a discussion of naming RGB combinations.

[chupman]

One more padding shrink, this time for the middle light greenish section.

section {

    padding: 30px 0 0 0;

}

[porunov]

@chupman I've applied your suggestions

[chupman]

@porunov Thanks for putting this together. I guess I should try to find cycles to look at the mkdocs improvement next so we can be all fancy and new.

[porunov]

Thank you everyone for reviews!

I guess I should try to find cycles to look at the mkdocs improvement next so we can be all fancy and new.

It would be great!