From 98bd46f3171aa83b2fac35db7cc208af9b760e51 Mon Sep 17 00:00:00 2001
From: Ben Doherty <ben@notionparallax.co.uk>
Date: Mon, 5 Jan 2026 17:21:30 +1100
Subject: [PATCH 1/2] add a print style sheet

a simple start at getting the year planner to print properly. Not yet test printed, but looks tolerably good in a pdf
---
 vpprint.css | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 vpprint.htm |  27 +--------
 2 files changed, 158 insertions(+), 26 deletions(-)
 create mode 100644 vpprint.css

diff --git a/vpprint.css b/vpprint.css
new file mode 100644
index 0000000..a8a49df
--- /dev/null
+++ b/vpprint.css
@@ -0,0 +1,157 @@
+/* Print styles for visual-planner */
+
+@media print {
+
+    /* Hide elements that shouldn't print */
+    #vpnavbar,
+    #vpcalbar {
+        display: none !important;
+    }
+
+    /* Expand grid to full page */
+    body {
+        margin: 0;
+        padding: 0;
+    }
+
+    #printgrid {
+        height: 100%;
+        width: 100%;
+    }
+
+    #vpbox {
+        --navbarheight: 0;
+        --calbarheight: 0;
+    }
+
+    #vpscrollbox {
+        overflow: visible !important;
+        height: 100% !important;
+    }
+
+    #vpgrid {
+        width: 100% !important;
+        height: 100% !important;
+    }
+
+    /* Column mode (months as columns) - force full year to fit */
+    #vpgrid:not(.list) {
+        grid-auto-columns: 7.8% !important;
+        /* Slightly less than 100% / 12 to account for gaps */
+        grid-gap: 1px !important;
+        /* Minimize gaps */
+    }
+
+    /* Row/List mode (months as rows) - force full year to fit */
+    #vpgrid.list {
+        grid-auto-rows: 7.5% !important;
+        /* 1/13th accounting for header row and gaps */
+        height: 100% !important;
+        grid-gap: 1px !important;
+        /* Minimize gaps */
+    }
+
+    /* Ensure colors print */
+    * {
+        -webkit-print-color-adjust: exact !important;
+        print-color-adjust: exact !important;
+        color-adjust: exact !important;
+    }
+
+    /* Prevent page breaks - keep everything on one page */
+    * {
+        break-inside: avoid !important;
+        page-break-inside: avoid !important;
+    }
+
+    /* Scale font size appropriately for printing */
+    #vpgrid {
+        font-size: 9pt !important;
+    }
+
+    /* Reduce padding and margins for compact printing */
+    .vpday {
+        padding: 0.5px !important;
+        overflow: hidden !important;
+        /* Hide overflow events */
+        background-color: hsl(0, 0%, 90%);
+        border-top: 0.3mm solid black;
+        border-right: 0.15mm solid black;
+    }
+
+    .vpnum {
+        margin: 0.05em !important;
+        padding: 0.1em !important;
+        font-size: 8pt !important;
+    }
+
+    .vplabel {
+        margin: 0.5px !important;
+        padding: 0.05em 0.1em !important;
+        font-size: 7pt !important;
+        /* Smaller event text */
+        line-height: 0.9 !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        /* Truncate long event names */
+    }
+
+    span[ng-if*="location"] {
+        display: none !important;
+    }
+
+    .vphdr {
+        padding: 0.2em !important;
+        font-size: 9pt !important;
+        font-weight: bold !important;
+    }
+
+    /* Limit event label container height */
+    .vpdaylabels {
+        max-height: 100% !important;
+        overflow: hidden !important;
+    }
+}
+
+/* Page size definitions for different paper sizes */
+
+/* A4 Landscape (297mm x 210mm) */
+@media print {
+    @page {
+        size: A4 landscape;
+        margin: 10mm;
+    }
+}
+
+/* A3 Landscape (420mm x 297mm) */
+@media print and (min-width: 400mm) {
+    @page {
+        size: A3 landscape;
+        margin: 15mm;
+    }
+}
+
+/* A2 Landscape (594mm x 420mm) */
+@media print and (min-width: 550mm) {
+    @page {
+        size: 594mm 420mm;
+        margin: 20mm;
+    }
+}
+
+/* A1 Landscape (841mm x 594mm) */
+@media print and (min-width: 800mm) {
+    @page {
+        size: 841mm 594mm;
+        margin: 25mm;
+    }
+}
+
+/* A0 Landscape (1189mm x 841mm) */
+@media print and (min-width: 1100mm) {
+    @page {
+        size: 1189mm 841mm;
+        margin: 30mm;
+    }
+}
\ No newline at end of file
diff --git a/vpprint.htm b/vpprint.htm
index 256a2a6..be19dde 100644
--- a/vpprint.htm
+++ b/vpprint.htm
@@ -1,32 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons">
-<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
-<link href="vp.png" rel="icon">
-<style>
-body {
-	font-family: Arial;
-	margin: 0;
-	min-width: 600px;
-	min-height: 400px;
-}
-#printgrid {
-	height: 100vh;
-}
-#vpcalbar.printcalbar {
-	background-color: unset;
-}
-.printcalbar {
-	pointer-events: none;
-}
-.printcalbar .checked {
-	display: none;
-}
-</style>
-<title>Print</title>
+	<link rel="stylesheet" type="text/css" href="vpprint.css">
 </head>
 <body ng-app="vpPrintApp" ng-cloak>
 <vp-print-grid id="printgrid"/>

From 5b44df9051e5af462470ae812c4c82f277d6dca9 Mon Sep 17 00:00:00 2001
From: Ben Doherty <ben@notionparallax.co.uk>
Date: Mon, 5 Jan 2026 17:29:13 +1100
Subject: [PATCH 2/2] replace head content

not sure how it got left out
---
 vpprint.htm | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/vpprint.htm b/vpprint.htm
index be19dde..56c246f 100644
--- a/vpprint.htm
+++ b/vpprint.htm
@@ -1,7 +1,37 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<link rel="stylesheet" type="text/css" href="vpprint.css">
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto|Material+Icons">
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script>
+<link href="vp.png" rel="icon">
+<link rel="stylesheet" type="text/css" href="vpprint.css">
+<style>
+	body {
+		font-family: Arial;
+		margin: 0;
+		min-width: 600px;
+		min-height: 400px;
+	}
+
+	#printgrid {
+		height: 100vh;
+	}
+
+	#vpcalbar.printcalbar {
+		background-color: unset;
+	}
+
+	.printcalbar {
+		pointer-events: none;
+	}
+
+	.printcalbar .checked {
+		display: none;
+	}
+</style>
+<title>Print</title>
 </head>
 <body ng-app="vpPrintApp" ng-cloak>
 <vp-print-grid id="printgrid"/>