starred/aryx
1
0
Fork 0
mirror of https://github.com/davidkaya/aryx.git synced 2026-08-27 21:33:58 +02:00
Code Issues 3 Packages Projects Releases 10 Wiki Activity

feat(website): add screenshot lightbox and update orchestration screenshots

Browse Source 
Add click-to-enlarge lightbox for both hero and orchestration
screenshots. Clicking opens a fullscreen overlay with smooth scale
animation; clicking the backdrop, close button, or pressing Escape
dismisses it. Screenshots are keyboard-accessible (Enter/Space) and
the overlay uses role=dialog with aria-modal for screen readers.

Update orchestration screenshots (dark + light) with latest captures
showing the workflow designer.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-04-07 14:20:27 +02:00
co-authored by Copilot
parent 573efff647
commit 8797186a73
5 changed files with 118 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/styles/global.css
+52
View File
@@ -192,3 +192,55 @@ body::after {
.theme-toggle .icon-moon { display: block; }
[data-theme='light'] .theme-toggle .icon-sun { display: block; }
[data-theme='light'] .theme-toggle .icon-moon { display: none; }
/* ── Lightbox overlay ── */
.lightbox-overlay {
position: fixed;
inset: 0;
z-index: 9998;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: zoom-out;
padding: 2rem;
}
.lightbox-overlay.is-active {
opacity: 1;
}
.lightbox-img {
max-width: 95vw;
max-height: 92vh;
border-radius: 0.75rem;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
transform: scale(0.92);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.lightbox-overlay.is-active .lightbox-img {
transform: scale(1);
}
.lightbox-close {
position: absolute;
top: 1rem;
right: 1.5rem;
font-size: 2rem;
line-height: 1;
color: var(--color-warm-300);
background: none;
border: none;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
transition: color 0.2s ease, background-color 0.2s ease;
}
.lightbox-close:hover {
color: var(--color-warm-50);
background: rgba(255, 255, 255, 0.08);
}
[data-theme='light'] .lightbox-overlay {
background: rgba(0, 0, 0, 0.7);
}