Skip to content

Commit 5004eed

Browse files
jimboidjimboid
authored
Merge pull request #172 from CCPBioSim/software
change community and core team layouts
2 parents c8fe961 + 73a5af3 commit 5004eed

3 files changed

Lines changed: 417 additions & 121 deletions

File tree

‎pkg_ccpbiosim/constituents/com_ccpbiosim/media/css/site.css‎

Lines changed: 236 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -32,118 +32,286 @@
3232
}
3333

3434
/* ---------------------------------------------- Core Team ---------------------------------------- */
35-
.core-team-card {
36-
border: 1px solid #e5e7eb;
37-
border-radius: 0.35rem;
38-
padding: 1.75rem;
39-
background: #fff;
40-
transition: transform 0.25s ease, box-shadow 0.25s ease;
41-
height: 100%;
35+
.staff-bios-grid {
36+
border-top: 1px solid var(--bs-border-color, #dee2e6);
37+
border-left: 1px solid var(--bs-border-color, #dee2e6);
4238
}
4339

44-
.core-team-card:hover {
45-
transform: translateY(-6px);
46-
box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
40+
.staff-bios-grid .bio-col {
41+
border-right: 1px solid var(--bs-border-color, #dee2e6);
42+
border-bottom: 1px solid var(--bs-border-color, #dee2e6);
4743
}
4844

49-
.core-team-horizontal {
45+
.staff-bio-card {
46+
padding: 2rem 2rem 1.75rem;
47+
background: var(--bs-body-bg, #fff);
48+
position: relative;
49+
height: 100%;
5050
display: flex;
51-
align-items: center;
51+
flex-direction: column;
52+
transition: background 0.2s ease;
5253
}
5354

54-
.core-team-image-wrap {
55-
position: relative;
56-
/*width: 120px;*/
57-
/*min-width: 120px;*/
58-
height: 250px;
59-
border-radius: 0.35rem;
55+
.staff-bio-card:hover {
56+
background: var(--bs-light, #f8f9fa);
57+
}
58+
59+
/* Animated primary-colour underline on hover */
60+
.staff-bio-card::after {
61+
content: '';
62+
position: absolute;
63+
bottom: 0;
64+
left: 2rem;
65+
right: 2rem;
66+
height: 2px;
67+
background: var(--cassiopeia-color-primary, #0088cc);
68+
transform: scaleX(0);
69+
transform-origin: left;
70+
transition: transform 0.3s ease;
71+
}
72+
73+
.staff-bio-card:hover::after {
74+
transform: scaleX(1);
75+
}
76+
77+
.staff-bio-card .bio-index {
78+
font-size: 0.7rem;
79+
font-style: italic;
80+
color: var(--bs-secondary-color, #6c757d);
81+
position: absolute;
82+
top: 1.25rem;
83+
right: 1.5rem;
84+
}
85+
86+
.staff-bio-avatar {
87+
width: 150px;
88+
height: 150px;
89+
border-radius: 4px;
6090
overflow: hidden;
91+
border: 1px solid var(--bs-border-color, #dee2e6);
92+
flex-shrink: 0;
93+
transition: border-color 0.2s;
94+
}
95+
96+
.staff-bio-card:hover .staff-bio-avatar {
97+
border-color: var(--cassiopeia-color-primary, #0088cc);
6198
}
6299

63-
.core-team-image-wrap img {
100+
.staff-bio-avatar .bio-initials {
64101
width: 100%;
65102
height: 100%;
66-
object-fit: cover;
103+
display: flex;
104+
align-items: center;
105+
justify-content: center;
106+
font-size: 1.1rem;
107+
font-weight: 700;
108+
color: #fff;
109+
letter-spacing: 0.04em;
67110
}
68111

69-
.core-team-image-wrap::after {
70-
content: "";
71-
position: absolute;
72-
top: 0;
73-
right: 0;
74-
width: 55%;
75-
height: 100%;
76-
background: linear-gradient(
77-
to right,
78-
rgba(255, 255, 255, 0) 0%,
79-
rgba(255, 255, 255, 1) 90%
80-
);
81-
pointer-events: none;
112+
.bio-dept {
113+
font-size: 0.65rem;
114+
font-weight: 700;
115+
letter-spacing: 0.22em;
116+
text-transform: uppercase;
117+
color: var(--cassiopeia-color-primary, #0088cc);
118+
margin-bottom: 0.3rem;
119+
}
120+
121+
.bio-name {
122+
font-size: 1.25rem;
123+
font-weight: 600;
124+
line-height: 1.2;
125+
color: var(--bs-heading-color, var(--bs-body-color));
126+
margin-bottom: 0.2rem;
82127
}
83128

84-
.core-team-content {
85-
margin-left: 1.5rem;
129+
.bio-jobtitle {
130+
font-size: 0.8rem;
131+
color: var(--bs-secondary-color, #6c757d);
132+
margin-bottom: 0;
133+
}
134+
135+
.bio-rule {
136+
width: 24px;
137+
height: 1px;
138+
background: var(--bs-border-color, #dee2e6);
139+
margin: 1rem 0;
140+
}
141+
142+
.bio-body {
143+
font-size: 0.875rem;
144+
line-height: 1.78;
145+
color: var(--bs-secondary-color, #6c757d);
86146
flex: 1;
147+
margin-bottom: 1.5rem;
148+
}
149+
150+
.bio-links {
151+
display: flex;
152+
gap: 1.25rem;
153+
flex-wrap: wrap;
154+
margin-top: auto;
87155
}
88156

89-
.core-team-name {
157+
.bio-links a {
158+
font-size: 0.7rem;
90159
font-weight: 600;
91-
margin-bottom: 0.15rem;
160+
letter-spacing: 0.16em;
161+
text-transform: uppercase;
162+
color: var(--bs-body-color, #212529);
163+
text-decoration: none;
164+
border-bottom: 1px solid var(--bs-border-color, #dee2e6);
165+
padding-bottom: 2px;
166+
transition: color 0.2s, border-color 0.2s;
92167
}
93168

94-
.core-team-role {
95-
font-size: 0.9rem;
96-
font-weight: 500;
97-
color: #0f172a;
169+
.bio-links a:hover {
170+
color: var(--cassiopeia-color-hover, var(--cassiopeia-color-primary, #0088cc));
171+
border-color: var(--cassiopeia-color-hover, var(--cassiopeia-color-primary, #0088cc));
98172
}
99173

100-
.core-team-institution {
101-
font-size: 0.85rem;
102-
color: #64748b;
103-
margin-bottom: 0.75rem;
174+
.bio-links a .fa {
175+
font-size: 0.6rem;
176+
margin-left: 3px;
177+
vertical-align: middle;
104178
}
105179

106-
.core-team-bio {
107-
font-size: 0.9rem;
108-
color: #475569;
109-
line-height: 1.6;
110-
margin-bottom: 0;
180+
.bio-col.featured .bio-name {
181+
font-size: 1.5rem;
111182
}
112183

113-
@media (max-width: 575px) {
114-
.core-team-horizontal {
115-
flex-direction: column;
116-
text-align: center;
117-
}
184+
.bio-col.featured .staff-bio-avatar {
185+
width: 80px;
186+
height: 80px;
187+
}
118188

119-
.core-team-content {
120-
margin-left: 0;
121-
margin-top: 1rem;
189+
@keyframes cassio-fadeUp {
190+
from {
191+
opacity: 0;
192+
transform: translateY(14px);
122193
}
194+
to {
195+
opacity: 1;
196+
transform: translateY(0);
197+
}
198+
}
123199

124-
.core-team-image-wrap::after {
125-
display: none;
200+
.staff-bios-grid .bio-col {
201+
animation: cassio-fadeUp 0.4s ease both;
202+
}
203+
204+
.staff-bios-grid .bio-col:nth-child(1) { animation-delay: 0.08s; }
205+
.staff-bios-grid .bio-col:nth-child(2) { animation-delay: 0.14s; }
206+
.staff-bios-grid .bio-col:nth-child(3) { animation-delay: 0.20s; }
207+
.staff-bios-grid .bio-col:nth-child(4) { animation-delay: 0.26s; }
208+
.staff-bios-grid .bio-col:nth-child(5) { animation-delay: 0.32s; }
209+
.staff-bios-grid .bio-col:nth-child(6) { animation-delay: 0.38s; }
210+
.staff-bios-grid .bio-col:nth-child(7) { animation-delay: 0.44s; }
211+
212+
@media (max-width: 576px) {
213+
.staff-bio-card {
214+
padding: 1.5rem 1.25rem;
126215
}
127216
}
128217

129218
/* ---------------------------------------------- Community ---------------------------------------- */
219+
.community-hero {
220+
background: linear-gradient(135deg, #e8f4f2 0%, #fff 100%);
221+
border: 1px solid #e2eeec;
222+
}
223+
224+
.community-section-label {
225+
font-size : .7rem;
226+
font-weight : 600;
227+
letter-spacing : .18em;
228+
text-transform : uppercase;
229+
color : var(--cassiopeia-color-primary);
230+
margin-bottom : .4rem;
231+
}
232+
233+
.community-section-label--light {
234+
color : rgba(255,255,255,.45);
235+
}
236+
237+
.community-rule { border-color: #e2eeec; }
238+
239+
.community-callout {
240+
background : var(--cassiopeia-color-primary);
241+
color : rgba(255,255,255,.92);
242+
font-size : 1rem;
243+
line-height: 1.65;
244+
}
245+
246+
.community-callout-icon {
247+
display : block;
248+
font-size : 2.4rem;
249+
line-height : 1;
250+
margin-bottom: .5rem;
251+
color : rgba(255,255,255,.3);
252+
}
253+
130254
.community-card {
131-
border: 1.5px solid #dee2e6; /* visible border */
132-
border-radius: 0.75rem;
255+
border-color : #e9ecef !important;
256+
transition : box-shadow .2s, transform .2s, border-color .2s;
133257
}
258+
134259
.community-card:hover {
135-
border-color: #adb5bd; /* darker border on hover */
136-
box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.15); /* slightly stronger shadow */
260+
box-shadow : 0 4px 20px rgba(26,122,110,.1);
261+
transform : translateY(-2px);
262+
border-color : #a8d5cf !important;
137263
}
138264

139-
.community-card-body {
140-
padding: 16px;
265+
.community-icon-wrap {
266+
width : 44px;
267+
height : 44px;
268+
background : #e8f4f2;
269+
display : flex;
270+
align-items : center;
271+
justify-content : center;
272+
font-size : 1.2rem;
141273
}
142274

143-
.community-card-body p {
144-
margin-bottom: 1rem;
275+
.community-activity-list .list-group-item {
276+
border-left : none;
277+
border-right : none;
145278
}
146279

280+
.community-num {
281+
color : var(--cassiopeia-color-primary);
282+
min-width : 2rem;
283+
font-size : .85rem;
284+
}
285+
286+
.community-value {
287+
background : #e8f4f2;
288+
border-left : 4px solid var(--cassiopeia-color-primary);
289+
border-radius: 0 .375rem .375rem 0 !important;
290+
}
291+
292+
.community-value h5 { color: var(--cassiopeia-color-primary); }
293+
294+
.community-dark { background: #0f1c2e; }
295+
296+
.community-tag {
297+
display : inline-block;
298+
background : rgba(255,255,255,.08);
299+
border : 1px solid rgba(255,255,255,.2);
300+
color : rgba(255,255,255,.85);
301+
font-size : .75rem;
302+
padding : .3em .85em;
303+
border-radius : 2em;
304+
margin : .2rem;
305+
transition : background .15s;
306+
}
307+
308+
.community-tag:hover { background: rgba(26,122,110,.35); }
309+
310+
.community-tag--featured {
311+
background : var(--cassiopeia-color-primary);
312+
border-color : var(--cassiopeia-color-primary);
313+
color : #fff;
314+
}
147315
/* ---------------------------------------------- Events ---------------------------------------- */
148316
.events-row {
149317
align-items: center;

0 commit comments

Comments
 (0)