From aa2ac699043d0c6c1c1f83f84cd62f2fdf712eab Mon Sep 17 00:00:00 2001 From: Reorx Date: Mon, 6 Feb 2023 00:16:31 +0800 Subject: [PATCH] import print.css --- src/editor/preview.html | 38 -------------------------------------- src/editor/preview.js | 2 ++ src/index.html | 23 ----------------------- src/main.js | 4 +++- src/print.css | 36 ++++++++++++++++++++++++++++++++++++ 5 files changed, 41 insertions(+), 62 deletions(-) create mode 100644 src/print.css diff --git a/src/editor/preview.html b/src/editor/preview.html index 0f70e25..7b6c6b9 100644 --- a/src/editor/preview.html +++ b/src/editor/preview.html @@ -2,44 +2,6 @@ - CV diff --git a/src/editor/preview.js b/src/editor/preview.js index 9e5ec3b..e775652 100644 --- a/src/editor/preview.js +++ b/src/editor/preview.js @@ -1,3 +1,5 @@ +import '../print.css'; + import { getCVData, getCVSavedTime, diff --git a/src/index.html b/src/index.html index 24a4464..6b62885 100644 --- a/src/index.html +++ b/src/index.html @@ -2,29 +2,6 @@ - - - CV diff --git a/src/main.js b/src/main.js index 7b9d81c..3547a7f 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,6 @@ -import * as exampleData from '../data/rxresume-converted.json'; +import './print.css'; + +import * as exampleData from '../data/rxresume-mengxiao.converted.json'; import { applyThemeTo } from './themer'; const elCV = document.querySelector('.cv-container') diff --git a/src/print.css b/src/print.css new file mode 100644 index 0000000..f189819 --- /dev/null +++ b/src/print.css @@ -0,0 +1,36 @@ +/* Page setup works for all themes */ +@page { + /* A4 */ + /* size: 210mm 297mm; */ + size: A4; + margin: 10mm; /* approximately 0.4in */ +} + +html { + margin: 0; + padding: 0; +} +body { + margin: 0; + page-break-inside: auto; + print-color-adjust: exact; + -webkit-print-color-adjust: exact; + + /* simulate print page size */ + padding: 10mm; + width: calc(210mm - 20mm); + border: 1px solid #ccc; + border-left: 0; +} +@media print { + /* remove simulate print page size, let @page decide the size and margin */ + body { + padding: 0; + border: 0; + } +} + +.page-unit { + page-break-inside: avoid; + page-break-after: auto; +}