gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enhance print css

This commit is contained in:
Reorx 2023-02-06 00:08:01 +08:00
parent fd9a90c4f3
commit fd3f92e6b3
5 changed files with 68 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/editor/preview.html
View File

@ -2,9 +2,45 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> /* Page setup works for all the themes */
<title>Document</title> @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;
}
</style>
<title>CV</title>
</head> </head>
<body> <body>
<div class="cv-container"></div> <div class="cv-container"></div>

2
src/editor/styles.scss
View File

@ -49,7 +49,7 @@ body {
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
} }
.right { .right {
background-color: #eee; border-left: 1px solid var(--grey-2);
} }
} }
.editor-container { .editor-container {

18
src/index.html
View File

@ -5,7 +5,25 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
/* Page setup works for all the themes */
@page {
size: 210cm 297cm; /* A4 */
}
body {
padding: 0;
margin: 10mm;
/* margin subtracted */
width: 190cm;
height: 277cm;
page-break-inside: auto;
print-color-adjust: exact;
}
.page-unit {
page-break-inside: avoid;
page-break-after: auto;
}
</style> </style>
<title>CV</title> <title>CV</title>
</head> </head>

10
src/templates/reorx/index.ejs
View File

@ -54,7 +54,7 @@ function dateRange(item, preserveDay) {
<div class="line"></div> <div class="line"></div>
</div> </div>
<% for (const item of cv.education) { %> <% for (const item of cv.education) { %>
<div class="education"> <div class="education page-unit">
<h3><%= item.institution %></h3> <h3><%= item.institution %></h3>
<p><%= item.url %></p> <p><%= item.url %></p>
<p><%= item.area %></p> <p><%= item.area %></p>
@ -73,7 +73,7 @@ function dateRange(item, preserveDay) {
<div class="line"></div> <div class="line"></div>
</div> </div>
<% for (const item of cv.work) { %> <% for (const item of cv.work) { %>
<div class="work"> <div class="work page-unit">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
<p><%= item.url %></p> <p><%= item.url %></p>
<%- dateRange(item) %> <%- dateRange(item) %>
@ -97,7 +97,7 @@ function dateRange(item, preserveDay) {
<div class="line"></div> <div class="line"></div>
</div> </div>
<% for (const item of cv.projects) { %> <% for (const item of cv.projects) { %>
<div class="project"> <div class="project page-unit">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
<p><%= item.url %></p> <p><%= item.url %></p>
<p><%= item.description %></p> <p><%= item.description %></p>
@ -125,7 +125,7 @@ function dateRange(item, preserveDay) {
<div class="line"></div> <div class="line"></div>
</div> </div>
<% for (const item of cv.sideProjects) { %> <% for (const item of cv.sideProjects) { %>
<div class="sideproject"> <div class="sideproject page-unit">
<h3><%= item.name %></h3> <h3><%= item.name %></h3>
<p><%= item.url %></p> <p><%= item.url %></p>
<p><%= item.description %></p> <p><%= item.description %></p>
@ -163,7 +163,7 @@ function dateRange(item, preserveDay) {
<!-- Languages --> <!-- Languages -->
<% if (cv.languages) { %> <% if (cv.languages) { %>
<section> <section class="page-unit">
<div class="section-title"> <div class="section-title">
<h2>Languages</h2> <h2>Languages</h2>
<div class="line"></div> <div class="line"></div>

6
src/templates/reorx/index.scss
View File

@ -5,10 +5,14 @@ $color-text-dim: #777;
font-size: 14px; font-size: 14px;
font-family: system-ui, sans-serif; font-family: system-ui, sans-serif;
a, a:visited, a:hover, a:active { a, a:visited, a:active {
color: $color-signature; color: $color-signature;
text-decoration: none; text-decoration: none;
} }
a:hover {
color: $color-signature;
text-decoration: underline;
}
} }
.basics-section { .basics-section {