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

fk · 2017-07-25T18:25:57Z

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

* refactor main navigation to component * refactor mobile navigation to component * slightly update mobile navigation UI: * use sidebar background color * use Gatsby logo color as icon and copy color * add links to Discord, Twitter next to Github * move "hero unit" and background to components * drop linear-gradient and instead go with SVG background images and background-size:cover for the "hero unit" background…

* inline hero background SVGs * add brand, sidebar, and hero background colors to presets * procrastination bonus: silly CTA button hover effect

* remove Diagram "Deploy" icon for now * tidy webpack.svg * make use of presets.radius, brand colors * tidy Diagram, Masthead and presets moar * add gutters component, can't make rhythm work in utils/presets.js

gatsbybot · 2017-07-25T18:41:55Z

Deploy preview ready!

Built with commit 8e85004

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

KyleAMathews · 2017-07-25T18:45:22Z

Deploy preview failed.

Built with commit 8e85004

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

gatsbybot · 2017-07-25T18:47:51Z

Deploy preview ready!

Built with commit 8e85004

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

KyleAMathews · 2017-07-25T18:49:10Z

Deploy preview failed.

Built with commit 8e85004

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

gatsbybot · 2017-07-25T18:53:43Z

Deploy preview ready!

Built with commit ff0d2af

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

gatsbybot · 2017-07-25T18:53:45Z

Deploy preview failed.

Built with commit ff0d2af

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

gatsbybot · 2017-07-25T18:54:34Z

Deploy preview ready!

Built with commit ff0d2af

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

KyleAMathews · 2017-07-25T18:55:36Z

Deploy preview failed.

Built with commit 1ab61f7

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

KyleAMathews · 2017-07-25T18:55:38Z

Deploy preview failed.

Built with commit 1ab61f7

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

KyleAMathews · 2017-07-25T18:55:39Z

Deploy preview failed.

Built with commit 1ab61f7

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

KyleAMathews · 2017-07-25T18:55:39Z

Deploy preview failed.

Built with commit 1ab61f7

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

…and increase its size for Desktop along the way.

KyleAMathews · 2017-07-25T20:50:34Z

Deploy preview failed.

Built with commit d1f7f81

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

KyleAMathews · 2017-07-25T21:10:55Z

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 · 2017-07-26T01:10:18Z

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 · 2017-07-26T01:56:05Z

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 · 2017-07-26T21:46:32Z

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 · 2017-07-26T21:53:50Z

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.

Florian Kissling added 6 commits July 22, 2017 18:56

Move Discord icon, "hero" and CTA button to component

944cdf0

* inline hero background SVGs * add brand, sidebar, and hero background colors to presets * procrastination bonus: silly CTA button hover effect

:P

bb81c3b

Tidy Diagram, rename Hero to Masthead

836776e

Add Cards, Card, and CardHeadline components; tidy moar

8e85004

* remove Diagram "Deploy" icon for now * tidy webpack.svg * make use of presets.radius, brand colors * tidy Diagram, Masthead and presets moar * add gutters component, can't make rhythm work in utils/presets.js

Add Now.sh to the list of static web hosts

1ab61f7

Florian Kissling added 2 commits July 25, 2017 22:29

Fix "Data Sources" flexbox layout for Safari and iPhone5-ish screens

a00541f

Use typography rhythm for Diagram Gatsby logo and container

d1f7f81

…and increase its size for Desktop along the way.

KyleAMathews mentioned this pull request Jul 25, 2017

[www] Replace Tex Gyre Schola with Spectral #1557

Closed

KyleAMathews and others added 4 commits July 26, 2017 11:36

Merge branch 'master' into www-main-navigation

4530ead

Copy editing

f1ba3a1

Try three blog posts on front page

90a449c

Fix tech icon alignment, move to component

288bcd5

fk deleted the www-main-navigation branch August 8, 2017 21:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

fk commented Jul 25, 2017 •

edited

Loading

gatsbybot commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

gatsbybot commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

gatsbybot commented Jul 25, 2017 •

edited

Loading

gatsbybot commented Jul 25, 2017 •

edited by KyleAMathews

Loading

gatsbybot commented Jul 25, 2017 •

edited

Loading

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017 •

edited

Loading

fk commented Jul 26, 2017

KyleAMathews commented Jul 26, 2017

KyleAMathews commented Jul 26, 2017

KyleAMathews commented Jul 26, 2017

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

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

Conversation

fk commented Jul 25, 2017 • edited Loading

gatsbybot commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

gatsbybot commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

gatsbybot commented Jul 25, 2017 • edited Loading

gatsbybot commented Jul 25, 2017 • edited by KyleAMathews Loading

gatsbybot commented Jul 25, 2017 • edited Loading

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017

KyleAMathews commented Jul 25, 2017 • edited Loading

fk commented Jul 26, 2017

KyleAMathews commented Jul 26, 2017

KyleAMathews commented Jul 26, 2017

KyleAMathews commented Jul 26, 2017

fk commented Jul 25, 2017 •

edited

Loading

gatsbybot commented Jul 25, 2017 •

edited

Loading

gatsbybot commented Jul 25, 2017 •

edited by KyleAMathews

Loading

gatsbybot commented Jul 25, 2017 •

edited

Loading

KyleAMathews commented Jul 25, 2017 •

edited

Loading