Commit 78e0e321 authored by svilayphiou's avatar svilayphiou

crop marks in javascript/html as the CSS gradients did not print

parent 36101db2
$(function() {
// ________________________________ INIT __________________________________ //
// Creating crop marks
$("#master-page").append("<div class='crops'><div class='crop-top-left'><span class='bleed'></span></div><div class='crop-top-right'><span class='bleed'></span></div><div class='crop-bottom-right'><span class='bleed'></span></div><div class='crop-bottom-left'><span class='bleed'></span></div></div>")
// Cloning the master page
for (i = 1; i < nb_page; i++){
$("#master-page").clone().attr("id","page-"+i).insertBefore($("#master-page"));
......
......@@ -38,49 +38,72 @@
height: @paper-height;
box-sizing: border-box;
/* Crop marks */
padding: @crop;
counter-increment: page-counter;
/* utile ou non? pour éviter qu'un papier soit coupé par le format de la
* page lors de la conversion et l'arrondis des unités */
// To make sure that one paper sheet is not splitted into different pages in the PDF
page-break-inside: avoid;
page-break-after: always;
overflow: hidden;
/* Crop marks */
background-image:
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%),
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%),
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%),
-webkit-linear-gradient(90deg, black 0, black 100%),
-webkit-linear-gradient(0deg, black 0, black 100%)
;
background-size:
@crop-size 1px,
1px @crop-size,
@crop-size 1px,
1px @crop-size,
@crop-size 1px,
1px @crop-size,
@crop-size 1px,
1px @crop-size
;
background-position:
left @crop,
@crop top,
right @crop,
(@paper-width - @crop) top,
right (@paper-height - @crop),
(@paper-width - @crop) bottom,
left (@paper-height - @crop),
@crop bottom
;
background-repeat: no-repeat;
padding: @crop;
position: relative;
.crops {
width: @paper-width;
height: @paper-height;
position: absolute;
top: 0;
left: 0;
div {
border-style: solid;
border-color: black;
border-width: 0;
width: @crop;
height: @crop;
position: absolute;
box-sizing: border-box;
span {
width: @bleed;
height: @bleed;
background-color: white;
position: absolute;
}
}
.crop-top-left {
border-right-width: 1px;
border-bottom-width: 1px;
top: 0;
left: 0;
span { right: -1px; bottom: -1px;}
}
.crop-top-right {
border-left-width: 1px;
border-bottom-width: 1px;
top: 0;
right: 0;
span { left: -1px; bottom: -1px;}
}
.crop-bottom-right {
border-left-width: 1px;
border-top-width: 1px;
right: 0;
bottom: 0;
span { left: -1px; top: -1px;}
}
.crop-bottom-left {
border-right-width: 1px;
border-top-width: 1px;
left: 0;
bottom: 0;
span { right: -1px; top: -1px;}
}
}
}
.page {
width: @page-width;
......
......@@ -32,12 +32,12 @@
.recipient {
-webkit-flow-from: myStory;
-adobe-flow-from: myStory;
flow-from: myStory;
}
#my-story {
-webkit-flow-into: myStory;
-adobe-flow-into: myStory;
flow-into: myStory;
}
/* __________________________________ FOOTER __________________________________ */
.footer {
......
......@@ -26,6 +26,12 @@
</div>
</div>
<div id="stories">
<article id="my-story"></article>
</div>
<div id="interface">
<button id="preview" class="button">Preview</button>
<button id="debug" class="button">Debug</button>
......@@ -52,9 +58,6 @@
</div>
</div>
<div id="stories">
<article id="my-story"></article>
</div>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="/assets/lib/less-1.3.0.min.js"></script>
......
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