grid updates
Hunter
Wednesday, October 22nd, 2025 at 6:43 PM
149 line-height: 0;
150 position: relative; /* Image containers are positioned relative to grid */
151 /* Grid is centered within .page by the parent's flexbox */
- /* Bottom and right borders for the entire grid */
- border-bottom: 1px dashed var(--grid-line);
- border-right: 1px dashed var(--grid-line);
152 box-sizing: border-box;
153 }
154
163 display: block;
164 }
165
166 +/* Add right border to rightmost column (every 50th cell starting from cell 50) */
167 +.grid-cell:nth-child(50n) {
168 + border-right: 1px dashed var(--grid-line);
169 + width: calc(100% + 1px);
170 +}
171 +
172 +/* Add bottom border to bottom row (last 50 cells: 3251-3300) */
173 +.grid-cell:nth-child(n + 3251) {
174 + border-bottom: 1px dashed var(--grid-line);
175 + height: calc(100% + 1px);
176 +}
177 +
178 @media (max-width: 680px) {
179 html, body {
- overflow: hidden;
180 + /* overflow: hidden; */
181 height: 100%;
182 position: fixed;
183 width: 100%;
192 box-shadow: none;
193 }
194
- .grid {
- border-bottom-style: solid;
- border-right-style: solid;
- border-bottom-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
- border-right-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
- }
-
195 .grid-cell {
196 border-top-style: solid;
197 border-left-style: solid;
198 border-top-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
199 border-left-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
200 }
201 +
202 + .grid-cell:nth-child(50n) {
203 + border-right-style: solid;
204 + border-right-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
205 + width: calc(100% + 1px);
206 + }
207 +
208 + .grid-cell:nth-child(n + 3251) {
209 + border-bottom-style: solid;
210 + border-bottom-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
211 + height: calc(100% + 1px);
212 + }
213 }
214
215 .image-container {
233 border: 2px solid transparent;
234 transition: border-color 0.2s;
235 z-index: 1;
- overflow: hidden;
236 + /* overflow: hidden; */
237 }
238
239 .image-container .image-wrapper {
471 grid-template-columns: repeat(var(--grid-cols), 1fr) !important;
472 grid-template-rows: repeat(var(--grid-rows), 1fr) !important;
473 position: relative !important;
- border-bottom: 1px dashed var(--default-grid) !important;
- border-right: 1px dashed var(--default-grid) !important;
474 box-sizing: border-box !important;
475 }
476
484 padding: 0 !important;
485 }
486
487 + .grid-cell:nth-child(50n) {
488 + border-right: 1px dashed var(--default-grid) !important;
489 + width: calc(100% + 1px) !important;
490 + }
491 +
492 + .grid-cell:nth-child(n + 3251) {
493 + border-bottom: 1px dashed var(--default-grid) !important;
494 + height: calc(100% + 1px) !important;
495 + }
496 +
497 .image-container {
498 outline: none !important;
499 position: absolute !important;