memori

commit a1fc6caeebb144e572b786c73c4f2b0bbc42e3aa
parent 9daf3daeef4146b51e2056954ceb9f9c8f07050c
Author: Hunter
Date:   Mon, 17 Nov 2025 00:19:59 -0500

accommodate both A4 and Letter paper sizes

Diffstat:
M
script.js
 | 
5
+++--
M
style.css
 | 
66
+++++++++++++++++++++++++++++++++---------------------------------

2 files changed, 36 insertions(+), 35 deletions(-)
diff --git a/script.js b/script.js
@@ -1,5 +1,6 @@
-const GRID_COLS = 50;
+const GRID_COLS = 49;
 const GRID_ROWS = 66;
+const CELL_SIZE_MM = 4; // Physical size of each cell when printed
 
 const grid = document.getElementById('grid');
 const page = document.querySelector('.page');
@@ -961,7 +962,7 @@ window.addEventListener('resize', () => {
 });
 
 // Adjust image scales for print and restore after
-const PRINT_CELL_SIZE_PX = 4 * 96 / 25.4; // 4mm in pixels at 96 DPI
+const PRINT_CELL_SIZE_PX = CELL_SIZE_MM * 96 / 25.4; // Cell size in pixels at 96 DPI
 
 window.addEventListener('beforeprint', () => {
 	images.forEach(img => {
diff --git a/style.css b/style.css
@@ -42,15 +42,14 @@
 	--horizon: #85c0f5;
 	--lagoon: #2196f3;
 
-	/* Grid configuration */
-	--grid-cols: 50;
+	--grid-cols: 49;
 	--grid-rows: 66;
-	--cell-size-mm: 4mm; /* Cell size for print */
+	--cell-size-mm: 4mm;
 
-	/* 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%;
+	/* Screen view: Grid as percentage of page (centered on US Letter simulation) */
+	/* Grid width as percent of Letter: 196/215.9 = 90.78% */
+	/* Grid height as percent of Letter: 264/279.4 = 94.48% */
+	--grid-width-percent: 90.78%;
 	--grid-height-percent: 94.48%;
 
 	/* Default theme (sea-breeze) */
@@ -166,14 +165,14 @@ body {
 	display: block;
 }
 
-/* Add right border to rightmost column (every 50th cell starting from cell 50) */
-.grid-cell:nth-child(50n) {
+/* Add right border to rightmost column (every 49th cell starting from cell 49) */
+.grid-cell:nth-child(49n) {
 	border-right: 1px dashed var(--grid-line);
 	width: calc(100% + 1px);
 }
 
-/* Add bottom border to bottom row (last 50 cells: 3251-3300) */
-.grid-cell:nth-child(n + 3251) {
+/* Add bottom border to bottom row (last 49 cells: 3185-3234) */
+.grid-cell:nth-child(n + 3185) {
 	border-bottom: 1px dashed var(--grid-line);
 	height: calc(100% + 1px);
 }
@@ -195,13 +194,13 @@ body {
 		border-left-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
 	}
 
-	.grid-cell:nth-child(50n) {
+	.grid-cell:nth-child(49n) {
 		border-right-style: solid;
 		border-right-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
 		width: calc(100% + 1px);
 	}
 
-	.grid-cell:nth-child(n + 3251) {
+	.grid-cell:nth-child(n + 3185) {
 		border-bottom-style: solid;
 		border-bottom-color: color-mix(in srgb, var(--grid-line) 65%, transparent);
 		height: calc(100% + 1px);
@@ -439,38 +438,34 @@ body.dragging * {
 	}
 
 	html, body {
-		position: static !important;
-		width: auto !important;
-		height: auto !important;
+		margin: 0 !important;
+		padding: 0 !important;
+		width: 100% !important;
+		height: 100vh !important;
 		overflow: visible !important;
 	}
 
 	body {
 		background: var(--white);
-		padding: 0;
-		margin: 0;
-		display: block;
-		align-items: initial;
-		justify-content: initial;
+		display: flex !important;
+		align-items: center !important;
+		justify-content: center !important;
 	}
 
 	.page {
-		width: 8.5in !important;
-		max-width: 8.5in !important;
-		height: 11in !important;
+		width: auto !important;
+		height: auto !important;
+		max-width: none !important;
 		box-shadow: none;
 		margin: 0;
 		padding: 0;
 		background: var(--white);
-		display: flex !important;
-		align-items: center !important;
-		justify-content: center !important;
+		display: block !important;
 	}
 
 	.grid {
-		/* Use fixed dimensions for print: 50 cells * 4mm = 200mm, 66 cells * 4mm = 264mm */
-		width: 200mm !important;
-		height: 264mm !important;
+		width: calc(var(--grid-cols) * var(--cell-size-mm)) !important;
+		height: calc(var(--grid-rows) * var(--cell-size-mm)) !important;
 		display: grid;
 		grid-template-columns: repeat(var(--grid-cols), 1fr) !important;
 		grid-template-rows: repeat(var(--grid-rows), 1fr) !important;
@@ -488,16 +483,22 @@ body.dragging * {
 		padding: 0 !important;
 	}
 
-	.grid-cell:nth-child(50n) {
+	.grid-cell:nth-child(49n) {
 		border-right: 1px dashed var(--default-grid) !important;
 		width: calc(100% + 1px) !important;
 	}
 
-	.grid-cell:nth-child(n + 3251) {
+	.grid-cell:nth-child(n + 3185) {
 		border-bottom: 1px dashed var(--default-grid) !important;
 		height: calc(100% + 1px) !important;
 	}
 
+	/* Remove bottom border from cell above bottom-right corner to prevent artifact */
+	.grid-cell:nth-child(3185) {
+		border-bottom: none !important;
+		height: 100% !important;
+	}
+
 	.image-container {
 		outline: none !important;
 		position: absolute !important;
@@ -545,7 +546,6 @@ body.dragging * {
 }
 
 @page {
-	size: 8.5in 11in;
 	margin: 0;
 }