✅ Deploy Preview for knative ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	be3cc45
🔍 Latest deploy log	https://app.netlify.com/projects/knative/deploys/6891f5ff27fef3000881eb4a
😎 Deploy Preview	https://deploy-preview-6286--knative.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Welcome @thisisobate! It looks like this is your first PR to knative/docs 🎉

There seems to be some layout issues in mobile view (at least for the homepage):

There seems to be some layout issues in mobile view (at least for the homepage):

What screen size (width specifically) do you see this happen?

Nevermind...was able to recreate now. Will push a fix right away

I'm seeing grey backgrounds on mobile (Arc and Chrome), but not on desktop (Firefox):

Also, can we use a gear/spinny/router icon for eventing in the diagram (like in "why"), rather than "disk" or "storage" icon?

I'm seeing grey backgrounds on mobile (Arc and Chrome), but not on desktop (Firefox):

Where exactly are you referring to? The cards? Tried reproducing on firefox but no success. What version of firefox are you running? @evankanderson

I don't like the grey card backgrounds, but I see them on phone. (Maybe my desktop is having the issue, but things look cleaner without the grey)

what do you suggest we do? change the background color of the cards to something lighter? Going this direction would mean updating other cards across the homepage to maintain consistency

It seems like my desktop monitor is doing something that maps certain shades of grey to white. I've verified on a different screen that the "why serverless containers" section now has white backgrounds.

Could we do the same for "Knative Components"? It also feels like the "Knative Components" diagram gets shrunken too much at most screen sizes -- can we remove the rounded corners and margins on the SVG, change the SVG to transparent background, and instead use the components-content class on the surrounding div to add similar styles to the boxes above and below:

div.components-context {
    border: 1px solid #dadce0;
    border-radius: 0.7rem;
    padding: 0px 20px;
    margin: 0 50px;
}

I'm wondering if we should split the card style used for the "why serverless containers" into a card (rounded edges + outline) and a feature style (sizing for the features). The card would contain most of the above, except for the margin, which would be different between the full-width items (components and kelsey quote) and the feature style for the case studies and "why serverless containers".

I'm willing to approve the design as-is and iterate, but a couple options I'd like to see how others like for the cards (I know @dprotaso had opinions):

• Set --md-primary-bg-color to #fff (white) and one of:
  • border: 1px solid #dadce0 (Standard border, like we have on components now)
  • filter: drop-shadow(2px 2px 4px var(--md-accend-fg-color) (To get a "Knative blue" halo around the cards for a material sort of effect)

The "Knative Components" diagram seems to do a bit better on smaller screens now, so this LGTM.

/approve

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: evankanderson, thisisobate

The full list of commands accepted by this bot can be found here.

The pull request process is described here

I'm happy to let this merge. I'll either let @Cali0707 do the /lgtm or add one in a day or so.

Overall this is looking really good, I've just noticed a few small issues we should fix before this can merge. If you look at the image below, the body text is not aligned on the left with the title text for each card, but these should be aligned (and are in the figma design).

There are also some issues with the hover effects on the case studies/testimonials cards. First, when hovering on the Kelsey quote, the case studies cards are all shifted on the page:

Also, when hovering on the PNC case study, the text shifts inside the card. Additionally, this card is a different size from the other cards, when they should all be the same size: