Skip to content

E
experiments
Commit 2429ca8b authored by julien's avatar julien
Browse files
Options

experimenting with spread and outer+inner margins for the bleeds

parent 2852de91
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 391 additions and 147 deletions
bleeds/css/bleeds.css
View file @ 2429ca8b
This diff is collapsed.
bleeds/css/interface.css
View file @ 2429ca8b
:root {
/* color for the interface */
--color-background: white;
--color-marginBox: red;
--color-pageBox: transparent;
--color-paper: white;
--color-baseline: cyan;
--margin-interface: 300px;
/* list variables */
--font-size: 12px;
--font-lineHeight: 16px;
/* test bleed */
/* --bleed: 0in; */
/* color for the interface */
--color-background: white;
--color-marginBox: red;
/* --color-pageBox: grey; */
--color-paper: white;
--color-baseline: cyan;
--margin-interface: 20px;
/* list variables */
--font-size: 12px;
--font-lineHeight: 16px;
/* test bleed */
/* --bleed: 0in; */
}
@media print {
--color-marginBox: transparent;
--color-marginBox: transparent;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: var(--maring-interface);
}
.pagedjs_first_page {
margin-left: var(--width);
}
/* show the margin-box */
.pagedjs_margin-content
{
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* uncomment for recto/verso book.
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
max-width: calc((var(--width) + var(--trim-inner) + var(--trim-outer) + var(--bleed-inner) + var(--bleed-outer)) * 2 + 20px);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
margin-bottom: 2em;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: var(--margin-interface);
}
.pagedjs_first_page {
margin-left: calc((var(--width) + var(--trim-inner) + var(--trim-outer) + var(--bleed-inner) + var(--bleed-outer)));
}
.pagedjs_page {
width: calc(var(--width) + var(--bleed-inner) + var(--bleed-outer) + var(--trim-inner) + var(--trim-outer));
height: calc(var(--height) + var(--bleed-top) + var(--bleed-bottom) + var(--trim-top) + var(--trim-bottom));
}
/* show the margin-box */
.pagedjs_margin-content {
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* for recto/verso book.
--------------------------------------------------- */
.pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
/*comment this for recto/verso */
.pagedjs_pages {
--bleed-inner: 0px;
--trim-inner: 0px;
--trim-outer: 0px;
--trim-top: 0px;
--trim-bottom: 0px;
}
.paged-marks-cross {
display: none;
}
/* uncomment this */
/* .pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}*/
}
/* to see margins */
.pagedjs_margin-top-left-corner-holder,
.pagedjs_margin-top-right-corner-holder,
.pagedjs_margin-bottom-left-corner-holder,
.pagedjs_margin-bottom-right-corner-holder,
.pagedjs_margin-bottom,
.pagedjs_margin-left,
.pagedjs_margin-right,
.pagedjs_margin-top {
background: rgba(0,0,0,0);
.pagedjs_margin-top-left-corner-holder, .pagedjs_margin-top-right-corner-holder, .pagedjs_margin-bottom-left-corner-holder, .pagedjs_margin-bottom-right-corner-holder, .pagedjs_margin-bottom, .pagedjs_margin-left, .pagedjs_margin-right, .pagedjs_margin-top {
background: rgba(0, 0, 0, 0);
}
.pagedjs_page {
background: rgba(0,0,0,0);
.pagedjs_page {
background: rgba(0, 0, 0, 0);
}
.pagedjs_page > .pagedjs_area > .pagedjs_page_content {
background: repeating-linear-gradient(transparent 0, transparent 50%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%);
background: repeating-linear-gradient(transparent 0, transparent 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
background-size: 100% 36px;
}
}
\ No newline at end of file
bleeds/css/main.css
View file @ 2429ca8b
img {
/* fullsize-image */
position: absolute;
top: -94px;
left: -94px;
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);
bottom: calc((var(--bleed-bottom) + var(--margin-bottom)) * -1);
z-index: -1;
width: calc(var(--width) + var(--bleed) + var(--bleed));
height: calc(var(--width) + var(--bleed) + var(--bleed));
object-fit: cover;
opacity: 0.4;
}
\ No newline at end of file
bleeds/static.html
View file @ 2429ca8b
......@@ -6,8 +6,8 @@
<meta lang="en-US">
<!-- <link href="css/bleeds.css" rel="stylesheet"> -->
<link href="css/interface.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/bleeds.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<style>
/* html {
......@@ -128,6 +128,7 @@
<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>
<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,8 +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>
<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>
......@@ -245,7 +245,121 @@
</div>
</div>
</div>
<div class="pagedjs_page pagedjs_right_page pagedjs_named_page pagedjs_cover_page pagedjs_cover_first_page" data-page-number="1">
<div class="paged-marks-crop">
<div class="paged_crop-tlv"></div>
<div class="paged_crop-tlh"></div>
<div class="paged_crop-blv"></div>
<div class="paged_crop-blh"></div>
<div class="paged_crop-trv"></div>
<div class="paged_crop-trh"></div>
<div class="paged_crop-brv"></div>
<div class="paged_crop-brh"></div>
</div>
<div class="paged-marks-cross">
<div class="paged_cross-top">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-bottom">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-left">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
<div class="paged_cross-right">
<!-- <img src="img/Common_Registration_MarkClean.svg" alt=""> -->
</div>
</div>
<div class="pagedjs_margin-top-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-left-corner">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-top">
<div class="pagedjs_margin pagedjs_margin-top-left">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-top-center">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-top-right">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-top-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-top-right-corner">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-right">
<div class="pagedjs_margin pagedjs_margin-right-top">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-right-middle">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-right-bottom">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-left">
<div class="pagedjs_margin pagedjs_margin-left-top">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-left-middle">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-left-bottom">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-bottom-left-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-left-corner">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-bottom">
<div class="pagedjs_margin pagedjs_margin-bottom-left">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-bottom-center">
<div class="pagedjs_margin-content"></div>
</div>
<div class="pagedjs_margin pagedjs_margin-bottom-right">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_margin-bottom-right-corner-holder">
<div class="pagedjs_margin pagedjs_margin-bottom-right-corner">
<div class="pagedjs_margin-content"></div>
</div>
</div>
<div class="pagedjs_area">
<div class="pagedjs_page_content" style="column-width: 250px; column-gap: calc(var(--margin-right) + var(--margin-left));">
<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>
<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>
<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>
<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>
</div>
</div>
</div>
</body>
......
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