Click to toggle on moble, remove clickable projects

This commit is contained in:
Ian Keane 2026-08-26 17:37:52 -04:00
parent e4a124dfe0
commit 537e279780
3 changed files with 20 additions and 18 deletions

View file

@ -18,11 +18,10 @@
;; ─── Individual cards (all become flat children of .columns) ────────────────── ;; ─── Individual cards (all become flat children of .columns) ──────────────────
;; Project card — optionally wraps in an anchor if url is set ;; Project card — detail bullets revealed on hover (desktop) or click (mobile)
(define (render-project proj) (define (render-project proj)
(let* ((url (field proj 'url)) `(div (@ (class "project-card")
(card `(div (@ (class ,(string-append "project-card" (if url " clickable" ""))) (onclick "this.classList.toggle('open')"))
,@(if url `((onclick ,(string-append "window.open('" url "','_blank')"))) '()))
(div (@ (class "project-header")) (div (@ (class "project-header"))
(span (@ (class "project-name")) ,(field proj 'name)) (span (@ (class "project-name")) ,(field proj 'name))
,(date-range (field proj 'date-start) (field proj 'date-end))) ,(date-range (field proj 'date-start) (field proj 'date-end)))
@ -30,8 +29,7 @@
,(bullets (field proj 'summary-bullets))) ,(bullets (field proj 'summary-bullets)))
(div (@ (class "project-details")) (div (@ (class "project-details"))
,(bullets (field proj 'detail-bullets))) ,(bullets (field proj 'detail-bullets)))
,(tech-list (field proj 'technologies))))) ,(tech-list (field proj 'technologies))))
card))
;; Title card: blurb only, no projects nested inside. ;; Title card: blurb only, no projects nested inside.
;; Projects are emitted as siblings after the title card. ;; Projects are emitted as siblings after the title card.
@ -52,7 +50,8 @@
(map render-project (field tc 'projects)))) (map render-project (field tc 'projects))))
(define (render-education edu) (define (render-education edu)
`(div (@ (class "education-card")) `(div (@ (class "education-card")
(onclick "this.classList.toggle('open')"))
(div (@ (class "edu-header")) (div (@ (class "edu-header"))
(span (@ (class "edu-degree")) ,(field edu 'degree)) (span (@ (class "edu-degree")) ,(field edu 'degree))
,(date-range (field edu 'date-start) (field edu 'date-end))) ,(date-range (field edu 'date-start) (field edu 'date-end)))

File diff suppressed because one or more lines are too long

View file

@ -159,7 +159,8 @@ a { color: var(--accent); text-decoration: none; }
transition: background 0.18s, border-left-color 0.18s; transition: background 0.18s, border-left-color 0.18s;
} }
.project-card:has(.project-details li):hover { .project-card:has(.project-details li):hover,
.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);
} }
@ -188,7 +189,8 @@ a { color: var(--accent); text-decoration: none; }
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 { .project-card:hover .project-details,
.project-card.open .project-details {
max-height: 500px; max-height: 500px;
opacity: 1; opacity: 1;
} }
@ -239,7 +241,8 @@ a { color: var(--accent); text-decoration: none; }
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-card:hover .edu-extras,
.education-card.open .edu-extras {
max-height: 400px; max-height: 400px;
opacity: 1; opacity: 1;
margin-top: 4px; margin-top: 4px;