diff --git a/css/pages/_gallery.css b/css/pages/_gallery.css index b16209eb..f2e71b0d 100644 --- a/css/pages/_gallery.css +++ b/css/pages/_gallery.css @@ -1,5 +1,5 @@ /* ========================================================================== - Gallery page (albums per event + lightbox) + Gallery page — Pinterest-style album collage cards + lightbox ========================================================================== */ .gallery-page { padding-top: 80px; background: #FFFFFF; } @@ -19,39 +19,64 @@ } .gallery-lead { font-size: 18px; line-height: 28px; color: #475467; margin: 0; } -.gallery-albums { max-width: 1120px; margin: 0 auto; padding: 24px 24px 80px; } -.album { margin-top: 52px; } -.album:first-child { margin-top: 24px; } -.album-head { - display: flex; align-items: baseline; justify-content: space-between; - gap: 16px; margin-bottom: 16px; flex-wrap: wrap; - border-bottom: 1px solid #EAECF0; padding-bottom: 12px; -} -.album-head h2 { font-size: 22px; color: #101828; margin: 0; font-weight: 700; } -.album-link { - color: #2D738C; font-weight: 600; font-size: 15px; - text-decoration: none; white-space: nowrap; - display: inline-flex; align-items: center; gap: 6px; -} -.album-link:hover { text-decoration: underline; } -.album-link i { font-size: 12px; } - -.gallery-grid { +/* ---------- Album grid (multiple collage cards per row) ---------- */ +.gallery-albums { + max-width: 1180px; margin: 0 auto; padding: 28px 24px 88px; display: grid; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); - gap: 10px; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 28px 24px; } -.gallery-thumb { + +.album-card { display: flex; flex-direction: column; } + +/* The collage: 1 large tile (left, full height) + 2 stacked tiles (right). + Extra photos stay in the DOM (for the lightbox) but are hidden here. */ +.album-card .gallery-grid { + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 4px; + height: 230px; + border-radius: 14px; + overflow: hidden; + background: #EEF2F4; +} +.album-card .gallery-thumb { padding: 0; border: none; background: #EEF2F4; - border-radius: 10px; overflow: hidden; cursor: pointer; - aspect-ratio: 4 / 3; display: block; + cursor: pointer; overflow: hidden; position: relative; + width: 100%; height: 100%; } -.gallery-thumb img { +.album-card .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } -.gallery-thumb:hover img { transform: scale(1.05); } -.gallery-thumb:focus-visible { outline: 2px solid #2D738C; outline-offset: 2px; } +.album-card .gallery-thumb:hover img { transform: scale(1.05); } +.album-card .gallery-thumb:focus-visible { outline: 2px solid #2D738C; outline-offset: -2px; } +.album-card .gallery-grid > .gallery-thumb:nth-child(1) { grid-row: 1 / 3; grid-column: 1; } +.album-card .gallery-grid > .gallery-thumb:nth-child(2) { grid-column: 2; grid-row: 1; } +.album-card .gallery-grid > .gallery-thumb:nth-child(3) { grid-column: 2; grid-row: 2; } +.album-card .gallery-grid > .gallery-thumb:nth-child(n+4) { display: none; } + +/* "+N more" overlay on the last visible tile */ +.cover-more-badge { + position: absolute; inset: 0; + display: flex; align-items: center; justify-content: center; + background: rgba(9, 18, 26, 0.55); + color: #FFFFFF; font-size: 22px; font-weight: 700; + letter-spacing: 0.01em; pointer-events: none; +} + +.album-info { padding: 12px 2px 0; } +.album-info h3 { font-size: 17px; line-height: 1.3; margin: 0 0 3px; font-weight: 700; } +.album-info h3 a { color: #101828; text-decoration: none; } +.album-info h3 a:hover { color: #2D738C; } +.album-meta { + font-size: 13px; color: #667085; margin: 0; + display: flex; align-items: center; gap: 8px; flex-wrap: wrap; +} +.album-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #D0D5DD; } +.album-meta a { color: #2D738C; text-decoration: none; font-weight: 600; } +.album-meta a:hover { text-decoration: underline; } /* ---------- Lightbox ---------- */ .lightbox { @@ -80,8 +105,12 @@ text-align: center; color: rgba(255, 255, 255, 0.85); font-size: 14px; padding: 0 24px; } + @media (max-width: 600px) { - .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; } + .gallery-albums { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 24px 16px 72px; } + .album-card .gallery-grid { height: 150px; } + .album-info h3 { font-size: 15px; } + .cover-more-badge { font-size: 17px; } .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } .lightbox-close { top: 12px; right: 12px; } diff --git a/en/gallery/index.html b/en/gallery/index.html index edccf01d..280ba3d6 100644 --- a/en/gallery/index.html +++ b/en/gallery/index.html @@ -195,19 +195,15 @@

MSOS moments

Our moments through the years

-

A look back at the events, gatherings and moments that make the MSOS community. Click any photo to view it larger.

+

A look back at the events, gatherings and moments that make the MSOS community. Click an album to browse the photos.

-
-
-

Meet Student Slovenia 2024

- Read the story -
+
- + @@ -218,16 +214,16 @@
-
- +
- + @@ -236,16 +232,16 @@
-
- +
- + @@ -254,31 +250,31 @@
-
- +
- +
-
- +
- + @@ -286,59 +282,63 @@
-
- +
- +
-
- +
- +
-
- +
-
- +