[1.0] Continuation: WIP update home page with new design

[fk]

This picks up where #1353 left off – I'll try to get done as much as possible in the few hours I have today.

[gatsbybot]

Deploy preview ready!

Built with commit 28ae0ae

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

[gatsbybot]

Deploy preview ready!

Built with commit 28ae0ae

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

[gatsbybot]

Deploy preview ready!

Built with commit 28ae0ae

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

[fk]

@SachaG Hi! :) Some quick questions, crossing fingers you have the time to reply:

• Was the layout intended to be 100vh?
• I noted that the cut-off edge of Gatsby logo's "G" is transparent and lets the left background triangle "shine through". I understood that this was your intention … ah, before I try to explain this with words:

Should this

ever happen, or should the left background always be aligned to the Gatsby logo like so?

• Kyle started implementing the diagonal background using linear gradients. I read that you guys were also thinking about animation, and thus thought of using three divs, one for each triangle in the diagonal design. Did you have any thoughts on implementation yet?

[SachaG]

Looking at the current design, I think it works well even without being 100vh. A full-height layout might look good, but right now I'm not sure how we'd fill up the space, and there's also the risk that people don't realize they can scroll and miss out on the content. So I'd say keep it like this for now.

Having the logo align with the diagonal would be cool, but it might be a pain to implement, so I don't think it matters if it doesn't. Maybe in the future, if we can make the logo a bit bigger to make the effect more obvious, it might be worth trying it?

And yeah I think using divs and animating them could work great (unless you can also animate gradients? not sure…). I could see to main ways to use animations:

• Entry animation when the homepage loads. For example, you could have the triangles come in from each side and slide into place.
• Transition animation. Browsing to a different page (say, docs) would trigger some kind of animation where the triangles slide around to form a different layout. This would probably work best with a 100vh layout. Here's a mockup:

(note: not saying this is necessarily a good idea…)

[KyleAMathews]

Looks like linear-gradients animate just fine with keyframes https://www.gradient-animator.com/

Need to add an API for page transitions but definitely will add them to gatsbyjs once the API is ready :-D super excited for that!

[fk]

Wow, that was quick. And a sweet (manual ;)) motion mockup! 🎉
Thank you so much @SachaG!

(note: not saying this is necessarily a good idea…)

I hear you … still, seeing this all my questions and pondering regarding 100vh and logo/hero background alignment now make me fantasize about just putting the "elevator pitch" into the left offscreen and animating that in, too, and a fixed logo and nav and transitioning colors… :D

Looking at the current design, I think it works well even without being 100vh. A full-height layout might look good, but right now I'm not sure how we'd fill up the space, and there's also the risk that people don't realize they can scroll and miss out on the content. So I'd say keep it like this for now.

👍 Yep. After hacking around a little, I quickly realized I need to drop all that ambitious stuff that raises my questions – for tonight I'll have to stick to the gradients and make stuff work for the smaller screens, already burned way too much time with

and want to leave s/th at least bearable to pick up for tomorrow.

[KyleAMathews]

Deploy preview failed.

Built with commit d7fe06f

https://app.netlify.com/sites/image-processing/deploys/595af59fa700c401b768179d

[fk]

@KyleAMathews I'm afraid that's all I got for today/night, already nodded away twice ;)

[fk]

Updated Figma file with realigned "YAML/JSON", "DEPLOY" block contents: https://www.figma.com/file/2Mxlr0xTyZVeTlWOo7PJPR/Gatsby-(deploy-tweaks-%2B-realign)

[KyleAMathews]

This looks so good!!! ❤️ Seriously. Deploying this right away so we can get rid of that argyle nonsense I added :-D

Thanks @SachaG and @fk!

Lots more to do but we're making big strides in the right direction (aka a kickass website). It stands to reason after all that the best Gatsby website in the world should be gatsbyjs.org :-D

[KyleAMathews]

I need to message some folks about using their logos. Will get on that.

[fk]

@KyleAMathews Just when I was about to apologize to @SachaG for butchering his layout :-D (at least on small screens … also CSS is not nice, maybe it's me and css-in-js). Step by step! <3

Ah damn, also forgot to fix the logo color :/

[KyleAMathews]

@fk big projects are just many small steps in the right direction! Gradatim Ferociter!

[fk]

@KyleAMathews @SachaG Should we just do this for now?

Hm, let me PR with Futura actually.

[KyleAMathews]

Ooo that's nice!

[KyleAMathews]

I thought we'd lost you @fk in europe-land to the night time? :-)

[fk]

@KyleAMathews DaVinci Sleep :D (damn everything is on YT … mostly powered by the neighbors child screaming tho)

[KyleAMathews]

lol, that was an awesome clip :-)