Click to expand only on phone

This commit is contained in:
Ian Keane 2026-08-26 18:22:23 -04:00
parent 0b0cc6fda5
commit 230bc5a002

View file

@ -152,8 +152,7 @@ p.title-blurb {
} }
.project-card:has(.project-details li):hover, .project-card:has(.project-details li):hover,
.project-card:has(.project-details li).open { .project-card:has(.project-details li).open { background: var(--bg-hover);
background: var(--bg-hover);
border-left-color: var(--accent); border-left-color: var(--accent);
} }
@ -181,11 +180,24 @@ p.title-blurb {
opacity: 0; opacity: 0;
transition: max-height 0.28s ease, opacity 0.22s ease; transition: max-height 0.28s ease, opacity 0.22s ease;
} }
.project-card:hover .project-details, /* On desktop: hover only, .open class has no effect */
.project-card.open .project-details { .project-card:hover .project-details {
max-height: 500px; max-height: 500px;
opacity: 1; opacity: 1;
} }
.education-card:hover .edu-extras {
max-height: 400px;
opacity: 1;
margin-top: 4px;
}
/* On touch/mobile: .open class works, hover does not */
@media (hover: none) {
.project-card:hover .project-details { max-height: 0; opacity: 0; }
.project-card.open .project-details { max-height: 500px; opacity: 1; }
.education-card:hover .edu-extras { max-height: 0; opacity: 0; margin-top: 0; }
.education-card.open .edu-extras { max-height: 400px; opacity: 1; margin-top: 4px; }
}
.project-details ul { padding-left: 12px; margin-top: 4px; } .project-details ul { padding-left: 12px; margin-top: 4px; }
.project-details li { .project-details li {
font-size: 0.68rem; font-size: 0.68rem;
@ -233,12 +245,7 @@ p.title-blurb {
opacity: 0; opacity: 0;
transition: max-height 0.28s ease, opacity 0.22s ease; transition: max-height 0.28s ease, opacity 0.22s ease;
} }
.education-card:hover .edu-extras, /* education hover handled in the desktop/mobile blocks above */
.education-card.open .edu-extras {
max-height: 400px;
opacity: 1;
margin-top: 4px;
}
.edu-extras ul { padding-left: 12px; } .edu-extras ul { padding-left: 12px; }
.edu-extras li { .edu-extras li {
font-size: 0.78rem; font-size: 0.78rem;