Skip to content

Revamp support & membership #2725

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.

Sign up for GitHub

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

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Revamp support & membership #2725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2501410
Move members to /membership page
thibaultamartin May 5, 2025
484e69c
Implement the basic structure of the new support page
thibaultamartin May 5, 2025
140ff55
Add the proper links on the CTAs
thibaultamartin May 5, 2025
019e4eb
Add padding to let the membership grid breathe
thibaultamartin May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 4 additions & 27 deletions content/support/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,9 @@ title = "Support Matrix"
aliases = ["/supporters/", "/donate"]
template = "support.html"
extra.summary = """
If you believe in our mission and want to contribute to Matrix
as a common good, you can support our work financially. Join the thousands of
people who support open, decentralised and secure communication. If you work for
an organisation which supports donations via Benevity, our code is
826-B_4AN2ZDBMVK
Join the thousands of people who support open, decentralised and secure
communication. Whether you want to volunteer, make a donation, help spread the
word about Matrix, or even want to join us as a member, we welcome all sorts of
help.
"""
+++

The Matrix.org Foundation is working hard to make sure Matrix is the best
protocol for free communication. Like any open protocol, Matrix needs a
direction to coordinate efforts. The Matrix.org Foundation is overseeing the
decisions related to the Matrix Specification, ensuring it serves the general
interest.

Once the direction is set, the Foundation also works on materialising the
vision: we're pragmatists who don't only work in theory. We want Matrix to
succeed in real life, so we make it happen in real life.

We also work on making sure the Matrix community stays vibrant and attractive.
It's important to keep the community active but also to attract newcomers in the
Matrix ecosystem. Onboarding and moderation are both key aspects of our mission.

Matrix is not only a good answer to current challenges: it needs to stay
relevant in the future. The Matrix.org Foundation funds substantial work to make
sure Matrix addresses and will keep addressing actual issues.

{{
support_us()
}}
287 changes: 81 additions & 206 deletions sass/_support.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,231 +1,36 @@
.page-header.support {

.donate-row {
display: flex;
gap: 1rem;
margin-block-start: 2rem;

@media (max-width: 767px) {
flex-direction: column;
}
}

.call-to-action {
display: flex;
align-items: center;
gap: 0.625rem;
background: #fff;
color: #000;
border-radius: 9999px;
padding: .5rem 1rem;

font-size: 1.125rem;
font-weight: 600;

@media (max-width: 767px) {
justify-content: center;
}
}
}

.support.main {

&>div {

padding-block: 3rem;

@media (max-width: 767px) {
padding-block: 2rem;
}
}

#join-foundation {
padding-inline: 1rem;
max-width: var(--page-max-width);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-inline: auto;

h2 {
text-align: center;
}

p {
text-align: center;
}

.call-to-action {
background-color: #000;
font-weight: 600;
color: #fff;
border-radius: 9999px;
padding: .5rem 2rem;
}
}

#platinum-supporters .supporters-card {
--cards-per-row: 4;
}

#gold-supporters .supporters-card {
--cards-per-row: 4;
}

#silver-supporters .supporters-card {
--cards-per-row: 5;
}

#associate-supporters .supporters-card {
--cards-per-row: 5;
}

#ecosystem-supporters .supporters-card {
--cards-per-row: 5;
}

#supporters {
display: flex;
flex-direction: column;
max-width: var(--page-max-width);
margin-inline: auto;
--supporters-padding-inline: 1rem;
padding-inline: var(--supporters-padding-inline);

.supporters-section {
display: flex;
flex-direction: column;

h2 {
text-align: center;
}

.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
--cards-gap: 1rem;
gap: var(--cards-gap);
justify-content: center;

.supporters-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
--supporters-card-border-width: 1px;
border: var(--supporters-card-border-width) solid var(--borders-color);
border-radius: 16px;
--supporters-card-hpadding: 8px;
padding: var(--supporters-card-hpadding);
// The whitespace of the text at the bottom visually adds to the padding so we account for this on the top a little.
padding-top: calc(1.5 * var(--supporters-card-hpadding));
// This adds some space between the text and the image
gap: var(--supporters-card-hpadding);

img {
aspect-ratio: 1/1;
object-fit: contain;
width: calc((var(--page-max-width) - 2* var(--supporters-padding-inline) - calc(var(--cards-per-row) - 1)* var(--cards-gap)) / var(--cards-per-row) - 2* var(--supporters-card-hpadding) - 2* var(--supporters-card-border-width));
}
}
}
&:nth-child(even) {
background-color: #eee;
}
}

#the-spec {
background-color: #fafafa;

.content {
display: flex;
flex-direction: row;
gap: 3rem;

@media (max-width: 767px) {
flex-direction: column-reverse;
}

img {
max-width: 50%;
margin-inline: auto;
}
}
}

#tangible-work {
background-color: #000;
color: #fff;

.content {
display: flex;
flex-direction: row;
gap: 3rem;

@media (max-width: 767px) {
flex-direction: column;
}
}
}

#all-your-comms {

.content {
display: flex;
flex-direction: row;
gap: 3rem;
display: grid;
gap: 1rem;

div {
flex: 2;
h2 {
margin-block: 0;
}

img {
flex: 1;
min-width: 0;
p:last-child {
margin-block-end: 0;
}

@media (max-width: 767px) {
flex-direction: column-reverse;
.call-to-action {
justify-self: left;
}
}
}

#open-dev {
background-color: #000;
color: #fff;

.content {
max-width: 50rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 3rem;
}
}

#help-us {
.content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;

@media (max-width: 767px) {
grid-template-columns: 1fr;
}

.blurb {
display: flex;
flex-direction: column;
align-items: start;
}
}

.call-to-action {
display: flex;
align-items: center;
gap: 0.625rem;
padding: .6rem 1.5rem;
}
}
}

.membership {
Expand Down Expand Up @@ -315,3 +120,73 @@
}
}
}

#platinum-supporters .supporters-card {
--cards-per-row: 4;
}

#gold-supporters .supporters-card {
--cards-per-row: 4;
}

#silver-supporters .supporters-card {
--cards-per-row: 5;
}

#associate-supporters .supporters-card {
--cards-per-row: 5;
}

#ecosystem-supporters .supporters-card {
--cards-per-row: 5;
}

#supporters {
display: flex;
flex-direction: column;
max-width: var(--page-max-width);
margin-inline: auto;
margin-block-end: 5rem;
--supporters-padding-inline: 1rem;
padding-inline: var(--supporters-padding-inline);

.supporters-section {
display: flex;
flex-direction: column;

h2 {
text-align: center;
}

.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
--cards-gap: 1rem;
gap: var(--cards-gap);
justify-content: center;

.supporters-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
--supporters-card-border-width: 1px;
border: var(--supporters-card-border-width) solid var(--borders-color);
border-radius: 16px;
--supporters-card-hpadding: 8px;
padding: var(--supporters-card-hpadding);
// The whitespace of the text at the bottom visually adds to the padding so we account for this on the top a little.
padding-top: calc(1.5 * var(--supporters-card-hpadding));
// This adds some space between the text and the image
gap: var(--supporters-card-hpadding);

img {
aspect-ratio: 1/1;
object-fit: contain;
width: calc((var(--page-max-width) - 2* var(--supporters-padding-inline) - calc(var(--cards-per-row) - 1)* var(--cards-gap)) / var(--cards-per-row) - 2* var(--supporters-card-hpadding) - 2* var(--supporters-card-border-width));
}
}
}
}
}
Loading