/* Cakela gallery. Loads on top of home.css so the header, buttons, footer and lightbox stay identical to the storefront. Everything here is about the two gallery views: the album index and the photos inside one album. Every tile is a square of the same size, so no row ends ragged and no photo is stretched. */ /* Cards, buttons and the lightbox arrows all set `display`, which would beat the browser default for [hidden]; the toggled elements need this to stay hidden. */ [hidden] { display: none !important; } .gallery-page .home-section { padding-top: clamp(26px, 3vw, 38px); padding-bottom: clamp(26px, 3vw, 38px); } .gallery-head { padding-bottom: 0 !important; } .gallery-head h1 { color: var(--brown); font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 700; } .gallery-head .section-title { max-width: 720px; margin-bottom: 16px; } .gallery-head .section-title p:not(.home-kicker) { color: var(--muted); } .gallery-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 10px; } /* 44px cho ngón tay, không chỉ cao bằng dòng chữ. */ .gallery-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--red); font-size: var(--text-sm); font-weight: 800; text-decoration: none; } .gallery-crumbs a:hover { text-decoration: underline; } /* Toolbar: photo count and actions inside one album. */ .gallery-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 18px; } .gallery-status { color: var(--muted); font-size: var(--text-sm); font-weight: 700; } .gallery-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Album index: uniform square cover, name and photo count below the image. Số cột tự tính theo bề ngang thật: 2 ô trên điện thoại, 3 ở máy nhỏ, 4 ở máy tính và 5 khi màn rất rộng - không cần điểm ngắt nào, và không có bề ngang nào cho ra một hàng cụt. min(100%, ...) để ô không bao giờ rộng hơn khung. */ .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(132px, 21vw, 240px)), 1fr)); gap: clamp(12px, 1.4vw, 18px); } .album-card { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .album-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--cream); } /* Ô bìa đang chờ ảnh về thì nhấp nháy nhẹ như Facebook, khung vẫn giữ đúng chỗ. .is-near do gallery.js gắn đúng lúc bắt đầu tải bìa của ô đó, .is-loaded gắn khi ảnh về xong: nhịp nhấp nháy vì vậy chỉ chạy ở mấy ô khách đang nhìn. Trước đây luật chỉ có :not(.is-loaded) mà .is-loaded lại được gắn ngay khi gán src, nên hoá ra chạy đúng 22 animation vô hạn cho những ô còn nằm ngoài màn và không chạy cho ô đang thật sự chờ - ngược hẳn ý định. */ .album-card.is-near:not(.is-loaded) .album-card__media { animation: photo-pulse 1.4s ease-in-out infinite; } .album-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; } /* Ảnh bìa chỉ được gán src khi ô sắp vào khung nhìn. Trong lúc chờ, thẻ chưa có src nên trình duyệt vẽ icon "ảnh vỡ" nhỏ ở góc ô - ẩn thẻ ảnh đi thì ô bìa chỉ còn khung kem nhấp nháy đúng như ý. */ .album-card img:not([src]), .photo-grid img:not([src]) { visibility: hidden; } /* Tắt JS: thẻ chờ không có src nên ẩn đi, ảnh trong