Skip to content

Commit 2c1212a

Browse files
patmendoza6745patmendoza6745
committed
Try faciliator headshot
1 parent d03e88a commit 2c1212a

File tree

3 files changed

+143
-67
lines changed

3 files changed

+143
-67
lines changed

‎_layouts/staffer.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="staffer">
22
{%- if page.photo -%}
3-
<img class="staffer-image" src="{{ site.baseurl }}{{ page.subpath }}{{ page.photo }}" alt="{{ page.name }} profile photo" width="{{ page.width }}" height="{{ page.height }}">
3+
<img class="staffer-image" src="{{ site.baseurl }}{{ page.subpath }}{{ page.photo }}" alt="{{ page.name }} profile photo">
44
{%- else -%}
5-
<img class="staffer-image" src="{{ site.baseurl }}{{ page.subpath }}default_photo.svg" alt="{{ page.name }} profile photo" width="{{ page.width }}" height="{{ page.height }}">
5+
<img class="staffer-image" src="{{ site.baseurl }}{{ page.subpath }}default_photo.svg" alt="{{ page.name }} profile photo">
66
{%- endif -%}
77
<div>
88
<h3 class="staffer-name" id="{{ page.name | slugify }}">
@@ -17,7 +17,7 @@ <h3 class="staffer-name" id="{{ page.name | slugify }}">
1717
</h3>
1818

1919
{%- if page.role -%}
20-
<p class="staffer-role">{{ page.role }}</p>
20+
<span class="staffer-badge label-{{ page.role }}">{{ page.role }}</span>
2121
{%- endif -%}
2222

2323
{%- if page.email -%}

‎_sass/custom.scss‎

Lines changed: 68 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,44 @@
1-
// Custom styles for CRUP staff system
1+
// Custom styles for CRUP staff system inspired by Data 100 fa25
22

3-
.staffer {
3+
/* Staff layout inspired by Data 100 fa25 */
4+
.role {
45
display: flex;
6+
flex-wrap: wrap;
57
margin-bottom: 2rem;
6-
padding: 1.5rem;
7-
border: 1px solid var(--border);
8+
}
9+
10+
.staffer {
11+
display: flex;
12+
flex-basis: 90%;
13+
padding: 1rem;
14+
padding-right: 2rem;
15+
margin-bottom: 1rem;
16+
border: 1px solid #e1e4e8;
817
border-radius: 8px;
9-
background-color: var(--background);
18+
background-color: #ffffff;
1019
transition: box-shadow 0.2s ease;
1120

1221
&:hover {
13-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
22+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
1423
}
1524

1625
.staffer-image {
17-
width: 150px;
18-
height: 150px;
1926
border-radius: 50%;
27+
height: 100px;
28+
width: 100px;
29+
margin-right: 1rem;
2030
object-fit: cover;
21-
margin-right: 1.5rem;
22-
border: 3px solid var(--border);
2331
flex-shrink: 0;
2432
}
2533

2634
.staffer-name {
27-
margin-top: 0;
28-
margin-bottom: 0.5rem;
29-
font-size: 1.5rem;
35+
margin: 0.25rem 0;
36+
font-size: 1.2rem;
3037
font-weight: 600;
31-
color: var(--text);
38+
color: #24292e;
3239

3340
a {
34-
color: var(--link);
41+
color: #0366d6;
3542
text-decoration: none;
3643

3744
&:hover {
@@ -42,33 +49,36 @@
4249

4350
.staffer-badge {
4451
display: inline-block;
45-
background-color: var(--primary);
46-
color: white;
47-
padding: 0.25rem 0.5rem;
48-
border-radius: 12px;
49-
font-size: 0.75rem;
52+
background-color: #f6f8fa;
53+
color: #586069;
54+
padding: 0.16em 0.56em;
55+
border-radius: 6px;
56+
font-size: 0.8em;
5057
font-weight: 500;
5158
margin-left: 0.5rem;
59+
text-transform: uppercase;
60+
border: 1px solid #e1e4e8;
5261
}
5362

5463
.staffer-role {
5564
font-weight: 500;
56-
color: var(--primary);
57-
margin-bottom: 0.5rem;
58-
font-size: 1.1rem;
65+
color: #0366d6;
66+
margin: 0.25rem 0;
67+
font-size: 1rem;
5968
}
6069

6170
.staffer-meta {
6271
font-size: 0.9rem;
63-
color: var(--text-muted);
64-
margin-bottom: 0.5rem;
72+
color: #586069;
73+
margin: 0.25rem 0;
6574
}
6675

6776
p {
68-
margin-bottom: 0.5rem;
77+
margin: 0.25rem 0;
78+
line-height: 1.5;
6979

7080
a {
71-
color: var(--link);
81+
color: #0366d6;
7282
text-decoration: none;
7383

7484
&:hover {
@@ -81,32 +91,47 @@
8191
@media (max-width: 768px) {
8292
flex-direction: column;
8393
text-align: center;
94+
padding: 1rem;
8495

8596
.staffer-image {
8697
margin-right: 0;
8798
margin-bottom: 1rem;
88-
width: 120px;
89-
height: 120px;
9099
}
91100
}
92101
}
93102

94-
// Staff grid layout for better organization
95-
.staff-grid {
96-
display: grid;
97-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
98-
gap: 1.5rem;
99-
margin-top: 2rem;
103+
/* Role-specific styling */
104+
.label-EdVP {
105+
background-color: #624099;
106+
color: white;
107+
border: none;
100108
}
101109

102-
// Section headers
103-
.staff-section {
104-
margin-top: 3rem;
105-
margin-bottom: 2rem;
110+
.label-Instructor {
111+
background-color: #5e1c82;
112+
color: white;
113+
border: none;
114+
}
106115

107-
h2 {
108-
border-bottom: 2px solid var(--primary);
109-
padding-bottom: 0.5rem;
110-
margin-bottom: 1.5rem;
116+
.label-TA {
117+
background-color: #935CBC;
118+
color: white;
119+
border: none;
120+
}
121+
122+
.label-Mentor {
123+
background-color: #006C67;
124+
color: white;
125+
border: none;
126+
}
127+
128+
/* Responsive design for role containers */
129+
@media (max-width: 768px) {
130+
.role {
131+
flex-direction: column;
132+
}
133+
134+
.staffer {
135+
flex-basis: 100%;
111136
}
112137
}

‎staff.md‎

Lines changed: 72 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,41 @@ description: Meet the CRUP team and instructors.
66
---
77

88
<style>
9-
.staffer {
9+
/* Staff layout inspired by Data 100 fa25 */
10+
.role {
1011
display: flex;
12+
flex-wrap: wrap;
1113
margin-bottom: 2rem;
12-
padding: 1.5rem;
14+
}
15+
16+
.staffer {
17+
display: flex;
18+
flex-basis: 90%;
19+
padding: 1rem;
20+
padding-right: 2rem;
21+
margin-bottom: 1rem;
1322
border: 1px solid #e1e4e8;
1423
border-radius: 8px;
1524
background-color: #ffffff;
1625
transition: box-shadow 0.2s ease;
1726
}
1827

1928
.staffer:hover {
20-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
29+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2130
}
2231

2332
.staffer-image {
24-
width: 150px;
25-
height: 150px;
2633
border-radius: 50%;
34+
height: 100px;
35+
width: 100px;
36+
margin-right: 1rem;
2737
object-fit: cover;
28-
margin-right: 1.5rem;
29-
border: 3px solid #e1e4e8;
3038
flex-shrink: 0;
3139
}
3240

3341
.staffer-name {
34-
margin-top: 0;
35-
margin-bottom: 0.5rem;
36-
font-size: 1.5rem;
42+
margin: 0.25rem 0;
43+
font-size: 1.2rem;
3744
font-weight: 600;
3845
color: #24292e;
3946
}
@@ -49,30 +56,33 @@ description: Meet the CRUP team and instructors.
4956

5057
.staffer-badge {
5158
display: inline-block;
52-
background-color: #0366d6;
53-
color: white;
54-
padding: 0.25rem 0.5rem;
55-
border-radius: 12px;
56-
font-size: 0.75rem;
59+
background-color: #f6f8fa;
60+
color: #586069;
61+
padding: 0.16em 0.56em;
62+
border-radius: 6px;
63+
font-size: 0.8em;
5764
font-weight: 500;
5865
margin-left: 0.5rem;
66+
text-transform: uppercase;
67+
border: 1px solid #e1e4e8;
5968
}
6069

6170
.staffer-role {
6271
font-weight: 500;
6372
color: #0366d6;
64-
margin-bottom: 0.5rem;
65-
font-size: 1.1rem;
73+
margin: 0.25rem 0;
74+
font-size: 1rem;
6675
}
6776

6877
.staffer-meta {
6978
font-size: 0.9rem;
7079
color: #586069;
71-
margin-bottom: 0.5rem;
80+
margin: 0.25rem 0;
7281
}
7382

7483
.staffer p {
75-
margin-bottom: 0.5rem;
84+
margin: 0.25rem 0;
85+
line-height: 1.5;
7686
}
7787

7888
.staffer p a {
@@ -84,17 +94,50 @@ description: Meet the CRUP team and instructors.
8494
text-decoration: underline;
8595
}
8696

97+
/* Role-specific styling */
98+
.label-EdVP {
99+
background-color: #624099;
100+
color: white;
101+
border: none;
102+
}
103+
104+
.label-Instructor {
105+
background-color: #5e1c82;
106+
color: white;
107+
border: none;
108+
}
109+
110+
.label-TA {
111+
background-color: #935CBC;
112+
color: white;
113+
border: none;
114+
}
115+
116+
.label-Mentor {
117+
background-color: #006C67;
118+
color: white;
119+
border: none;
120+
}
121+
122+
/* Responsive design */
87123
@media (max-width: 768px) {
88124
.staffer {
89125
flex-direction: column;
90126
text-align: center;
127+
padding: 1rem;
91128
}
92129

93130
.staffer-image {
94131
margin-right: 0;
95132
margin-bottom: 1rem;
96-
width: 120px;
97-
height: 120px;
133+
}
134+
135+
.role {
136+
flex-direction: column;
137+
}
138+
139+
.staffer {
140+
flex-basis: 100%;
98141
}
99142
}
100143
</style>
@@ -108,28 +151,36 @@ description: Meet the CRUP team and instructors.
108151
109152
## Executive Vice Presidents (EdVPs)
110153

154+
<div class="role">
111155
{% assign edvps = site.staffers | where: 'role', 'EdVP' %}
112156
{% for staffer in edvps %}
113157
{{ staffer }}
114158
{% endfor %}
159+
</div>
115160

116161
## Instructors
117162

163+
<div class="role">
118164
{% assign instructors = site.staffers | where: 'role', 'Instructor' %}
119165
{% for staffer in instructors %}
120166
{{ staffer }}
121167
{% endfor %}
168+
</div>
122169

123170
## Teaching Assistants
124171

172+
<div class="role">
125173
{% assign tas = site.staffers | where: 'role', 'TA' %}
126174
{% for staffer in tas %}
127175
{{ staffer }}
128176
{% endfor %}
177+
</div>
129178

130179
## Mentors
131180

181+
<div class="role">
132182
{% assign mentors = site.staffers | where: 'role', 'Mentor' %}
133183
{% for staffer in mentors %}
134184
{{ staffer }}
135185
{% endfor %}
186+
</div>

0 commit comments

Comments
 (0)