Skip to content

Commit d03e88a

Browse files
patmendoza6745patmendoza6745
committed
Attempt faciliator page
1 parent 1f04aaa commit d03e88a

File tree

2 files changed

+206
-0
lines changed

2 files changed

+206
-0
lines changed

‎_sass/custom.scss‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
// Custom styles for CRUP staff system
2+
3+
.staffer {
4+
display: flex;
5+
margin-bottom: 2rem;
6+
padding: 1.5rem;
7+
border: 1px solid var(--border);
8+
border-radius: 8px;
9+
background-color: var(--background);
10+
transition: box-shadow 0.2s ease;
11+
12+
&:hover {
13+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
14+
}
15+
16+
.staffer-image {
17+
width: 150px;
18+
height: 150px;
19+
border-radius: 50%;
20+
object-fit: cover;
21+
margin-right: 1.5rem;
22+
border: 3px solid var(--border);
23+
flex-shrink: 0;
24+
}
25+
26+
.staffer-name {
27+
margin-top: 0;
28+
margin-bottom: 0.5rem;
29+
font-size: 1.5rem;
30+
font-weight: 600;
31+
color: var(--text);
32+
33+
a {
34+
color: var(--link);
35+
text-decoration: none;
36+
37+
&:hover {
38+
text-decoration: underline;
39+
}
40+
}
41+
}
42+
43+
.staffer-badge {
44+
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;
50+
font-weight: 500;
51+
margin-left: 0.5rem;
52+
}
53+
54+
.staffer-role {
55+
font-weight: 500;
56+
color: var(--primary);
57+
margin-bottom: 0.5rem;
58+
font-size: 1.1rem;
59+
}
60+
61+
.staffer-meta {
62+
font-size: 0.9rem;
63+
color: var(--text-muted);
64+
margin-bottom: 0.5rem;
65+
}
66+
67+
p {
68+
margin-bottom: 0.5rem;
69+
70+
a {
71+
color: var(--link);
72+
text-decoration: none;
73+
74+
&:hover {
75+
text-decoration: underline;
76+
}
77+
}
78+
}
79+
80+
// Responsive design
81+
@media (max-width: 768px) {
82+
flex-direction: column;
83+
text-align: center;
84+
85+
.staffer-image {
86+
margin-right: 0;
87+
margin-bottom: 1rem;
88+
width: 120px;
89+
height: 120px;
90+
}
91+
}
92+
}
93+
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;
100+
}
101+
102+
// Section headers
103+
.staff-section {
104+
margin-top: 3rem;
105+
margin-bottom: 2rem;
106+
107+
h2 {
108+
border-bottom: 2px solid var(--primary);
109+
padding-bottom: 0.5rem;
110+
margin-bottom: 1.5rem;
111+
}
112+
}

‎staff.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,100 @@ nav_order: 3
55
description: Meet the CRUP team and instructors.
66
---
77

8+
<style>
9+
.staffer {
10+
display: flex;
11+
margin-bottom: 2rem;
12+
padding: 1.5rem;
13+
border: 1px solid #e1e4e8;
14+
border-radius: 8px;
15+
background-color: #ffffff;
16+
transition: box-shadow 0.2s ease;
17+
}
18+
19+
.staffer:hover {
20+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
21+
}
22+
23+
.staffer-image {
24+
width: 150px;
25+
height: 150px;
26+
border-radius: 50%;
27+
object-fit: cover;
28+
margin-right: 1.5rem;
29+
border: 3px solid #e1e4e8;
30+
flex-shrink: 0;
31+
}
32+
33+
.staffer-name {
34+
margin-top: 0;
35+
margin-bottom: 0.5rem;
36+
font-size: 1.5rem;
37+
font-weight: 600;
38+
color: #24292e;
39+
}
40+
41+
.staffer-name a {
42+
color: #0366d6;
43+
text-decoration: none;
44+
}
45+
46+
.staffer-name a:hover {
47+
text-decoration: underline;
48+
}
49+
50+
.staffer-badge {
51+
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;
57+
font-weight: 500;
58+
margin-left: 0.5rem;
59+
}
60+
61+
.staffer-role {
62+
font-weight: 500;
63+
color: #0366d6;
64+
margin-bottom: 0.5rem;
65+
font-size: 1.1rem;
66+
}
67+
68+
.staffer-meta {
69+
font-size: 0.9rem;
70+
color: #586069;
71+
margin-bottom: 0.5rem;
72+
}
73+
74+
.staffer p {
75+
margin-bottom: 0.5rem;
76+
}
77+
78+
.staffer p a {
79+
color: #0366d6;
80+
text-decoration: none;
81+
}
82+
83+
.staffer p a:hover {
84+
text-decoration: underline;
85+
}
86+
87+
@media (max-width: 768px) {
88+
.staffer {
89+
flex-direction: column;
90+
text-align: center;
91+
}
92+
93+
.staffer-image {
94+
margin-right: 0;
95+
margin-bottom: 1rem;
96+
width: 120px;
97+
height: 120px;
98+
}
99+
}
100+
</style>
101+
8102
# Staff
9103

10104
## Course Staff Email

0 commit comments

Comments
 (0)