Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs landing page redesign #2847

Merged
merged 12 commits into from
Dec 8, 2023
Merged

Conversation

scottybollinger
Copy link
Contributor

@scottybollinger scottybollinger commented Nov 30, 2023

This PR launches a redesigned docs landing page. It builds on the efforts of #2805 and adds additional styling and a bit of JavaScript to change the layout for the links at the bottom of the page to be in 2 columns and also to have a collapsable set of legacy links.

Note that the PR preview does not have the heading fonts, as they are only accessible on pages hosted on the elastic.co domain, but they will be on the live site. Here is a screenhot the live site rendered with the fonts in place:

mockup-2023-12-08

@scottybollinger scottybollinger changed the title Scottybollinger/landing page Docs landing page redesign Nov 30, 2023
Copy link

A documentation preview will be available soon.
Help us out by validating the Buildkite preview and reporting issues here.

kilfoyle
kilfoyle previously approved these changes Dec 1, 2023
Copy link
Contributor

@kilfoyle kilfoyle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. @scottybollinger this new landing page looks gorgeous!

Copy link
Contributor

@leemthompo leemthompo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is awesome! ✨ I made one tiny suggestion about logos that caught my eye.

<a class="no-text-decoration" href="en/elastic-stack/current/installing-elastic-stack.html">
<div class="card h-100">
<div class="card-border card-border-top"></div>
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltcb0e79820c355263/636c1905cbd6b84ecb4851b2/stack-logo-color-32px.png');">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltcb0e79820c355263/636c1905cbd6b84ecb4851b2/stack-logo-color-32px.png');">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt0090c6239e64faf8/logo-stack-32-color.svg');">

Logo is a little hazy, this SVG might be be a good substitute.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! Fixed here 716d899

<a class="no-text-decoration" href="https://docs.elastic.co/serverless">
<div class="card h-100">
<div class="card-border card-border-top"></div>
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltcb0e79820c355263/636c1905cbd6b84ecb4851b2/stack-logo-color-32px.png');">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltcb0e79820c355263/636c1905cbd6b84ecb4851b2/stack-logo-color-32px.png');">
<span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt0090c6239e64faf8/logo-stack-32-color.svg');">

Same suggestion :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! Fixed here 716d899

KOTungseth
KOTungseth previously approved these changes Dec 1, 2023
@scottybollinger scottybollinger requested a review from a team December 1, 2023 15:41
@scottybollinger scottybollinger force-pushed the scottybollinger/landing-page branch 2 times, most recently from 905d02c to 9e04c79 Compare December 1, 2023 17:14
This was an attempt to get the fonts used in the landing page that are added by the injected marketing header to work on the PR previews. The font are restricted by CORS and my attempt at adding them here didn’t work either, so reverting those changes.
glitteringkatie
glitteringkatie previously approved these changes Dec 4, 2023
Copy link
Contributor

@glitteringkatie glitteringkatie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Scotty, this looks stellar!

dedemorton
dedemorton previously approved these changes Dec 7, 2023
Copy link
Contributor

@dedemorton dedemorton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Feedback from Obs PM (Evin) was positive: "...the design and layout are far cleaner and more understandable, at least from my perspective."

The “Browse all docs” section was moved above the marketing callout and need help section
@scottybollinger scottybollinger enabled auto-merge (squash) December 8, 2023 21:16
@scottybollinger scottybollinger merged commit 30ed54b into master Dec 8, 2023
5 checks passed
@scottybollinger scottybollinger deleted the scottybollinger/landing-page branch December 8, 2023 21:16
@lcawl lcawl mentioned this pull request Dec 14, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants