diff --git a/css/pages/_gallery.css b/css/pages/_gallery.css index f2e71b0d..e95bd65f 100644 --- a/css/pages/_gallery.css +++ b/css/pages/_gallery.css @@ -1,5 +1,5 @@ /* ========================================================================== - Gallery page — Pinterest-style album collage cards + lightbox + Gallery page — album collage cards (whole card links to the event story) ========================================================================== */ .gallery-page { padding-top: 80px; background: #FFFFFF; } @@ -19,99 +19,77 @@ } .gallery-lead { font-size: 18px; line-height: 28px; color: #475467; margin: 0; } -/* ---------- Album grid (multiple collage cards per row) ---------- */ +/* ---------- Album grid ---------- */ .gallery-albums { max-width: 1180px; margin: 0 auto; padding: 28px 24px 88px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - gap: 28px 24px; + gap: 30px 26px; } -.album-card { display: flex; flex-direction: column; } +/* Each album is a distinct, hoverable card */ +.album-card { + border-radius: 16px; + background: #FFFFFF; + border: 1px solid #E7ECEF; + box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05); + overflow: hidden; + transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; +} +.album-card:hover { + transform: translateY(-6px); + box-shadow: 0 22px 44px rgba(16, 24, 40, 0.18); + border-color: #BCD8E0; +} +.album-link-wrap { display: block; text-decoration: none; color: inherit; } -/* 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 { +/* The collage: 1 large tile (left) + 2 stacked tiles (right) */ +.album-cover { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; - gap: 4px; - height: 230px; - border-radius: 14px; - overflow: hidden; + gap: 3px; + height: 220px; background: #EEF2F4; } -.album-card .gallery-thumb { - padding: 0; border: none; background: #EEF2F4; - cursor: pointer; overflow: hidden; position: relative; - width: 100%; height: 100%; -} -.album-card .gallery-thumb img { +.album-tile { position: relative; overflow: hidden; } +.album-tile img { width: 100%; height: 100%; object-fit: cover; display: block; - transition: transform 0.4s ease; + transition: transform 0.5s ease; } -.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; } +.album-tile--main { grid-row: 1 / 3; grid-column: 1; } +.album-card:hover .album-tile img { transform: scale(1.04); } -/* "+N more" overlay on the last visible tile */ +/* Blue brand tint over every photo; fades on hover so the images brighten */ +.album-tile::after { + content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; + background: linear-gradient(155deg, rgba(45, 115, 140, 0.34) 0%, rgba(21, 60, 78, 0.12) 60%, rgba(21, 60, 78, 0.04) 100%); + transition: opacity 0.3s ease; +} +.album-card:hover .album-tile::after { opacity: 0.35; } + +/* "+N more" overlay on the last visible tile (sits above the tint) */ .cover-more-badge { - position: absolute; inset: 0; + position: absolute; inset: 0; z-index: 2; 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; + background: rgba(9, 18, 26, 0.5); + color: #FFFFFF; font-size: 22px; font-weight: 700; letter-spacing: 0.01em; } -.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-info { padding: 14px 16px 16px; } +.album-info h3 { font-size: 17px; line-height: 1.3; margin: 0 0 3px; font-weight: 700; color: #101828; transition: color 0.2s ease; } +.album-card:hover .album-info h3 { 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 { - position: fixed; inset: 0; z-index: 2000; - display: none; align-items: center; justify-content: center; - background: rgba(9, 18, 26, 0.92); padding: 24px; -} -.lightbox.is-open { display: flex; } -.lightbox-img { - max-width: 92vw; max-height: 82vh; object-fit: contain; - border-radius: 6px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); -} -.lightbox-close, .lightbox-prev, .lightbox-next { - position: absolute; background: rgba(255, 255, 255, 0.12); - color: #FFFFFF; border: none; cursor: pointer; border-radius: 50%; - width: 48px; height: 48px; font-size: 24px; line-height: 1; - display: flex; align-items: center; justify-content: center; - transition: background 0.15s ease; -} -.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255, 255, 255, 0.25); } -.lightbox-close { top: 20px; right: 20px; font-size: 28px; } -.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); } -.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); } -.lightbox-caption { - position: absolute; bottom: 18px; left: 0; right: 0; - text-align: center; color: rgba(255, 255, 255, 0.85); - font-size: 14px; padding: 0 24px; -} +.album-meta .read-link { color: #2D738C; font-weight: 600; } @media (max-width: 600px) { .gallery-albums { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 24px 16px 72px; } - .album-card .gallery-grid { height: 150px; } + .album-cover { height: 150px; } + .album-info { padding: 12px 12px 14px; } .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 280ba3d6..2cfc1768 100644 --- a/en/gallery/index.html +++ b/en/gallery/index.html @@ -195,159 +195,128 @@

MSOS moments

Our moments through the years

-

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

+

A look back at the events, gatherings and moments that make the MSOS community. Click an album to open the story and see every photo.

-
- - - - - - - - - - - - -
-
-

Meet Student Slovenia 2024

-

12 photosRead the story

-
+ +
+ Meet Student Slovenia 2024 — photo 1 + Meet Student Slovenia 2024 — photo 2 + Meet Student Slovenia 2024 — photo 3+9 +
+
+

Meet Student Slovenia 2024

+

12 photosRead the story

+
+
-
- - - - - - - - - - -
-
-

Meet Student Slovenia 2023

-

10 photosRead the story

-
+ +
+ Meet Student Slovenia 2023 — photo 1 + Meet Student Slovenia 2023 — photo 2 + Meet Student Slovenia 2023 — photo 3+7 +
+
+

Meet Student Slovenia 2023

+

10 photosRead the story

+
+
-
- - - - - - - - - - -
-
-

Humanitarian Tournament in Maribor

-

10 photosRead the story

-
+ +
+ Humanitarian Tournament in Maribor — photo 1 + Humanitarian Tournament in Maribor — photo 2 + Humanitarian Tournament in Maribor — photo 3+7 +
+
+

Humanitarian Tournament in Maribor

+

10 photosRead the story

+
+
-
- - - - - - - -
-
-

Macedonian Student Night in Ljubljana

-

7 photosRead the story

-
+ +
+ Macedonian Student Night in Ljubljana — photo 1 + Macedonian Student Night in Ljubljana — photo 2 + Macedonian Student Night in Ljubljana — photo 3+4 +
+
+

Macedonian Student Night in Ljubljana

+

7 photosRead the story

+
+
-
- - - - - - - - - -
-
-

Paint & Wine at Sunset

-

9 photosRead the story

-
+ +
+ Paint & Wine at Sunset — photo 1 + Paint & Wine at Sunset — photo 2 + Paint & Wine at Sunset — photo 3+6 +
+
+

Paint & Wine at Sunset

+

9 photosRead the story

+
+
-
- - - - - - - -
-
-

Watching Handball Together in Slovenia

-

7 photosRead the story

-
+ +
+ Watching Handball Together in Slovenia — photo 1 + Watching Handball Together in Slovenia — photo 2 + Watching Handball Together in Slovenia — photo 3+4 +
+
+

Watching Handball Together in Slovenia

+

7 photosRead the story

+
+
-
- - - - - - - -
-
-

Morning Coffee in front of CTK

-

7 photosRead the story

-
+ +
+ Morning Coffee in front of CTK — photo 1 + Morning Coffee in front of CTK — photo 2 + Morning Coffee in front of CTK — photo 3+4 +
+
+

Morning Coffee in front of CTK

+

7 photosRead the story

+
+
-
- - - -
-
-

In Memory of Frosina Kulakova

-

3 photosRead the story

-
+ +
+ In Memory of Frosina Kulakova — photo 1 + In Memory of Frosina Kulakova — photo 2 + In Memory of Frosina Kulakova — photo 3 +
+
+

In Memory of Frosina Kulakova

+

3 photosRead the story

+
+
-
- - - - -
-
-

In Memory of the Kochani Victims

-

4 photosRead the story

-
+ +
+ In Memory of the Kochani Victims — photo 1 + In Memory of the Kochani Victims — photo 2 + In Memory of the Kochani Victims — photo 3+1 +
+
+

In Memory of the Kochani Victims

+

4 photosRead the story

+
+
- diff --git a/main.js b/main.js index e1a5ef22..b825d8b5 100644 --- a/main.js +++ b/main.js @@ -833,60 +833,6 @@ document.addEventListener('DOMContentLoaded', function() { } } - /** - * =================================================================== - * GALLERY LIGHTBOX (per-album photo viewer) - * =================================================================== - */ - function setupGallery() { - var lb = document.getElementById('gallery-lightbox'); - if (!lb) return; - var img = lb.querySelector('.lightbox-img'); - var cap = lb.querySelector('.lightbox-caption'); - var group = []; - var idx = 0; - - function render() { - var it = group[idx]; - img.setAttribute('src', it.full); - img.setAttribute('alt', it.caption || ''); - cap.textContent = (it.caption || '') + (group.length > 1 ? ' (' + (idx + 1) + '/' + group.length + ')' : ''); - } - function open(grid, start) { - group = Array.prototype.map.call(grid.querySelectorAll('.gallery-thumb'), function (b) { - return { full: b.getAttribute('data-full'), caption: b.getAttribute('data-caption') || '' }; - }); - idx = start; - render(); - lb.classList.add('is-open'); - lb.setAttribute('aria-hidden', 'false'); - document.documentElement.style.overflow = 'hidden'; - } - function close() { - lb.classList.remove('is-open'); - lb.setAttribute('aria-hidden', 'true'); - document.documentElement.style.overflow = ''; - img.setAttribute('src', ''); - } - function step(d) { idx = (idx + d + group.length) % group.length; render(); } - - document.querySelectorAll('.gallery-grid').forEach(function (grid) { - grid.querySelectorAll('.gallery-thumb').forEach(function (btn, i) { - btn.addEventListener('click', function () { open(grid, i); }); - }); - }); - lb.querySelector('.lightbox-close').addEventListener('click', close); - lb.querySelector('.lightbox-prev').addEventListener('click', function () { step(-1); }); - lb.querySelector('.lightbox-next').addEventListener('click', function () { step(1); }); - lb.addEventListener('click', function (e) { if (e.target === lb) close(); }); - document.addEventListener('keydown', function (e) { - if (!lb.classList.contains('is-open')) return; - if (e.key === 'Escape') close(); - else if (e.key === 'ArrowLeft') step(-1); - else if (e.key === 'ArrowRight') step(1); - }); - } - /** * =================================================================== * HUB USE-CASE CAROUSEL (auto-scrolling) @@ -917,6 +863,5 @@ document.addEventListener('DOMContentLoaded', function() { setupLanguageSuggestion(); setupNewsletter(); setupHubCarousel(); - setupGallery(); }); \ No newline at end of file diff --git a/mk/gallery/index.html b/mk/gallery/index.html index a51ebc90..007459db 100644 --- a/mk/gallery/index.html +++ b/mk/gallery/index.html @@ -195,159 +195,128 @@

Моменти од МСОС

Нашите моменти низ годините

-

Поглед наназад кон настаните, дружењата и моментите што ја создаваат заедницата на МСОС. Кликни на албум за да ги разгледаш фотографиите.

+

Поглед наназад кон настаните, дружењата и моментите што ја создаваат заедницата на МСОС. Кликни на албум за да ја отвориш приказната и да ги видиш сите фотографии.

-
- - - - - - - - - - - - -
-
-

Запознај ја студентска Словенија 2024

-

12 фотографииПрочитај ја приказната

-
+ +
+ Запознај ја студентска Словенија 2024 — photo 1 + Запознај ја студентска Словенија 2024 — photo 2 + Запознај ја студентска Словенија 2024 — photo 3+9 +
+
+

Запознај ја студентска Словенија 2024

+

12 фотографииПрочитај ја приказната

+
+
-
- - - - - - - - - - -
-
-

Запознај ја студентска Словенија 2023

-

10 фотографииПрочитај ја приказната

-
+ +
+ Запознај ја студентска Словенија 2023 — photo 1 + Запознај ја студентска Словенија 2023 — photo 2 + Запознај ја студентска Словенија 2023 — photo 3+7 +
+
+

Запознај ја студентска Словенија 2023

+

10 фотографииПрочитај ја приказната

+
+
-
- - - - - - - - - - -
-
-

Хуманитарен турнир во Марибор

-

10 фотографииПрочитај ја приказната

-
+ +
+ Хуманитарен турнир во Марибор — photo 1 + Хуманитарен турнир во Марибор — photo 2 + Хуманитарен турнир во Марибор — photo 3+7 +
+
+

Хуманитарен турнир во Марибор

+

10 фотографииПрочитај ја приказната

+
+
-
- - - - - - - -
-
-

Македонска студентска вечер во Љубљана

-

7 фотографииПрочитај ја приказната

-
+ +
+ Македонска студентска вечер во Љубљана — photo 1 + Македонска студентска вечер во Љубљана — photo 2 + Македонска студентска вечер во Љубљана — photo 3+4 +
+
+

Македонска студентска вечер во Љубљана

+

7 фотографииПрочитај ја приказната

+
+
-
- - - - - - - - - -
-
-

Сликање и вино на зајдисонце

-

9 фотографииПрочитај ја приказната

-
+ +
+ Сликање и вино на зајдисонце — photo 1 + Сликање и вино на зајдисонце — photo 2 + Сликање и вино на зајдисонце — photo 3+6 +
+
+

Сликање и вино на зајдисонце

+

9 фотографииПрочитај ја приказната

+
+
-
- - - - - - - -
-
-

Заедничко гледање ракомет во Словенија

-

7 фотографииПрочитај ја приказната

-
+ +
+ Заедничко гледање ракомет во Словенија — photo 1 + Заедничко гледање ракомет во Словенија — photo 2 + Заедничко гледање ракомет во Словенија — photo 3+4 +
+
+

Заедничко гледање ракомет во Словенија

+

7 фотографииПрочитај ја приказната

+
+
-
- - - - - - - -
-
-

Утринско кафе пред ЦТК

-

7 фотографииПрочитај ја приказната

-
+ +
+ Утринско кафе пред ЦТК — photo 1 + Утринско кафе пред ЦТК — photo 2 + Утринско кафе пред ЦТК — photo 3+4 +
+
+

Утринско кафе пред ЦТК

+

7 фотографииПрочитај ја приказната

+
+
-
- - - -
-
-

Во спомен на Фросина Кулакова

-

3 фотографииПрочитај ја приказната

-
+ +
+ Во спомен на Фросина Кулакова — photo 1 + Во спомен на Фросина Кулакова — photo 2 + Во спомен на Фросина Кулакова — photo 3 +
+
+

Во спомен на Фросина Кулакова

+

3 фотографииПрочитај ја приказната

+
+
-
- - - - -
-
-

Во спомен на жртвите во Кочани

-

4 фотографииПрочитај ја приказната

-
+ +
+ Во спомен на жртвите во Кочани — photo 1 + Во спомен на жртвите во Кочани — photo 2 + Во спомен на жртвите во Кочани — photo 3+1 +
+
+

Во спомен на жртвите во Кочани

+

4 фотографииПрочитај ја приказната

+
+
- diff --git a/si/gallery/index.html b/si/gallery/index.html index 4009efb6..2dc8ad69 100644 --- a/si/gallery/index.html +++ b/si/gallery/index.html @@ -195,159 +195,128 @@

Trenutki MSOS

Naši trenutki skozi leta

-

Pogled nazaj na dogodke, druženja in trenutke, ki gradijo skupnost MSOS. Kliknite album za ogled fotografij.

+

Pogled nazaj na dogodke, druženja in trenutke, ki gradijo skupnost MSOS. Kliknite album, da odprete zgodbo in vidite vse fotografije.

-
- - - - - - - - - - - - -
-
-

Spoznaj študentsko Slovenijo 2024

-

12 fotografijPreberi zgodbo

-
+ +
+ Spoznaj študentsko Slovenijo 2024 — photo 1 + Spoznaj študentsko Slovenijo 2024 — photo 2 + Spoznaj študentsko Slovenijo 2024 — photo 3+9 +
+
+

Spoznaj študentsko Slovenijo 2024

+

12 fotografijPreberi zgodbo

+
+
-
- - - - - - - - - - -
-
-

Spoznaj študentsko Slovenijo 2023

-

10 fotografijPreberi zgodbo

-
+ +
+ Spoznaj študentsko Slovenijo 2023 — photo 1 + Spoznaj študentsko Slovenijo 2023 — photo 2 + Spoznaj študentsko Slovenijo 2023 — photo 3+7 +
+
+

Spoznaj študentsko Slovenijo 2023

+

10 fotografijPreberi zgodbo

+
+
-
- - - - - - - - - - -
-
-

Humanitarni turnir v Mariboru

-

10 fotografijPreberi zgodbo

-
+ +
+ Humanitarni turnir v Mariboru — photo 1 + Humanitarni turnir v Mariboru — photo 2 + Humanitarni turnir v Mariboru — photo 3+7 +
+
+

Humanitarni turnir v Mariboru

+

10 fotografijPreberi zgodbo

+
+
-
- - - - - - - -
-
-

Makedonski študentski večer v Ljubljani

-

7 fotografijPreberi zgodbo

-
+ +
+ Makedonski študentski večer v Ljubljani — photo 1 + Makedonski študentski večer v Ljubljani — photo 2 + Makedonski študentski večer v Ljubljani — photo 3+4 +
+
+

Makedonski študentski večer v Ljubljani

+

7 fotografijPreberi zgodbo

+
+
-
- - - - - - - - - -
-
-

Slikanje in vino ob sončnem zahodu

-

9 fotografijPreberi zgodbo

-
+ +
+ Slikanje in vino ob sončnem zahodu — photo 1 + Slikanje in vino ob sončnem zahodu — photo 2 + Slikanje in vino ob sončnem zahodu — photo 3+6 +
+
+

Slikanje in vino ob sončnem zahodu

+

9 fotografijPreberi zgodbo

+
+
-
- - - - - - - -
-
-

Skupno gledanje rokometa v Sloveniji

-

7 fotografijPreberi zgodbo

-
+ +
+ Skupno gledanje rokometa v Sloveniji — photo 1 + Skupno gledanje rokometa v Sloveniji — photo 2 + Skupno gledanje rokometa v Sloveniji — photo 3+4 +
+
+

Skupno gledanje rokometa v Sloveniji

+

7 fotografijPreberi zgodbo

+
+
-
- - - - - - - -
-
-

Jutranja kava pred CTK

-

7 fotografijPreberi zgodbo

-
+ +
+ Jutranja kava pred CTK — photo 1 + Jutranja kava pred CTK — photo 2 + Jutranja kava pred CTK — photo 3+4 +
+
+

Jutranja kava pred CTK

+

7 fotografijPreberi zgodbo

+
+
-
- - - -
-
-

V spomin na Frosino Kulakovo

-

3 fotografijPreberi zgodbo

-
+ +
+ V spomin na Frosino Kulakovo — photo 1 + V spomin na Frosino Kulakovo — photo 2 + V spomin na Frosino Kulakovo — photo 3 +
+
+

V spomin na Frosino Kulakovo

+

3 fotografijPreberi zgodbo

+
+
-
- - - - -
-
-

V spomin na žrtve v Kočanih

-

4 fotografijPreberi zgodbo

-
+ +
+ V spomin na žrtve v Kočanih — photo 1 + V spomin na žrtve v Kočanih — photo 2 + V spomin na žrtve v Kočanih — photo 3+1 +
+
+

V spomin na žrtve v Kočanih

+

4 fotografijPreberi zgodbo

+
+
-