accommodate both A4 and Letter paper sizes
Hunter
Monday, November 17th, 2025 at 12:19 AM
-const GRID_COLS = 50;
1 +const GRID_COLS = 49;
2 const GRID_ROWS = 66;
3 +const CELL_SIZE_MM = 4; // Physical size of each cell when printed
4
5 const grid = document.getElementById('grid');
6 const page = document.querySelector('.page');
962 });
963
964 // Adjust image scales for print and restore after
-const PRINT_CELL_SIZE_PX = 4 * 96 / 25.4; // 4mm in pixels at 96 DPI
965 +const PRINT_CELL_SIZE_PX = CELL_SIZE_MM * 96 / 25.4; // Cell size in pixels at 96 DPI
966
967 window.addEventListener('beforeprint', () => {
968 images.forEach(img => {
42 --horizon: #85c0f5;
43 --lagoon: #2196f3;
44
- /* Grid configuration */
- --grid-cols: 50;
45 + --grid-cols: 49;
46 --grid-rows: 66;
- --cell-size-mm: 4mm; /* Cell size for print */
47 + --cell-size-mm: 4mm;
48
- /* Page dimensions: 8.5in = 216mm, 11in = 279.4mm */
- /* Grid dimensions at print: 200mm x 264mm */
- /* Grid as percentage of page: 200/216 = 92.59%, 264/279.4 = 94.48% */
- --grid-width-percent: 92.59%;
49 + /* Screen view: Grid as percentage of page (centered on US Letter simulation) */
50 + /* Grid width as percent of Letter: 196/215.9 = 90.78% */
51 + /* Grid height as percent of Letter: 264/279.4 = 94.48% */
52 + --grid-width-percent: 90.78%;
53 --grid-height-percent: 94.48%;
54
55 /* Default theme (sea-breeze) */
165 display: block;
166 }
167
-/* Add right border to rightmost column (every 50th cell starting from cell 50) */
-.grid-cell:nth-child(50n) {
168 +/* Add right border to rightmost column (every 49th cell starting from cell 49) */
169 +.grid-cell:nth-child(49n) {
170 border-right: 1px dashed var(--grid-line);
171 width: calc(100% + 1px);
172 }
173
-/* Add bottom border to bottom row (last 50 cells: 3251-3300) */
-.grid-cell:nth-child(n + 3251) {
174 +/* Add bottom border to bottom row (last 49 cells: 3185-3234) */
175 +.grid-cell:nth-child(n + 3185) {
176 border-bottom: 1px dashed var(--grid-line);
177 height: calc(100% + 1px);
178 }
194 border-left-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
195 }
196
- .grid-cell:nth-child(50n) {
197 + .grid-cell:nth-child(49n) {
198 border-right-style: solid;
199 border-right-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
200 width: calc(100% + 1px);
201 }
202
- .grid-cell:nth-child(n + 3251) {
203 + .grid-cell:nth-child(n + 3185) {
204 border-bottom-style: solid;
205 border-bottom-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
206 height: calc(100% + 1px);
438 }
439
440 html, body {
- position: static !important;
- width: auto !important;
- height: auto !important;
441 + margin: 0 !important;
442 + padding: 0 !important;
443 + width: 100% !important;
444 + height: 100vh !important;
445 overflow: visible !important;
446 }
447
448 body {
449 background: var(--white);
- padding: 0;
- margin: 0;
- display: block;
- align-items: initial;
- justify-content: initial;
450 + display: flex !important;
451 + align-items: center !important;
452 + justify-content: center !important;
453 }
454
455 .page {
- width: 8.5in !important;
- max-width: 8.5in !important;
- height: 11in !important;
456 + width: auto !important;
457 + height: auto !important;
458 + max-width: none !important;
459 box-shadow: none;
460 margin: 0;
461 padding: 0;
462 background: var(--white);
- display: flex !important;
- align-items: center !important;
- justify-content: center !important;
463 + display: block !important;
464 }
465
466 .grid {
- /* Use fixed dimensions for print: 50 cells * 4mm = 200mm, 66 cells * 4mm = 264mm */
- width: 200mm !important;
- height: 264mm !important;
467 + width: calc(var(--grid-cols) * var(--cell-size-mm)) !important;
468 + height: calc(var(--grid-rows) * var(--cell-size-mm)) !important;
469 display: grid;
470 grid-template-columns: repeat(var(--grid-cols), 1fr) !important;
471 grid-template-rows: repeat(var(--grid-rows), 1fr) !important;
483 padding: 0 !important;
484 }
485
- .grid-cell:nth-child(50n) {
486 + .grid-cell:nth-child(49n) {
487 border-right: 1px dashed var(--default-grid) !important;
488 width: calc(100% + 1px) !important;
489 }
490
- .grid-cell:nth-child(n + 3251) {
491 + .grid-cell:nth-child(n + 3185) {
492 border-bottom: 1px dashed var(--default-grid) !important;
493 height: calc(100% + 1px) !important;
494 }
495
496 + /* Remove bottom border from cell above bottom-right corner to prevent artifact */
497 + .grid-cell:nth-child(3185) {
498 + border-bottom: none !important;
499 + height: 100% !important;
500 + }
501 +
502 .image-container {
503 outline: none !important;
504 position: absolute !important;
546 }
547
548 @page {
- size: 8.5in 11in;
549 margin: 0;
550 }
551