1@use "../theme" as *;
2@use "../vars" as v;
3
4.photo-grid {
5 columns: 2;
6 column-gap: 0.5rem;
7 margin-top: 2rem;
8}
9
10.photo-grid__item {
11 margin: 0 0 0.5rem;
12 break-inside: avoid;
13}
14
15.photo-grid__item a {
16 display: block;
17 cursor: zoom-in;
18}
19
20.photo-preview {
21 padding: 0;
22 margin: 0;
23 width: 100vw;
24 max-width: 100vw;
25 height: 100vh;
26 height: 100dvh;
27 max-height: 100vh;
28 max-height: 100dvh;
29 background: transparent;
30 border: none;
31 position: relative;
32 cursor: default;
33 &[open] { display: flex; align-items: center; justify-content: center; }
34 &::backdrop {
35 background: color-mix(in srgb, theme(bg) 80%, transparent);
36 @include blur-surface(4px);
37 }
38}
39
40// Block background scrolling while the preview is open.
41html:has(.photo-preview[open]) {
42 overflow: hidden;
43}
44
45.photo-preview__close {
46 position: absolute;
47 top: 0.75rem;
48 right: 0.75rem;
49 z-index: 1;
50 display: flex;
51 background: none;
52 border: none;
53 color: theme(subtle);
54 cursor: pointer;
55 font-family: "Silkscreen", monospace;
56 font-size: 0.7rem;
57 letter-spacing: 0.05em;
58 transition: color 0.15s ease;
59 &:hover { color: theme(text); }
60}
61
62.photo-preview__stage {
63 position: relative;
64 display: flex;
65 max-width: calc(100vw - 4rem);
66 max-height: 90dvh;
67}
68
69.photo-preview__img {
70 max-width: calc(100vw - 4rem);
71 max-height: 90dvh;
72 object-fit: contain;
73 display: block;
74 border-radius: 0.25rem;
75 cursor: pointer;
76}
77
78// Hint text differs by input capability.
79.photo-preview__hint {
80 position: absolute;
81 bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem);
82 left: 50%;
83 transform: translateX(-50%);
84 font-family: "Silkscreen", monospace;
85 font-size: 0.7rem;
86 letter-spacing: 0.05em;
87 color: theme(subtle);
88 white-space: nowrap;
89 pointer-events: none;
90 &::before { content: "scroll or click to navigate"; }
91 @media (hover: none) {
92 &::before { content: "swipe or tap to navigate"; }
93 }
94}
95
96.photo-grid__item img {
97 width: 100%;
98 height: auto;
99 display: block;
100 border-radius: 0.25rem;
101 transition: opacity 0.15s ease;
102}
103
104.photo-grid__item a:hover img { opacity: 0.9; }
105
106@media (max-width: v.mq(xs)) {
107 .photo-grid { columns: 1; }
108}
109
110@media (max-width: v.mq(md)) {
111 .photo-preview__stage,
112 .photo-preview__img { max-width: calc(100vw - 2rem); }
113}