Commit cc2a93f2 authored by julien's avatar julien

added calculation for the @page

parent c7297edb
......@@ -9,7 +9,7 @@
--page-count: 0;
/* bleed and cropmarks */
/* amount of bleed */
--bleed: 1mm;
--bleed: 5mm;
/* cropmark style */
--cropmark-color: black;
/* space between page and cropmarks */
......@@ -21,10 +21,13 @@
}
/* correct calculation for the @page */
/* @page width = width + bleed + bledd + trim + trim */
/* @page height = height + bleed + bledd + trim + trim */
@page {
size: 100mm 140mm;
size: 140mm 180mm;
/* margin: 0; */
}
......
......@@ -14,7 +14,7 @@
/* test bleed */
--bleed: 0in;
/* --bleed: 0in; */
}
@media print {
......@@ -87,11 +87,11 @@
.pagedjs_margin-left,
.pagedjs_margin-right,
.pagedjs_margin-top {
background: rgba(0,0,0,0.2);
background: rgba(0,0,0,0);
}
.pagedjs_page {
background: rgba(0,0,0,0.2);
background: rgba(0,0,0,0);
}
.pagedjs_page > .pagedjs_area > .pagedjs_page_content {
......
/*
@page {
size: 150mm 210mm;
margin: 2cm 1.8cm 4cm 3cm;
}
.page {
--bleed: 6mm;
} */
/* :root {
--bleed: 6pt;
} */
/*
section {
break-before: page;
font-size: 10px;
}
.cover {
page: cover;
}
@page cover {
background: lightskyblue;
} */
.pagedjs_page {
/* background: red; */
img {
position: absolute;
top: -94px;
left: -94px;
z-index: -1;
width: calc(var(--width) + var(--bleed) + var(--bleed));
height: calc(var(--width) + var(--bleed) + var(--bleed));
opacity: 0.4;
}
\ No newline at end of file
......@@ -10,7 +10,7 @@
<link href="css/bleeds.css" rel="stylesheet">
<style>
html {
/* html {
font-size: 12px;
line-height: 16px;
}
......@@ -18,7 +18,7 @@
margin-top: 4px;
line-height: 18px;
}
} */
</style>
</head>
......@@ -126,6 +126,7 @@
<div>
<section class="cover" data-ref="778455a4-a98e-4217-9dcf-42ae62bf06af" data-break-before="page" data-page="cover">
<img src="https://source.unsplash.com/random" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
......@@ -136,6 +137,7 @@
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus quos, quam dolorem quo quia dignissimos ratione? Labore, autem minima quam libero vel</p>
</section>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment