[www] Add "Used by" block to homepage masthead #1707
Conversation
@SachaG. On small screens said block is displayed below the homepage main content. For now the implementation drops the lighter of the two shapes in the right part of the design, but we can bring that back for bigger screens. This PR currently also implements Futura PT 700 for the homepage masthead claim. This currently happens via Typekit until we decide if it's worth buying the additional weight or not. It's relatively easy to revert this to get this PR through though. Along the way: * remove obsolete presets.purple; use preset.brand * remove obsolete presets.brandDark; use preset.brand * add presets for animation curve and speed * fix padding of last "social link" in main navigation * reduce CtaButton inner whitespace
|
Deploy preview ready! Built with commit 291a687 |
|
Deploy preview ready! Built with commit 291a687 |
|
There certainly still is room for improvement on smaller screens (and tidying the code). @KyleAMathews Maybe as first steps let's decide wether we want to buy Futura PT 700/Heavy, and if the bright stripe that's currently missing is crucial to get this in?! |
|
Could you add https://deploy-preview-1707--gatsbyjs.netlify.com/ to approved domains for Typekit? Right now we can't see new heavier font. |
|
Done! |
As discussed with Kyle via Discord.
* Show "Used by" in masthead for Phablet and up * Social links: right-aligned for Phablet and up, fix icon alignment, add title attribute * Tidy: don't use color keyword, lowercase CSS class names (analog to Kyle's .main-body) Still missing some love for "Used by on small screens, both on when displayed below the main content as well as on Phablet.
|
IMO beginning to feel OK now – not fixing the background helps a lot, at least it increases my personal UX a bunch. As mentioned in the last commit message this is still missing some love for "Used by on small screens, both on when displayed below the main content as well as on Phablet. I'll try to fix that over the weekend. @KyleAMathews I personally don't miss Futura Heavy much. Might even tend to say the Demi feels a little more friendly. Just noticed: I guess the transition applied to the width of the dark masthead background to the right causes some funky rendering bugs when resizing down/up in between Phablet and below 🙃🙄 … NBD
|
|
Looking good! Chatted a bit off-github and I'll just merge this now and @fk is going to bring back the third colored stripe soonish. Removing it made adding the "used by" section easier but the third stripe still works on large screens. Great work as always @fk! Hearing lots of people compliment us on our site :-D |
This adds the "Used by" block to the masthead as originally designed by @SachaG.
On small screens said block is displayed below the homepage main content.
For now the implementation drops the lighter of the two shapes in the right part of the design, but we can bring that back for bigger screens.
This PR currently also implements Futura PT 700 for the homepage masthead claim.
This currently happens via Typekit until we decide if it's worth buying the additional weight or not.
It's relatively easy to revert this to get this PR through though.
Along the way: