kgess-mirror/matrix.org
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix.org.git synced 2026-01-11 20:07:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Enhance UI: Implement responsive card layout for Governing Board representatives and chairs (Resolves #2741) (#2836)

Browse source 
* Improves visual clarity of Governing Board chairs with card-based layout and integrates CTE chairs. Categorizes elected representatives into boxed container sections for better readability.

* clean up css

Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com>

* remove comments

Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com>

* rename css class

Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com>

* add borders around the cards

Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com>

---------

Signed-off-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com>
Co-authored-by: HarHarLinks <2803622+HarHarLinks@users.noreply.github.com>
This commit is contained in:
ANUSHTUP GHOSH 2025-09-05 20:25:19 +05:30 • committed by GitHub
parent a4be2e3d88
commit 6c0501178d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 158 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
content/foundation/governing-board/index.md
View file

@ -35,10 +35,15 @@ Elections are being held in the second quarter of each calendar year, alternatin
The current elected representatives are:
<div class="two-column">
<div class="responsive-grid">
<div class="category-group">
### Community Representatives
<div class="group-content">
<div>
### Individual Members
#### Individual Members
* Andy Balaam (he/him)
* Gnuxie (she/her)
@ -48,48 +53,67 @@ The current elected representatives are:
</div>
<div>
### Ecosystem Members
#### Ecosystem Members
* Bram van den Heuvel (he/they), Elm SDK
* Kim Brose (he/him), Matrix Community Events
* Nicolas Werner (he/him), Nheko-Reborn
* Bram van den Heuvel (he/they), *Elm SDK*
* Kim Brose (he/him), *Matrix Community Events*
* Nicolas Werner (he/him), *Nheko-Reborn*
</div>
<div>
### Associate Members
#### Associate Members
* Tobias Fella (he/him), KDE e.V.
* And one vacant seat
* Tobias Fella (he/him), *KDE e.V.*
* Vacant seat
</div>
</div>
</div>
<div class="category-group">
### Funder Representatives
<div class="group-content">
<div>
#### Platinum Members
* Neil Johnson (he/him), *Element*
* Vacant seat
* Vacant seat
* Vacant seat
</div>
<div>
### Platinum Members
#### Gold Members
* Neil Johnson (he/him), Element
* Three vacant seats
* Brad Murray (he/him), *Automattic (Beeper)*
* Vacant seat
* Vacant seat
</div>
<div>
### Gold Members
#### Silver Members
* Brad Murray (he/him), Automattic (Beeper)
* Two vacant seats
* Christian Kußowski (he/him), *Famedly*
* Jan Kohnert (he/him), *Gematik GmbH*
</div>
<div>
### Silver Members
* Christian Kußowski (he/him), Famedly
* Jan Kohnert (he/him), Gematik GmbH
</div>
</div>
<div class="category-group">
### Foundation Representatives
<div class="group-content">
<div>
### Guardians
#### Guardians
* Amandine Le Pape (she/her)
* Matthew Hodgson (he/him)
@ -98,7 +122,7 @@ The current elected representatives are:
</div>
<div>
### Spec Core Team
#### Spec Core Team
* Richard van der Hoff (he/him)
* Travis Ralston (he/him)
@ -106,10 +130,12 @@ The current elected representatives are:
</div>
<div>
### Managing Director
#### Managing Director
* Robin Riley (they/them)
</div>
</div>
</div>
</div>
@ -151,7 +177,7 @@ There are currently 4 Committees:
The current chairs of the Governing Board are:
<div class="two-column">
<div class="responsive-grid chairs-section">
<div>
### Governing Board

113
sass/_governing-board.scss
View file

@ -1,11 +1,110 @@
.two-column {
display: block;
.responsive-grid {
.category-group {
margin-bottom: 2rem;
background: #fafafa;
padding: 2rem;
border: 1px solid var(--borders-color);
&:last-child {
margin-bottom: 0;
}
.group-content {
display: flex;
gap: 1.5rem;
> div {
flex: 1;
min-width: 0; // Allow shrinking below min-width
background: #fff;
padding: 1.5rem;
padding-bottom: 0;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--borders-color);
}
}
}
h3,h4 {
margin-top: 0;
}
ul {
list-style: none;
padding: 0;
li {
padding: 0.75rem 0;
line-height: 1.4;
&:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
}
}
&.chairs-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
> div {
background: #fafafa;
padding: 1.5rem;
border: 1px solid var(--borders-color);
&:first-child {
grid-column: 1 / -1;
}
}
}
}
@media (max-width: 1024px) {
.responsive-grid {
.category-group {
padding: 1.5rem;
@media (min-width: 768px) {
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
.group-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.25rem;
}
}
&.chairs-section {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.25rem;
}
}
}
}
@media (max-width: 767px) {
.responsive-grid {
.category-group {
margin-bottom: 1.5rem;
padding: 1.25rem;
.group-content {
grid-template-columns: 1fr;
gap: 1rem;
> div {
padding: 1.25rem;
}
}
}
&.chairs-section {
grid-template-columns: 1fr;
gap: 1rem;
> div {
padding: 1.25rem;
}
}
}
}