Skip to content

Commit c75b369

Browse files
TheDThompsonDevTheDThompsonDev
committed
fix: cohort page styling issues
1 parent 980e776 commit c75b369

File tree

8 files changed

+210
-141
lines changed

8 files changed

+210
-141
lines changed

‎src/app/cohorts/cohorts.module.css‎

Lines changed: 82 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -674,7 +674,7 @@
674674
}
675675

676676
.statLabel {
677-
font-size: 8.5px !important;
677+
font-size: var(--text-xs) !important;
678678
letter-spacing: 0.05em;
679679
hyphens: auto;
680680
}
@@ -1339,30 +1339,37 @@
13391339
}
13401340

13411341
.timeline::before {
1342-
left: 20px;
1342+
left: 14px;
13431343
}
13441344

13451345
.timelineItem {
1346-
padding-left: 50px;
1347-
margin-bottom: var(--spacing-6);
1346+
padding-left: 44px;
1347+
margin-bottom: var(--spacing-8);
13481348
}
13491349

13501350
.timelineMarker {
1351-
left: 10px;
1352-
width: 20px;
1353-
height: 20px;
1351+
left: 4px;
1352+
width: 22px;
1353+
height: 22px;
1354+
font-size: 0;
1355+
overflow: hidden;
1356+
}
1357+
1358+
.timelineMarker span {
1359+
display: none;
13541360
}
13551361

13561362
.timelineContent h3 {
1357-
font-size: 1rem;
1363+
font-size: var(--text-base);
1364+
padding-top: 0;
13581365
}
13591366

13601367
.weekLabel {
1361-
font-size: 0.9rem;
1368+
font-size: var(--text-sm);
13621369
}
13631370

13641371
.timelineContent li {
1365-
font-size: 0.85rem;
1372+
font-size: var(--text-sm);
13661373
padding-left: var(--spacing-4);
13671374
}
13681375

@@ -1371,31 +1378,38 @@
13711378
}
13721379

13731380
.scheduleNote h3 {
1374-
font-size: 1rem;
1381+
font-size: var(--text-base);
13751382
}
13761383

13771384
.scheduleNote p {
1378-
font-size: 0.85rem;
1385+
font-size: var(--text-sm);
13791386
}
13801387
}
13811388

13821389
@media (max-width: 480px) {
13831390
.timelineItem {
1384-
padding-left: 40px;
1391+
padding-left: 36px;
13851392
}
13861393

13871394
.timelineMarker {
1388-
left: 8px;
1389-
width: 16px;
1390-
height: 16px;
1395+
left: 4px;
1396+
width: 18px;
1397+
height: 18px;
1398+
font-size: 0;
1399+
overflow: hidden;
1400+
}
1401+
1402+
.timelineMarker span {
1403+
display: none;
13911404
}
13921405

13931406
.timelineContent h3 {
1394-
font-size: 0.9rem;
1407+
font-size: var(--text-sm);
1408+
padding-top: 0;
13951409
}
13961410

13971411
.timelineContent li {
1398-
font-size: 0.8rem;
1412+
font-size: var(--text-xs);
13991413
}
14001414
}
14011415

@@ -1415,6 +1429,16 @@
14151429
grid-template-columns: 1fr;
14161430
gap: var(--spacing-6);
14171431
}
1432+
1433+
.photoOverlay {
1434+
transform: translateY(0);
1435+
background: linear-gradient(
1436+
to top,
1437+
rgba(0, 0, 0, 0.75) 0%,
1438+
rgba(0, 0, 0, 0.4) 60%,
1439+
transparent 100%
1440+
);
1441+
}
14181442
}
14191443

14201444
.photoCard {
@@ -1697,102 +1721,94 @@
16971721
padding: 0 var(--spacing-2);
16981722
}
16991723
.testimonialsCarousel {
1700-
gap: var(--spacing-1);
1701-
padding: var(--spacing-1);
1724+
gap: var(--spacing-4);
1725+
padding: var(--spacing-2);
17021726
}
17031727

17041728
.testimonialCard {
1705-
width: 320px;
1729+
width: 300px;
17061730
max-width: none;
1707-
padding: var(--spacing-3);
1708-
min-height: 300px;
1709-
transform: scale(0.3);
1710-
transform-origin: top left;
1731+
padding: var(--spacing-4);
1732+
min-height: 320px;
17111733
display: flex;
17121734
flex-direction: column;
1713-
box-shadow: none !important;
17141735
}
17151736
.testimonialQuote {
1716-
flex-grow: 1 !important;
1717-
display: flex !important;
1718-
flex-direction: column !important;
1719-
justify-content: flex-start !important;
1720-
margin-bottom: var(--spacing-4) !important;
1737+
flex-grow: 1;
1738+
display: flex;
1739+
flex-direction: column;
1740+
justify-content: flex-start;
1741+
margin-bottom: var(--spacing-4);
17211742
}
17221743

17231744
.testimonialQuote p {
1724-
font-size: 0.9rem;
1725-
line-height: 1.4;
1745+
font-size: var(--text-sm);
1746+
line-height: 1.5;
17261747
}
17271748

17281749
.testimonialAuthor {
1729-
margin-top: auto !important;
1730-
padding-top: var(--spacing-3) !important;
1750+
margin-top: auto;
1751+
padding-top: var(--spacing-3);
17311752
}
17321753

17331754
.authorImage {
17341755
width: 48px;
17351756
height: 48px;
17361757
}
17371758
.authorInfo h4 {
1738-
font-size: 0.85rem;
1759+
font-size: var(--text-sm);
17391760
}
17401761
.authorInfo p {
1741-
font-size: 0.7rem;
1762+
font-size: var(--text-xs);
17421763
}
17431764
}
17441765

17451766
@media (max-width: 480px) {
17461767
.testimonialCard {
1747-
width: 300px;
1748-
padding: var(--spacing-2);
1768+
width: 270px;
1769+
padding: var(--spacing-3);
17491770
min-height: 280px;
1750-
transform: scale(0.3);
1751-
transform-origin: top left;
17521771
display: flex;
17531772
flex-direction: column;
1754-
box-shadow: none !important;
17551773
}
17561774
.testimonialQuote {
1757-
flex-grow: 1 !important;
1758-
display: flex !important;
1759-
flex-direction: column !important;
1760-
justify-content: flex-start !important;
1761-
margin-bottom: var(--spacing-3) !important;
1775+
flex-grow: 1;
1776+
display: flex;
1777+
flex-direction: column;
1778+
justify-content: flex-start;
1779+
margin-bottom: var(--spacing-3);
17621780
}
17631781

17641782
.quoteIcon {
1765-
font-size: 1.2rem;
1783+
font-size: var(--text-xl);
17661784
top: -4px;
17671785
left: -3px;
17681786
}
17691787

17701788
.testimonialQuote p {
1771-
font-size: 0.9rem !important;
1772-
line-height: 1.3;
1773-
padding-top: 25px;
1789+
font-size: var(--text-sm);
1790+
line-height: 1.4;
1791+
padding-top: var(--spacing-6);
17741792
}
17751793

17761794
.testimonialAuthor {
1777-
margin-top: auto !important;
1778-
padding-top: var(--spacing-2) !important;
1795+
margin-top: auto;
1796+
padding-top: var(--spacing-2);
17791797
}
17801798

17811799
.authorImage {
17821800
width: 44px;
17831801
height: 44px;
17841802
}
17851803
.authorInfo h4 {
1786-
font-size: 0.8rem;
1804+
font-size: var(--text-xs);
17871805
}
17881806
.authorInfo p {
1789-
font-size: 0.68rem;
1807+
font-size: var(--text-xs);
17901808
}
17911809
.linkedinLink {
1792-
font-size: 0.7rem !important;
1793-
color: hsla(var(--dark), 0.6);
1794-
text-decoration: underline;
1795-
margin-top: -10px;
1810+
font-size: var(--text-xs);
1811+
padding: var(--spacing-1) var(--spacing-3);
17961812
}
17971813
}
17981814

@@ -2441,16 +2457,16 @@
24412457
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
24422458
}
24432459
.projectName {
2444-
font-size: 1.1rem;
2460+
font-size: var(--text-lg);
24452461
}
24462462
.projectDescription {
2447-
font-size: 0.9rem;
2463+
font-size: var(--text-sm);
24482464
}
24492465
.detailCard h3 {
2450-
font-size: 1.1rem;
2466+
font-size: var(--text-lg);
24512467
}
24522468
.detailCard p {
2453-
font-size: 0.9rem;
2469+
font-size: var(--text-sm);
24542470
}
24552471
}
24562472

@@ -2807,7 +2823,7 @@
28072823
.calloutContent p,
28082824
.scheduleNote p,
28092825
.timelineContent li {
2810-
font-size: 11px !important;
2826+
font-size: var(--text-xs) !important;
28112827
}
28122828
}
28132829

@@ -2821,9 +2837,9 @@
28212837
padding: var(--spacing-2) var(--spacing-4);
28222838
}
28232839
.projectName {
2824-
font-size: 1rem;
2840+
font-size: var(--text-base);
28252841
}
28262842
.projectDescription {
2827-
font-size: 0.85rem;
2843+
font-size: var(--text-sm);
28282844
}
28292845
}

‎src/app/labels.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -638,6 +638,35 @@ export const LABELS = {
638638
],
639639
},
640640
},
641+
photos: {
642+
title: 'Our Cohort Community',
643+
description:
644+
'Capturing moments of collaboration, learning, and growth. These photos showcase the vibrant community of developers who have participated in our cohort programs, working together to build real-world projects and forge lasting professional connections.',
645+
captions: {
646+
collaboration: {
647+
title: 'Cohort Collaboration',
648+
description: 'Teams working together on innovative solutions',
649+
},
650+
demoDay: {
651+
title: 'Demo Day Presentations',
652+
description: 'Showcasing completed projects to the community',
653+
},
654+
community: {
655+
title: 'Community Connections',
656+
description: 'Building lasting professional relationships',
657+
},
658+
},
659+
stats: {
660+
developersTrained: { number: '100+', label: 'Developers Trained' },
661+
projectsCompleted: { number: '15+', label: 'Projects Completed' },
662+
jobPlacement: { number: '85%', label: 'Job Placement Rate' },
663+
},
664+
imageAlts: {
665+
group1: 'Cohort Group 1 - Developers collaborating on projects',
666+
group2: 'Cohort Group 2 - Presentation and demo day',
667+
group3: 'Cohort Group 3 - Networking and community building',
668+
},
669+
},
641670
testimonials: {
642671
title: 'Success Stories',
643672
description:

‎src/components/cohortsDetails/cohortsDetails.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,9 +175,9 @@
175175

176176
@media (max-width: 768px) {
177177
.detailCard h3 {
178-
font-size: 1.1rem;
178+
font-size: var(--text-lg);
179179
}
180180
.detailCard p {
181-
font-size: 0.9rem;
181+
font-size: var(--text-sm);
182182
}
183183
}

‎src/components/cohortsPhotos/cohortsPhotos.module.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,16 @@
9090
grid-template-columns: 1fr;
9191
gap: var(--spacing-6);
9292
}
93+
94+
.photoOverlay {
95+
transform: translateY(0);
96+
background: linear-gradient(
97+
to top,
98+
rgba(0, 0, 0, 0.75) 0%,
99+
rgba(0, 0, 0, 0.4) 60%,
100+
transparent 100%
101+
);
102+
}
93103
}
94104

95105
.photoCard {

0 commit comments

Comments
 (0)