chore(www): Refactor homepage-logo-banner

[fk]

Switch from template literal/string styles to sx and object styles.

[fk]

OK this is GTG 😅

[fk]

Hey YouTuuuuube link missing
https://www.youtube.com/watch?v=yVEgxDad0_w

[tesseralis]

For this and the other PRs, I think it would be better to do instead something like:

const logoStyles = {
  position: `relative`,
  // other styles
}

export default function HomePageLogoBanner() {
  return <div sx={logoStyles}>
    {/* more stuff */}
  </div>
}

As I said in another issue, making a component for each thing we want to style adds indirection and makes it harder to reason if html is semantic or not.

[fk]

Yeah, thanks for calling it — I was kinda telling myself this would make the review easier, but … lemme fix this one now.
A bit short on time, but happy to do so with the two other PRs later today, too.

[fk]

Btw. I feel like up to this object length I'd go inline without even thinking about it.
So … what are your thoughts re:"responsive arrays" @tesseralis?

[tesseralis]

Could you leave more details on this? I'm not sure what "responsive arrays" are

[fk]

[null, null, null, "20px"] — https://theme-ui.com/sx-prop/#responsive-values

[tesseralis]

Ohhhhhhhh. Yeah they're great :P

[fk]

For me there are cases where I prefer to not use them, … and also the more nulls, the more torn I am :)

[fk]

Btw. did you see the v1 roadmap?
system-ui/theme-ui#832

[tesseralis]

I think you can do:

Suggested change

	borderBottom: t => `1px solid ${t.colors.ui.border}`,
	borderBottom: t => `1px solid ${t.colors.ui.border}`,
	borderBottom: 1,
	borderColor: `ui.border`,

[fk]

ha just pushed right after you merged — needed a borderStyle: "solid" to make that work

[tesseralis]

looks good, there's one thing you can simplify with the border.