Improve /support and /foundation/members designs #3534
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -18,6 +18,31 @@ | |
| --borders-color: #ddd; | ||
|
|
||
| --notice-box-color: #ffcb006b; | ||
|
|
||
| // Tokens for the support/membership card redesign (_support.scss). | ||
| // Kept distinct from the older --borders-color/--color-text-light pair | ||
| // above rather than merged into them, since those are already used | ||
| // with their own (slightly different) shades elsewhere. | ||
| --color-border: #d2d2d2; | ||
| --color-text-muted: #555; | ||
| --color-bg-tint: #fafafa; | ||
| --card-radius: 16px; | ||
| --card-radius-sm: 8px; | ||
|
|
||
| // The top 3 "become a member" tiers are literally named after materials | ||
|
Contributor
There was a problem hiding this comment. we have reference colors for these and all other tiers at https://github.com/matrix-org/matrix.org/tree/main/static/branding/membership
Member
Author
There was a problem hiding this comment. That was fixed earlier already. Comment needs fixing/removal though.
Contributor
There was a problem hiding this comment. i don't see a green ecosystem members frame nor purple associates |
||
| // (Platinum/Gold/Silver) - used as a top-edge accent on .tier-card and a | ||
| // frame/flag around the matching tier of supporter logos (_support.scss). | ||
| // Platinum is deliberately lighter/cooler and Silver deliberately | ||
| // darker/warmer so the two don't read as the same grey. These plain | ||
| // colours are for the (thin, non-text) frame border only; the flag is a | ||
| // solid fill with white text, which needs its own darker "-badge" pair | ||
| // to clear AA (the plain colours are too light/desaturated for that). | ||
| --color-tier-platinum: #4596a3; | ||
| --color-tier-platinum-badge: #1c3c41; | ||
| --color-tier-gold: #d48f2f; | ||
| --color-tier-gold-badge: #4b300d; | ||
| --color-tier-silver: #969eaa; | ||
| --color-tier-silver-badge: #3c3f44; | ||
| } | ||
|
|
||
| * { | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| // Breadcrumb navigation | ||
| // Used via macros/breadcrumb.html. Two contexts: | ||
| // 1. Inside .page-header (dark background) - text is white/muted-white | ||
| // 2. Inside .detail-page (light background) - text is muted grey | ||
|
|
||
| .breadcrumb { | ||
| ol { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| align-items: center; | ||
| list-style: none; | ||
| margin: 0; | ||
| padding: 0; | ||
| gap: 0.25rem; | ||
| font-size: 0.85rem; | ||
| } | ||
|
|
||
| li { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| // Chevron separator before every item except the first | ||
| & + li::before { | ||
| content: "/"; | ||
| margin-right: 0.25rem; | ||
| opacity: 0.45; | ||
| } | ||
| } | ||
|
|
||
| a, | ||
| span { | ||
| text-decoration: none; | ||
| line-height: 1; | ||
| } | ||
|
|
||
| // Dark context (inside .page-header) | ||
| .page-header & { | ||
| margin-bottom: 0.75rem; | ||
|
|
||
| a { | ||
| color: rgb(255 255 255 / 70%); | ||
|
|
||
| &:hover { | ||
| color: #fff; | ||
| } | ||
| } | ||
|
|
||
| // 45% white only clears ~4.4:1 against the black hero background, | ||
| // just under AA's 4.5:1 for text; 60% keeps it safely above. | ||
| span { | ||
| color: rgb(255 255 255 / 60%); | ||
| } | ||
|
|
||
| li + li::before { | ||
| color: rgb(255 255 255 / 45%); | ||
| } | ||
| } | ||
|
|
||
| // Light context (inside .detail-page) | ||
| .detail-page & { | ||
| margin-bottom: 1.25rem; | ||
|
|
||
| a { | ||
| color: var(--color-text-muted); | ||
|
|
||
| &:hover { | ||
| color: var(--color-text); | ||
| } | ||
| } | ||
|
|
||
| // The current-page label is text, not decoration, so it still needs | ||
| // to clear WCAG AA (4.5:1); #aaa on white only manages ~2.3:1. | ||
| span { | ||
| color: var(--color-text-light); | ||
| } | ||
|
|
||
| li + li::before { | ||
| color: #ccc; | ||
| } | ||
| } | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| .membership { | ||
|
Contributor
There was a problem hiding this comment. And another huuuge bunch of specific CSS. We should better think more in a framework direction for CTAs, Grids, etc. in my opinion. But we can clean this up later. |
||
| max-width: 65rem; | ||
| padding-inline: 1rem; | ||
| margin-inline: auto; | ||
|
|
||
| h3 { | ||
| font-size: 1.25rem; | ||
| } | ||
|
|
||
| .row { | ||
| display: flex; | ||
| flex-direction: row; | ||
| gap: 2rem; | ||
| margin-block: 2rem 3rem; | ||
|
|
||
| @media (max-width: 767px) { | ||
| flex-direction: column; | ||
| } | ||
| } | ||
|
|
||
| .representatives { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| flex: 1; | ||
|
|
||
| h3 { | ||
| text-align: center; | ||
| } | ||
|
|
||
| ul { | ||
| padding-inline: 0; | ||
| width: 100%; | ||
| } | ||
|
|
||
| li { | ||
| list-style: none; | ||
| text-align: center; | ||
| background-color: #fafafa; | ||
| border-radius: 8px; | ||
| margin-block: 0.5em; | ||
| padding: 0.5em 1rem; | ||
| } | ||
| } | ||
|
|
||
| .tiers-row { | ||
| display: grid; | ||
| grid-template-columns: repeat(4, 15rem); | ||
| gap: 1rem; | ||
| // These 4 columns are wider than the viewport on most screens, so | ||
| // this scrolls sideways (the "scroll to most-popular" script in | ||
| // membership.html relies on scrollLeft); it was previously | ||
| // overflow-y, which didn't let that horizontal scroll happen at all. | ||
| overflow-x: auto; | ||
| scroll-snap-type: x proximity; | ||
|
Contributor
There was a problem hiding this comment. on mobile, the initial view on this places the individual members cleanly out of view to the left so the chance to discover it is near 0. while it could help i'm not sure if snapping to the middle is the solution. it might require some thinking outside the box to solve this properly.
Member
Author
There was a problem hiding this comment. I added scroll indicators now. I think that solves it. |
||
| padding-block-start: 1.5em; | ||
| margin-block-end: 2em; | ||
|
|
||
| .tier-card { | ||
| border: 1px solid var(--color-border); | ||
| border-top-width: 3px; | ||
| border-radius: var(--card-radius); | ||
| background-color: #fff; | ||
| scroll-snap-align: start; | ||
|
|
||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 0.6rem; | ||
| padding: 1.1em; | ||
| // The body-wide line-height (1.75) is meant for prose, not a | ||
| // dense list of short feature labels in a 15rem-wide card - | ||
| // it made wrapped lines look loosely, unevenly spaced. | ||
| line-height: 1.4; | ||
|
|
||
| // These tiers are literally named after materials - give | ||
| // Silver/Gold/Platinum a top-edge accent in their namesake | ||
| // colour (--color-tier-*, _base.scss). Individual isn't a | ||
| // material name, so it keeps the plain border. | ||
| &--silver { | ||
| border-top-color: var(--color-tier-silver); | ||
| } | ||
|
|
||
| &--gold { | ||
| border-top-color: var(--color-tier-gold); | ||
| } | ||
|
|
||
| &--platinum { | ||
| border-top-color: var(--color-tier-platinum); | ||
| } | ||
|
|
||
| // The individual tier is a different kind of thing than the 3 | ||
| // organisation tiers next to it, not just a cheaper option - | ||
| // give that group boundary a bit of visual room and a divider, | ||
| // centred in the combined grid-gap + margin space between them. | ||
| &--group-start { | ||
| position: relative; | ||
| margin-inline-start: 0.5rem; | ||
|
|
||
| &::before { | ||
| content: ""; | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| left: -0.75rem; | ||
| width: 1px; | ||
| background-color: var(--color-border); | ||
| } | ||
| } | ||
|
|
||
| &-eyebrow { | ||
| margin: 0; | ||
| text-align: center; | ||
| font-size: 0.7rem; | ||
| font-weight: 600; | ||
| text-transform: uppercase; | ||
| letter-spacing: 0.04em; | ||
| color: var(--color-text-muted); | ||
| } | ||
|
|
||
| h3 { | ||
| margin: 0; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .pricing { | ||
| align-self: center; | ||
| background-color: #e9e9e9; | ||
| border: 1px solid var(--color-border); | ||
| border-radius: 9999px; | ||
| padding: 0.15rem 0.8em; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| ul { | ||
| margin: 0; | ||
| padding-inline-start: 1.35em; | ||
|
|
||
| li { | ||
| list-style-image: url("/assets/tick_supported.svg"); | ||
| font-size: 0.9rem; | ||
|
|
||
| & + li { | ||
| margin-block-start: 0.4em; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.