Skip to content

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

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 15 additions & 1 deletion content/foundation/governing-board/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ Elections are being held in the second quarter of each calendar year, alternatin
The current elected representatives are:

<div class="two-column">
<div class="category-group" data-category="Community Representatives">
<div class="group-content">
<div>

### Individual Members
Expand Down Expand Up @@ -63,6 +65,11 @@ The current elected representatives are:
* And one vacant seat

</div>
</div>
</div>

<div class="category-group" data-category="Funder Representatives">
<div class="group-content">
<div>

### Platinum Members
Expand All @@ -87,6 +94,11 @@ The current elected representatives are:
* Jan Kohnert (he/him), Gematik GmbH

</div>
</div>
</div>

<div class="category-group" data-category="Foundation Representatives">
<div class="group-content">
<div>

### Guardians
Expand All @@ -110,6 +122,8 @@ The current elected representatives are:

* Robin Riley (they/them)

</div>
</div>
</div>

</div>
Expand Down Expand Up @@ -151,7 +165,7 @@ There are currently 4 Committees:

The current chairs of the Governing Board are:

<div class="two-column">
<div class="two-column chairs-section">
<div>

### Governing Board
Expand Down
207 changes: 203 additions & 4 deletions sass/_governing-board.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,210 @@
.two-column {
display: block;
display: flex;
flex-direction: column;
gap: 2rem;
margin: 2rem 0;
width: 100%;

// Category wrapper
.category-group {
width: 100%;
margin-bottom: 2rem;
background: linear-gradient(to bottom right, #f8f9fa, #f0f2f5);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.12);

&:last-child {
margin-bottom: 0;
}

// Category header
&::before {
content: attr(data-category);
display: block;
font-size: 1.4em;
font-weight: 600;
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid rgba(0, 0, 0, 0.12);
color: #1a1a1a;
}

// Inner flex container for the boxes
.group-content {
display: flex;
gap: 1.5rem;
width: 100%;

> div {
flex: 1;
min-width: 0; // Allow shrinking below min-width
background: #fff;
border-radius: 10px;
padding: 1.5rem;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;

&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to right, #0098d4, #00b4ff);
opacity: 0.8;
}

&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
}
}
}

// Style the headings
h3 {
color: #1a1a1a;
margin: 0 0 1rem 0;
padding: 0 0 0.75rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
font-size: 1.1em;
font-weight: 600;
}

// Style the lists
ul {
list-style: none;
padding: 0;
margin: 0;
flex: 1;

li {
padding: 0.75rem 0;
line-height: 1.4;
display: flex;
align-items: center;
color: #2c2c2c;

&:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

&::before {
content: '';
width: 4px;
height: 4px;
background: #0098d4;
border-radius: 50%;
margin-right: 0.75rem;
opacity: 0.7;
}
}
}

// Chairs section remains unchanged
&.chairs-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
width: 100%;

> div {
background: linear-gradient(to bottom right, #f8f9fa, #f0f2f5);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

&:first-child {
grid-column: 1 / -1;
margin-bottom: 1.5rem;
position: relative;

&::after {
content: '';
position: absolute;
bottom: -1rem;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15), transparent);
}

h3 {
font-size: 1.3em;
}
}
}
}
}

// Responsive adjustments
@media (max-width: 1024px) {
.two-column {
gap: 1.5rem;

.category-group {
padding: 1.5rem;

.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 (min-width: 768px) {
@media (max-width: 767px) {
.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;

.category-group {
margin-bottom: 1.5rem;
padding: 1.25rem;

&::before {
font-size: 1.2em;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}

.group-content {
grid-template-columns: 1fr;
gap: 1rem;

> div {
padding: 1.25rem;
}
}
}

&.chairs-section {
grid-template-columns: 1fr;
gap: 1rem;

> div {
padding: 1.25rem;

&:first-child {
margin-bottom: 1rem;

&::after {
bottom: -0.75rem;
}
}
}
}
}
}