Click to expand only on phone
This commit is contained in:
parent
0b0cc6fda5
commit
230bc5a002
1 changed files with 17 additions and 10 deletions
27
style.css
27
style.css
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue