Landing page hero section new design#11165
Conversation
|
Hey @OlufunkeMoronfolu, this looks really good! Thanks for putting it together. I made a few comments and suggestions—the biggest one is about getting the image to disappear on smaller viewports. Do you want to share this on Slack or at a group meeting so we can see if the Docs team has feedback on the new design? |
| <h5 class="lp-description">{{ .Page.Description }}</h5> | ||
| </div> | ||
|
|
||
| <div class="hero-image"> |
There was a problem hiding this comment.
| <div class="hero-image"> | |
| <div class="hero-image d-none d-lg-block"> |
| .hero-text { | ||
| flex: 0 0 60%; | ||
| } |
There was a problem hiding this comment.
| .hero-text { | |
| flex: 0 0 60%; | |
| } | |
| .hero-text { | |
| flex: 0 0 100%; | |
| // Stretch out text once image disappears (smaller viewports) | |
| @include media-breakpoint-up(lg) { | |
| flex: 0 0 60%; | |
| } | |
| } |
| type: landingpage | ||
| layout: landingpage | ||
| description: Learn how to create, deploy, and manage your app landscape. | ||
| description: Browse the documentation for Mendix products, read about latest releases, and make contributions for the Mendix community. Learn how to create, deploy, and manage your app landscape. |
There was a problem hiding this comment.
We should workshop these front matter changes with the group. I like the longer description but I wonder if we should change it more to highlight AI. I personally tend prefer keeping "Welcome to" in the title, since it feels friendly and aligns better with the other Portal pages like https://marketplace.mendix.com/link/components and https://community.mendix.com/link/home.
|
|
||
| // Mobile hamburger bar on landing page — matches hero background | ||
| .lp-mobile-bar { | ||
| background-color: #0A1324; |
There was a problem hiding this comment.
We should double-check this with Amit. It's very similar to
docs/assets/scss/_variables_project.scss
Line 14 in 4cbc0f9
| padding-left: 2.5rem; | ||
| padding-right: 2.5rem; |
There was a problem hiding this comment.
| padding-left: 2.5rem; | |
| padding-right: 2.5rem; |
There was a problem hiding this comment.
I suggest removing these because they conflict with line 29
| padding-right: 2.5rem; | ||
| padding: 2rem 2.5rem; | ||
|
|
||
| @media (max-width: 767px) { |
There was a problem hiding this comment.
| @media (max-width: 767px) { | |
| @include media-breakpoint-down(md) { |
There was a problem hiding this comment.
Adjusted to use Bootstrap's mixin (and match when the image disappears)
|
|
||
| .lp-hero { | ||
| background-color: #0A1324; | ||
| min-height: 400px; |
There was a problem hiding this comment.
Do you think we should push back on this spec, or do you like it as is? I think some of the Portal pages (like https://marketplace.mendix.com/link/components) have shorter hero heights, and it might be nice if it weren't quite so big so that more of the story cards fit on smaller screens by default.
2 participants
No description provided.