Commit 81622258 authored by julien's avatar julien
Browse files

ready for implementation from the css part

parent 2429ca8b
:root {
--width: 100mm;
/* --height: 168mm; */
--height: 140mm;
--margin-top: 2cm;
--margin-right: 2cm;
--margin-bottom: 2cm;
--margin-left: 2cm;
/* if we want to have inner and outer margin instead of margin-left / margin-right:
margin right on the right page is margin outer, margin left on the right page is margin inner
margin left on the left page is margin outer, margin right on the left page is margin inner */
--margin-inner: 2cm;
--margin-outer: 2cm;
--page-count: 0;
/* bleed and cropmarks */
/* amount of bleed */
--bleed-outer: 5mm;
--bleed-top: 5mm;
--bleed-bottom: 5mm;
--bleed-inner: 5mm;
/* cropmark style */
--cropmark-color: black;
/* space between page and cropmarks */
--offset: 2.11mm;
/* cropmarks lengh */
--crop-length: 4mm;
......@@ -31,17 +38,13 @@
--trim-outer: 15mm;
--trim-top: 15mm;
--trim-bottom: 15mm;
}
/* if we want to have inner and outer margin */
--margin-inner: 2cm;
--margin-outer: 2cm;
}
/* correct calculation for the @page */
/* correct calculation for the @page */
/* @page width = width + bleed-inner + bleed-outer + trim-inner + trim-outter */
/* @page height = height + bleed-top + bleed-bottom + trim-top + trim-bottom */
/* @page width = width + bleed-inner + bleed-outer + trim-inner + trim-outter */
/* @page height = height + bleed-top + bleed-bottom + trim-top + trim-bottom */
@page {
size: 140mm 180mm;
......@@ -59,18 +62,14 @@
.pagedjs_right_page {
overflow: hidden;
grid-template-columns: [trim-left] var(--trim-inner) [bleed-left] var(--bleed-inner) [left] var(--margin-inner) [center] calc(var(--width) - var(--margin-inner) - var(--margin-outer)) [right] var(--margin-outer) [bleed-right] var(--bleed-outer) [trim-right] var(--trim-outer);
grid-template-rows: [trim-top] var(--trim-top) [bleed-top] var(--bleed-top) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed-bottom) [trim-bottom] var(--trim-bottom);
grid-template-columns: [trim-left] var(--trim-inner) [bleed-left] var(--bleed-inner) [left] var(--margin-inner) [center] calc(var(--width) - var(--margin-inner) - var(--margin-outer)) [right] var(--margin-outer) [bleed-right] var(--bleed-outer) [trim-right] var(--trim-outer);
grid-template-rows: [trim-top] var(--trim-top) [bleed-top] var(--bleed-top) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed-bottom) [trim-bottom] var(--trim-bottom);
}
.pagedjs_left_page {
overflow: hidden;
grid-template-columns: [trim-left] var(--trim-outer) [bleed-left] var(--bleed-outer) [left] var(--margin-outer) [center] calc(var(--width) - var(--margin-outer) - var(--margin-inner)) [right] var(--margin-inner) [bleed-right] var(--bleed-inner) [trim-right] var(--trim-inner);
grid-template-rows: [trim-top] var(--trim-top) [bleed-top] var(--bleed-top) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed-bottom) [trim-bottom] var(--trim-bottom);
grid-template-columns: [trim-left] var(--trim-outer) [bleed-left] var(--bleed-outer) [left] var(--margin-outer) [center] calc(var(--width) - var(--margin-outer) - var(--margin-inner)) [right] var(--margin-inner) [bleed-right] var(--bleed-inner) [trim-right] var(--trim-inner);
grid-template-rows: [trim-top] var(--trim-top) [bleed-top] var(--bleed-top) [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom) [bleed-bottom] var(--bleed-bottom) [trim-bottom] var(--trim-bottom);
}
.pagedjs_page * {
......@@ -78,7 +77,7 @@
}
.pagedjs_margin-top {
width: calc(var(--width) - var(--margin-left) - var(--margin-right));
width: calc(var(--width) - var(--margin-inner) - var(--margin-outer));
height: var(--margin-top);
grid-column: center;
grid-row: header;
......@@ -88,33 +87,112 @@
grid-template-rows: 100%;
}
.pagedjs_margin-top-left-corner-holder {
width: var(--margin-left);
.pagedjs_left_page .pagedjs_margin-top-left-corner-holder {
width: var(--margin-outer);
height: var(--margin-top);
display: flex;
grid-column: left;
grid-row: header;
}
.pagedjs_left_page .pagedjs_margin-top-right-corner-holder {
width: var(--margin-inner);
height: var(--margin-top);
display: flex;
grid-column: right;
grid-row: header;
}
.pagedjs_left_page .pagedjs_margin-top-left-corner {
width: var(--margin-outer);
}
.pagedjs_left_page .pagedjs_margin-top-right-corner {
width: var(--margin-inner);
}
.pagedjs_left_page .pagedjs_margin-right {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-inner);
right: 0;
grid-column: right;
grid-row: page;
display: grid;
grid-template-rows: repeat(3, 33.3333%);
grid-template-columns: 100%;
}
.pagedjs_left_page .pagedjs_margin-bottom {
width: calc(var(--width) - var(--margin-outer) - var(--margin-inner));
height: var(--margin-bottom);
grid-column: center;
grid-row: footer;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100%;
}
.pagedjs_left_page .pagedjs_margin-bottom-left-corner-holder {
width: var(--margin-outer);
height: var(--margin-bottom);
display: flex;
grid-column: left;
grid-row: footer;
}
.pagedjs_left_page .pagedjs_margin-bottom-right-corner-holder {
width: var(--margin-inner);
height: var(--margin-bottom);
display: flex;
grid-column: right;
grid-row: footer;
}
.pagedjs_left_page .pagedjs_margin-bottom-left-corner {
width: var(--margin-outer);
}
.pagedjs_left_page .pagedjs_margin-bottom-right-corner {
width: var(--margin-inner);
}
.pagedjs_left_page .pagedjs_margin-left {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-outer);
grid-column: left;
grid-row: page;
display: grid;
grid-template-rows: repeat(3, 33.33333%);
grid-template-columns: 100%;
}
.pagedjs_right_page .pagedjs_margin-top-left-corner-holder {
width: var(--margin-inner);
height: var(--margin-top);
display: flex;
grid-column: left;
grid-row: header;
}
.pagedjs_margin-top-right-corner-holder {
width: var(--margin-right);
.pagedjs_right_page .pagedjs_margin-top-right-corner-holder {
width: var(--margin-outer);
height: var(--margin-top);
display: flex;
grid-column: right;
grid-row: header;
}
.pagedjs_margin-top-left-corner {
width: var(--margin-left);
.pagedjs_right_page .pagedjs_margin-top-left-corner {
width: var(--margin-inner);
}
.pagedjs_margin-top-right-corner {
width: var(--margin-right);
.pagedjs_right_page .pagedjs_margin-top-right-corner {
width: var(--margin-outer);
}
.pagedjs_margin-right {
.pagedjs_right_page .pagedjs_margin-right {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-right);
width: var(--margin-outer);
right: 0;
grid-column: right;
grid-row: page;
......@@ -123,8 +201,8 @@
grid-template-columns: 100%;
}
.pagedjs_margin-bottom {
width: calc(var(--width) - var(--margin-left) - var(--margin-right));
.pagedjs_right_page .pagedjs_margin-bottom {
width: calc(var(--width) - var(--margin-inner) - var(--margin-outer));
height: var(--margin-bottom);
grid-column: center;
grid-row: footer;
......@@ -133,33 +211,33 @@
grid-template-rows: 100%;
}
.pagedjs_margin-bottom-left-corner-holder {
width: var(--margin-left);
.pagedjs_right_page .pagedjs_margin-bottom-left-corner-holder {
width: var(--margin-inner);
height: var(--margin-bottom);
display: flex;
grid-column: left;
grid-row: footer;
}
.pagedjs_margin-bottom-right-corner-holder {
width: var(--margin-right);
.pagedjs_right_page .pagedjs_margin-bottom-right-corner-holder {
width: var(--margin-outer);
height: var(--margin-bottom);
display: flex;
grid-column: right;
grid-row: footer;
}
.pagedjs_margin-bottom-left-corner {
width: var(--margin-left);
.pagedjs_right_page .pagedjs_margin-bottom-left-corner {
width: var(--margin-inner);
}
.pagedjs_margin-bottom-right-corner {
width: var(--margin-right);
.pagedjs_right_page .pagedjs_margin-bottom-right-corner {
width: var(--margin-outer);
}
.pagedjs_margin-left {
.pagedjs_right_page .pagedjs_margin-left {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-left);
width: var(--margin-inner);
grid-column: left;
grid-row: page;
display: grid;
......@@ -341,7 +419,6 @@ img {
body {
margin: 0;
padding: 0;
width: 100% !important;
height: 100% !important;
min-width: 100%;
......@@ -355,7 +432,7 @@ img {
transform: none !important;
height: 100% !important;
min-height: 100%;
max-height: 100%;
max-height: 100%;
overflow: visible;
margin: 0;
padding: 0;
......@@ -364,8 +441,8 @@ img {
margin: 0;
padding: 0;
max-height: 100%;
min-height: 100%;
height: 100% !important;
min-height: 100%;
height: 100% !important;
page-break-after: always;
break-after: page;
}
......@@ -375,50 +452,47 @@ img {
/* crop marks are added to the page content as it wouldn't */
.paged-marks-crop > div {
.paged-marks-crop>div {
/* the offset is the location is the space between the crop mark and the page */
position: absolute;
background: transparent;
content: " ";
border-right: 1px solid var(--cropmark-color);
z-index: 500000000;
}
.pagedjs_right_page .paged_crop-tlv {
.pagedjs_right_page .paged_crop-tlv {
left: calc(var(--bleed-inner) + var(--trim-inner));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
height: var(--crop-length);
width: 1px;
}
.pagedjs_right_page .paged_crop-trv {
.pagedjs_right_page .paged_crop-trv {
right: calc(var(--bleed-outer) + var(--trim-outer));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.pagedjs_right_page .paged_crop-tlh {
left: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
.pagedjs_right_page .paged_crop-tlh {
left: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_right_page .paged_crop-trh {
right: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
.pagedjs_right_page .paged_crop-trh {
right: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_right_page .paged_crop-blv {
.pagedjs_right_page .paged_crop-blv {
left: calc(var(--bleed-inner) + var(--trim-inner));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
......@@ -426,7 +500,7 @@ img {
width: 1px;
}
.pagedjs_right_page .paged_crop-brv {
.pagedjs_right_page .paged_crop-brv {
right: calc(var(--bleed-outer) + var(--trim-outer));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
width: 1px;
......@@ -434,8 +508,7 @@ img {
border-left: 1px solid var(--cropmark-color);
}
.pagedjs_right_page .paged_crop-blh {
.pagedjs_right_page .paged_crop-blh {
left: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
......@@ -443,8 +516,7 @@ img {
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_right_page .paged_crop-brh {
.pagedjs_right_page .paged_crop-brh {
right: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
......@@ -452,15 +524,10 @@ img {
border-bottom: 1px solid var(--cropmark-color);
}
/* crossmark */
/* add the cross mark as background image */
.paged-marks-cross div {
background: url(../img/Common_Registration_MarkClean.svg);
background-repeat: no-repeat;
......@@ -473,74 +540,71 @@ img {
display: block;
z-index: 60000000000000000000;
/* background: black; */
}
/* cross */
.pagedjs_right_page .paged_cross-top {
width: calc( var(--width) + var(--bleed-inner) + var(--bleed-outer) + (var(--trim-inner) + var(--trim-outer)));
height: calc(var(--trim-top) + var(--bleed-top));
left:0;
left: 0;
top: 0;
}
.pagedjs_right_page .paged_cross-bottom {
width: calc( var(--width) + var(--bleed-inner) + var(--bleed-outer) + (var(--trim-inner) + var(--trim-outer)));
height: calc(var(--trim-bottom) + var(--bleed-bottom));
left:0;
left: 0;
bottom: 0;
}
.pagedjs_right_page .paged_cross-left {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
width: calc(var(--trim-outer) + var(--bleed-outer));
left:0;
left: 0;
bottom: 0;
}
.pagedjs_right_page .paged_cross-right {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
right: 0;
width: calc(var(--trim-inner) + var(--bleed-inner));
}
/* leftpage crop marks */
.pagedjs_left_page .paged_crop-tlv {
.pagedjs_left_page .paged_crop-tlv {
left: calc(var(--bleed-outer) + var(--trim-outer));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
height: var(--crop-length);
width: 1px;
}
.pagedjs_left_page .paged_crop-trv {
.pagedjs_left_page .paged_crop-trv {
right: calc(var(--bleed-inner) + var(--trim-inner));
top: calc(var(--bleed-top) + var(--trim-top) - var(--offset) - var(--crop-length));
width: 1px;
height: var(--crop-length);
border-left: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-tlh {
left: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
.pagedjs_left_page .paged_crop-tlh {
left: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-trh {
right: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
.pagedjs_left_page .paged_crop-trh {
right: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
top: calc(var(--bleed-top) + var(--trim-top));
height: 1px;
width: var(--crop-length);
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-blv {
.pagedjs_left_page .paged_crop-blv {
left: calc(var(--bleed-outer) + var(--trim-outer));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
border-right: 1px solid var(--cropmark-color);
......@@ -548,7 +612,7 @@ img {
width: 1px;
}
.pagedjs_left_page .paged_crop-brv {
.pagedjs_left_page .paged_crop-brv {
right: calc(var(--bleed-inner) + var(--trim-inner));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom) - var(--offset) - var(--crop-length));
width: 1px;
......@@ -556,8 +620,7 @@ img {
border-left: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-blh {
.pagedjs_left_page .paged_crop-blh {
left: calc(var(--bleed-outer) + var(--trim-outer) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
......@@ -565,8 +628,7 @@ img {
border-bottom: 1px solid var(--cropmark-color);
}
.pagedjs_left_page .paged_crop-brh {
.pagedjs_left_page .paged_crop-brh {
right: calc(var(--bleed-inner) + var(--trim-inner) - var(--offset) - var(--crop-length));
bottom: calc(var(--bleed-bottom) + var(--trim-bottom));
height: 1px;
......@@ -574,35 +636,31 @@ img {
border-bottom: 1px solid var(--cropmark-color);
}
/* cross */
.pagedjs_left_page .paged_cross-top {
width: calc( var(--width) + var(--bleed-outer) + var(--bleed-inner) + (var(--trim-outer) + var(--trim-inner)));
height: calc(var(--trim-top) + var(--bleed-top));
left:0;
left: 0;
top: 0;
}
.pagedjs_left_page .paged_cross-bottom {
width: calc( var(--width) + var(--bleed-outer) + var(--bleed-inner) + (var(--trim-outer) + var(--trim-inner)));
height: calc(var(--trim-bottom) + var(--bleed-bottom));
left:0;
left: 0;
bottom: 0;
}
.pagedjs_left_page .paged_cross-left {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
width: calc(var(--trim-inner) + var(--bleed-inner));
left:0;
left: 0;
bottom: 0;
}
.pagedjs_left_page .paged_cross-right {
height: calc( var(--height) + var(--bleed-top) + var(--bleed-bottom) + (var(--trim-top) + var(--trim-bottom)));
right: 0;
width: calc(var(--trim-outer) + var(--bleed-outer));
}
}
\ No newline at end of file
img {
img.fullbackground {
/* fullsize-image */
position: absolute;
top: calc((var(--bleed-top) + var(--margin-top)) * -1);
......@@ -10,4 +10,18 @@ img {
z-index: -1;
object-fit: cover;
opacity: 0.4;
}
img.top {
/* top-image */
position: absolute;
top: calc((var(--bleed-top) + var(--margin-top)) * -1);
left: calc((var(--bleed-inner) + var(--margin-inner)) * -1);
right: calc((var(--bleed-outer) + var(--margin-outer)) * -1);
height: 5em;
/* width: 100%; */
z-index: -1;
object-fit: cover;
opacity: 0.4;
}
\ No newline at end of file
......@@ -126,7 +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="">
<img class="top" 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>
......@@ -342,7 +342,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="">
<img class="fullbackground" 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>
......
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