[www] Refactor Homepage and Navigation & convert diagram to html/css

[fk]

WiP still unfortunately, but getting close! Little time right now, but will follow up with a decent list of what's changed and why later on … let's get this preview built now :P

Blockers:

• Masthead background still has issues on iPad/iPad Pro in portrait mode
• Diagram font sizes for large screens
• Homepage blog posts need a little more love

[gatsbybot]

Deploy preview ready!

Built with commit 8e85004

https://deploy-preview-1605--gatsbygram.netlify.com

[KyleAMathews]

Deploy preview failed.

Built with commit 8e85004

https://app.netlify.com/sites/using-remark/deploys/59778d38cf321c76f2bbdc6d

[gatsbybot]

Deploy preview ready!

Built with commit 8e85004

https://deploy-preview-1605--using-drupal.netlify.com

[KyleAMathews]

Deploy preview failed.

Built with commit 8e85004

https://app.netlify.com/sites/gatsbyjs/deploys/59778d36cf321c76f2bbdc4f

[gatsbybot]

Deploy preview ready!

Built with commit ff0d2af

https://deploy-preview-1605--using-drupal.netlify.com

[gatsbybot]

Deploy preview failed.

Built with commit ff0d2af

https://app.netlify.com/sites/gatsbygram/deploys/59797149a700c4471f91c105

[gatsbybot]

Deploy preview ready!

Built with commit ff0d2af

https://deploy-preview-1605--gatsbyjs.netlify.com

[KyleAMathews]

Deploy preview failed.

Built with commit 1ab61f7

https://app.netlify.com/sites/image-processing/deploys/5977906f0752d05a025f6961

[KyleAMathews]

Deploy preview failed.

Built with commit 1ab61f7

https://app.netlify.com/sites/using-styled-components/deploys/5977906f0752d05a025f6967

[KyleAMathews]

Deploy preview failed.

Built with commit 1ab61f7

https://app.netlify.com/sites/using-remark/deploys/5977906f0752d05a025f696c

[KyleAMathews]

Deploy preview failed.

Built with commit 1ab61f7

https://app.netlify.com/sites/using-contentful/deploys/5977906f0752d05a025f6969

[KyleAMathews]

Deploy preview failed.

Built with commit d1f7f81

https://app.netlify.com/sites/using-postcss-sass/deploys/5977af11424ef2274f48eac7

[KyleAMathews]

All these Netlify failures seem like internal to them problems.

This build for GatsbyJS succeeded however https://5977af10424ef2274f48eabb--gatsbyjs.netlify.com/

Looking really cool.

[fk]

I fixed a few more things, but won't be able to do much more tonight than at least to explain what's all the noise in here:

I originally started off with the intention to fix the whitespace around the homepage navigation – along came an icon replacing the "Github" link and links to the Discord Reactiflux Gatsby channel and the GatsbyJS Twitter:

Then I somehow ended up redoing the homepage masthead background as inline SVGs (was linear-gradient before) … this is not super precise either, but for me it lowers the "magic gradient stop number" issues of the previous approach a little.
Small bonus: An implementation of the layout by @SachaG where the brightest of the three shapes stays attached to the "chopped edge" in the Gatsby logo (as discussed here).

Then I went to procrastination wonderland:

• Nudged the existing six blocks of copy around – tried cards, but decided for a simpler layout instead that simply tries to do well for the existing copy.
• Adjusted the first two blocks of copy, "Modern web tech…" and "Bring your own data" a little to try and make things a little shorter – without changing the content significantly. Please check @KyleAMathews if this is OK for you.
• Stole the idea and some of the Reactiflux icons, added a Webpack one, and "Mustard" as accent color as suggested by @ArchieHicklin earlier. Right now they don't do much, but I figured they would be useful somehow along the way, plus I love those sprinkles of mustard, so I kept them in. Little did I know they would come in handy again just a day later already.
• Slowly started refactoring styles and moving stuff to components.
• Added the new brand colors to utils/presets, and replaced hopefully all inline hex values (apart from those in SVGs not inlined).
• Also added a border radius to the CTA buttons and the main content container on the homepage – these can also be switched of via a value in presets.
• Wondered how long it would take to redo the Explanatory Diagram in CSS. Tried a top-to-bottom only version that went quite fast – it's not 100% true to the original though, and could be way nicer. But it does work quite well on small screens, and adjusting to the original left-to-right layout of boxes for bigger screens should be relatively easy. (That said, …we could just have scrolled the image overflow on smaller screens. ;-)) A big nod and bow down to Segment and their beautiful "Capture data from every customer touch point." diagram design. I got a little jealous of their beautiful SVG animation, so now we have that whimsical 5-minute CSS animation there in the background of the "Build" segment of the Gatsby diagram. 45deg tho! ;-)

One thing that also happened along the way is that I removed the bold underlines from the sidebar links – that didn't happen very conciously though, so now that I look at all that purple …

That said, I'm also not too sure about those rounded edges any more. :-D

[KyleAMathews]

This is sooo cool! It's beginning to look really really polished.

A few notes.

• The tech icons sit a bit low on the line
• Looking at segments diagram, their little animated lines are really cool and would work too here. Put a bit more space between the data and Gatsby sections and animate it. Don't want to hold up this PR as everything here is great but this could be a nice refinement.
• There's some placeholder content still at the top of the diagram.

[KyleAMathews]

Looking at latest build (https://597908907960b1275563eed4--gatsbyjs.netlify.com/) at the diagram and was thinking it'd be nice to change "YAML/JSON" to "YAML, JSON, CSV". CSV is a hugely important way of storing data and I think this will be an attractive feature for a lot of people.

[KyleAMathews]

Actually, thinking some more.

Make the center box "CMSs" and the last header "Data" and the text inside the box "APIs, Databases, YAML, JSON, CSV, and more!"

Also make the order CMSs, Markdown, Data.