Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: Enhance team-grid block with single open mode and updated styles

Browse Source
This commit is contained in:
Keith Solomon
2026-07-25 15:15:13 -05:00
parent 1c5c727691
commit 18dde4c9f4
5 changed files with 130 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/dist/theme.css
Vendored
+50 -29
View File
@@ -5786,15 +5786,16 @@ a.contact-info__value:hover {
}
}
.team-grid {
&__card {
margin-block: calc(var(--spacing) * 12);
.team-grid__card {
display: flex;
flex-direction: column;
}
&__details {
.team-grid__details {
display: flex;
flex-direction: column;
}
&__summary {
.team-grid__summary {
display: flex;
cursor: pointer;
list-style-type: none;
@@ -5808,27 +5809,22 @@ a.contact-info__value:hover {
display: none;
content: '';
}
&:hover {
.team-grid__read-bio::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
width: 1.25rem;
height: 1.25rem;
}
}
}
&__photo {
.team-grid__photo {
margin-bottom: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 32);
width: calc(var(--spacing) * 32);
height: 100%;
width: 100%;
border-radius: var(--radius-md);
object-fit: cover;
@media (width >= 40rem) {
height: calc(var(--spacing) * 40);
}
@media (width >= 40rem) {
width: calc(var(--spacing) * 40);
}
@media (width >= 64rem) {
height: calc(var(--spacing) * 48);
}
@media (width >= 64rem) {
width: calc(var(--spacing) * 48);
}
}
&__name {
.team-grid__name {
margin-bottom: calc(var(--spacing) * 1);
font-size: var(--text-22px);
--tw-leading: var(--leading-tight);
@@ -5837,34 +5833,59 @@ a.contact-info__value:hover {
font-weight: var(--font-weight-bold);
color: var(--color-cwc-blue-01);
}
&__title {
.team-grid__title {
margin-bottom: calc(var(--spacing) * 3);
font-size: var(--text-16px);
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-gray-600);
--tw-font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal);
color: var(--color-cwc-blue-01);
font-style: italic;
}
&__bio-wrap {
.team-grid__read-bio {
margin-bottom: calc(var(--spacing) * 1);
display: flex;
align-items: center;
justify-content: center;
gap: calc(var(--spacing) * 2);
font-size: var(--text-16px);
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
color: var(--color-cwc-blue-01);
&::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%220.5%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
width: 1.25rem;
height: 1.25rem;
}
}
.team-grid__bio-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 300ms ease;
}
&__details[open] &__bio-wrap {
grid-template-rows: 1fr;
.team-grid__details[open] {
.team-grid__bio-wrap {
grid-template-rows: 1fr;
}
.team-grid__read-bio::after {
content: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22rotate(0%200%200)%22%3E%3Cpath%20d%3D%22M6.28033%2010.5947C5.98744%2010.3018%205.51256%2010.3018%205.21967%2010.5947C4.92678%2010.8876%204.92678%2011.3624%205.21967%2011.6553L11.4697%2017.9053C11.7626%2018.1982%2012.2374%2018.1982%2012.5303%2017.9053L18.7803%2011.6553C19.0732%2011.3624%2019.0732%2010.8876%2018.7803%2010.5947C18.4874%2010.3018%2018.0126%2010.3018%2017.7197%2010.5947L12%2016.3143L6.28033%2010.5947Z%22%20fill%3D%22%23006196%22%2F%3E%3Cpath%20opacity%3D%221%22%20d%3D%22M6.28033%206.09467C5.98744%205.80178%205.51256%205.80178%205.21967%206.09467C4.92678%206.38756%204.92678%206.86244%205.21967%207.15533L11.4697%2013.4053C11.7626%2013.6982%2012.2374%2013.6982%2012.5303%2013.4053L18.7803%207.15533C19.0732%206.86244%2019.0732%206.38756%2018.7803%206.09467C18.4874%205.80178%2018.0126%205.80178%2017.7197%206.09467L12%2011.8143L6.28033%206.09467Z%22%20fill%3D%22%23006196%22%2F%3E%3C%2Fsvg%3E");
transform: rotate(180deg);
}
}
&__bio-inner {
.team-grid__bio-inner {
overflow: hidden;
min-height: 0;
}
&__bio {
.team-grid__bio {
padding-top: calc(var(--spacing) * 2);
text-align: center;
font-size: var(--text-16px);
--tw-leading: var(--leading-snug);
line-height: var(--leading-snug);
--tw-font-weight: var(--font-weight-light);
font-weight: var(--font-weight-light);
color: var(--color-gray-700);
text-wrap: balance;
}
}
@property --tw-rotate-x {