arne/For-Real-Consulting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine team card layout and improve email wrapping
Build and Push Docker Image / build-and-push (push) Successful in 23s
Details

Browse Source 
Updated team member email addresses for better line breaking. Enhanced CSS for `.frc-team-layout`, card content, and contact links to improve responsiveness, prevent overflow, and allow text wrapping. Reduced photo and heading sizes for a more compact design. Adjusted grid columns and icon behavior for improved layout consistency.
This commit is contained in:
Arne Moerman
2026-05-03 14:26:14 +02:00
parent 1aff354735
commit a6b761aaf8
2 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor
+2 -2
View File
@@ -21,7 +21,7 @@
<p class="frc-team-role">Bestuurder &amp; Finance Expert</p>
<div class="frc-team-contact">
<a href="tel:0476171249"><i class="bi bi-telephone"></i>0476 17 12 49</a>
<a href="mailto:Peter.Snijkers@forrealconsulting.be"><i class="bi bi-envelope"></i>Peter.Snijkers@forrealconsulting.be</a>
<a href="mailto:Peter.Snijkers@forrealconsulting.be"><i class="bi bi-envelope"></i>Peter.Snijkers<wbr />@@forrealconsulting.be</a>
</div>
</div>
</article>
@@ -35,7 +35,7 @@
<p class="frc-team-role">Bestuurder &amp; Finance Expert</p>
<div class="frc-team-contact">
<a href="tel:0498169449"><i class="bi bi-telephone"></i>0498 16 94 49</a>
<a href="mailto:Dylan.Tijsbaert@forrealconsulting.be"><i class="bi bi-envelope"></i>Dylan.Tijsbaert@forrealconsulting.be</a>
<a href="mailto:Dylan.Tijsbaert@forrealconsulting.be"><i class="bi bi-envelope"></i>Dylan.Tijsbaert<wbr />@@forrealconsulting.be</a>
</div>
</div>
</article>
For Real Consulting/For Real Consulting/Components/Sections/FrcTeam.razor.css
+25 -11
View File
@@ -15,6 +15,11 @@
.frc-team-layout {
display: grid;
gap: 2rem;
width: 100%;
}
.frc-team-layout > * {
min-width: 0;
}
.frc-team-intro-panel {
@@ -24,7 +29,7 @@
.frc-team-intro-panel h2 {
margin: 0;
font-weight: 300;
font-size: clamp(1.25rem, 2.4vw, 1.7rem);
font-size: clamp(1.1rem, 2.1vw, 1.45rem);
line-height: 1.12;
text-transform: uppercase;
letter-spacing: -0.02em;
@@ -53,6 +58,7 @@
background: rgba(24, 24, 27, 0.4);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: border-color 0.5s ease;
min-width: 0;
}
.frc-team-card:hover {
@@ -61,7 +67,7 @@
.frc-team-photo-wrap {
width: 100%;
height: 16rem;
height: 12.96rem;
overflow: hidden;
}
@@ -78,15 +84,18 @@
}
.frc-team-card-content {
padding: 2rem;
padding: 1rem;
min-width: 0;
overflow: hidden;
}
.frc-team-card h3 {
margin: 0 0 0.25rem;
font-size: 1.25rem;
font-size: 1.1rem;
font-weight: 300;
letter-spacing: 0.03em;
letter-spacing: 0.01em;
color: #c5a368;
white-space: normal;
}
.frc-team-role {
@@ -106,9 +115,13 @@
.frc-team-contact a {
display: flex;
align-items: center;
font-size: 0.6875rem;
font-size: 0.625rem;
color: #6b7280;
transition: color 0.2s ease;
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.frc-team-contact a:hover {
@@ -120,10 +133,11 @@
color: #c5a368;
opacity: 0.85;
font-size: 0.8rem;
flex-shrink: 0;
}
.frc-nowrap {
white-space: nowrap;
white-space: normal;
}
@media (min-width: 640px) {
@@ -132,9 +146,9 @@
}
.frc-team-photo-wrap {
width: 12rem;
min-width: 12rem;
height: 16rem;
width: 9.72rem;
min-width: 9.72rem;
height: 12.96rem;
}
}
@@ -146,7 +160,7 @@
@media (min-width: 1100px) {
.frc-team-layout {
grid-template-columns: 1.55fr 1fr 1fr;
grid-template-columns: 0.75fr 1fr 1fr;
gap: 2rem;
align-items: start;
}