added assets from html2print
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
$(function() {
|
||||||
|
|
||||||
|
// Cloning the master page
|
||||||
|
for (i = 1; i < nb_page; i++){
|
||||||
|
$("#master-page").clone().attr("id","page-"+i).insertBefore($("#master-page"));
|
||||||
|
}
|
||||||
|
$("#master-page").attr("data-width", $(".paper:first-child").width()).hide();
|
||||||
|
|
||||||
|
});
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
jQuery(document).ready(function($) {
|
||||||
|
|
||||||
|
console.log("Hello Les notices");
|
||||||
|
|
||||||
|
// $('.story-page').each(function(index, el) {
|
||||||
|
// $figures = $('figure', this);
|
||||||
|
// $(this).addClass("figures-"+$figures.length);
|
||||||
|
// });
|
||||||
|
|
||||||
|
$('.story-page-2 h2, .story-page:not(.story-page-0):not(.story-page-1):not(.story-page-2) h1').each(function(index, el) {
|
||||||
|
// console.log("item to typotize",$(this).text());
|
||||||
|
var chars = $(this).text().split("");
|
||||||
|
// console.log("chars", chars);
|
||||||
|
var typotized = "";
|
||||||
|
var k = 0;
|
||||||
|
for (var j = 0; j < chars.length; j++) {
|
||||||
|
// console.log('node '+j+" modulo : "+(j % 6),chars[j]);
|
||||||
|
if(! /\s/.test(chars[j]) ){
|
||||||
|
k++;
|
||||||
|
if ( k % 12 == 0){
|
||||||
|
typotized += '<span class="typo-4">'+chars[j]+'</span>';
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if ( k % 9 == 0){
|
||||||
|
typotized += '<span class="typo-3">'+chars[j]+'</span>';
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if ( k % 6 == 0){
|
||||||
|
typotized += '<span class="typo-2">'+chars[j]+'</span>';
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
if ( k % 3 == 0){
|
||||||
|
typotized += '<span class="typo-1">'+chars[j]+'</span>';
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
typotized += chars[j];
|
||||||
|
}
|
||||||
|
$(this).html(typotized);
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
// Detect if a flow element is in odd or even paper
|
||||||
|
|
||||||
|
// var flow = document.webkitGetFlowByName('flow-main');
|
||||||
|
// var flow = NamedFlowMap;//();//getFlowByName("flow-main");
|
||||||
|
// console.log('flow', window);
|
||||||
|
var namedFlow = document.webkitGetNamedFlows()["flow-main"];
|
||||||
|
console.log(namedFlow);
|
||||||
|
// var regions = namedFlow.getRegions();
|
||||||
|
// var content = namedFlow.getContent();
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
var region, paper, paperid;
|
||||||
|
$(".story-page>h1,.story-page>figure", "#flow-main").each(function(index, el) {
|
||||||
|
region = namedFlow.getRegionsByContent(this);
|
||||||
|
// paper = $(region).parents('.paper');
|
||||||
|
paperid = $(region).parents('.paper').attr('id').match(/page-(\d+)/)[1];
|
||||||
|
// console.log(paperid);
|
||||||
|
if(paperid % 2 == 0){
|
||||||
|
$(this).addClass('paper-odd')
|
||||||
|
}else{
|
||||||
|
$(this).addClass('paper-even')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
*/
|
||||||
|
});
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
nb_page = 100;
|
||||||
+6
File diff suppressed because one or more lines are too long
Vendored
+5
File diff suppressed because one or more lines are too long
@@ -0,0 +1,14 @@
|
|||||||
|
/**
|
||||||
|
* DEBUG STYLES
|
||||||
|
*/
|
||||||
|
|
||||||
|
.debug .header { outline: 1px solid pink; }
|
||||||
|
.debug .body { outline: 1px solid purple; }
|
||||||
|
.debug .footer { outline: 1px solid pink; }
|
||||||
|
|
||||||
|
.debug .region-break {
|
||||||
|
border-top: 1px dashed blue;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debug img { outline: 1px solid blue; }
|
||||||
@@ -0,0 +1,169 @@
|
|||||||
|
$body-width: $page-width - $page-margin-inside - $page-margin-outside;
|
||||||
|
$body-height: $page-height - $page-margin-top - $page-margin-bottom;
|
||||||
|
|
||||||
|
$col-width: ($body-width - (($col-number - 1) * $col-gutter)) / $col-number;
|
||||||
|
$row-height: ($body-height - (($row-number - 1) * $row-gutter)) / $row-number;
|
||||||
|
|
||||||
|
$col-gutter-width: $col-width + $col-gutter;
|
||||||
|
$row-gutter-height: $row-height + $row-gutter;
|
||||||
|
|
||||||
|
|
||||||
|
/* x classes */
|
||||||
|
// .create-x-classes($i:0) when($i < $col-number) {
|
||||||
|
// .x#{i}{
|
||||||
|
// left: ($i * $col-width) + ($i * $col-gutter);
|
||||||
|
// }
|
||||||
|
// .create-x-classes($i + 1);
|
||||||
|
// }
|
||||||
|
// .create-x-classes();
|
||||||
|
@for $i from 0 through $col-number - 1{
|
||||||
|
.x#{$i}{
|
||||||
|
left: ($i * $col-width) + ($i * $col-gutter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* y classes */
|
||||||
|
// .create-y-classes($i:0) when($i < $row-number) {
|
||||||
|
// .y#{i}{
|
||||||
|
// top: ($i * $row-height) + ($i * $row-gutter);
|
||||||
|
// }
|
||||||
|
// .create-y-classes($i + 1);
|
||||||
|
// }
|
||||||
|
// .create-y-classes();
|
||||||
|
@for $i from 0 through $row-number - 1 {
|
||||||
|
.y#{$i}{
|
||||||
|
top: ($i * $row-height) + ($i * $row-gutter);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* width classes */
|
||||||
|
// .create-w-classes($i:1) when($i <= $col-number) {
|
||||||
|
// .w#{i}{
|
||||||
|
// width: ($col-width * $i) + ($col-gutter * ($i - 1));
|
||||||
|
// }
|
||||||
|
// .create-w-classes($i + 1);
|
||||||
|
// }
|
||||||
|
// .create-w-classes();
|
||||||
|
@for $i from 1 through $col-number {
|
||||||
|
.w#{$i}{
|
||||||
|
width: ($col-width * $i) + ($col-gutter * ($i - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* height classes */
|
||||||
|
// .create-h-classes($i:1) when($i <= $row-number) {
|
||||||
|
// .h#{i}{
|
||||||
|
// height: ($row-height * $i) + ($row-gutter * ($i - 1));
|
||||||
|
// }
|
||||||
|
// .create-h-classes($i + 1);
|
||||||
|
// }
|
||||||
|
// .create-h-classes();
|
||||||
|
@for $i from 1 through $row-number {
|
||||||
|
.h#{$i}{
|
||||||
|
height: ($row-height * $i) + ($row-gutter * ($i - 1));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// .create-grid-classes($prop: left, $class-name: x, $max-size: 100, $i: 0, $offset: 0, $odd: true) when ($offset <= $max-size) {
|
||||||
|
// .#{class-name}#{i} {
|
||||||
|
// #{prop}: $offset;
|
||||||
|
// };
|
||||||
|
//
|
||||||
|
// & when ($odd) {
|
||||||
|
// .create-grid-classes($prop, $class-name, $max-size, $i + 1, $offset + $col-width, false)
|
||||||
|
// };
|
||||||
|
//
|
||||||
|
// & when not ($odd) {
|
||||||
|
// .create-grid-classes($prop, $class-name, $max-size, $i + 1, $offset + $col-gutter, true)
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
@mixin create-grid-classes($prop: left, $class-name: x, $max-size: 100, $i: 0, $offset: 0, $odd: true){
|
||||||
|
$i:0;
|
||||||
|
|
||||||
|
.#{$class-name}#{$i} {
|
||||||
|
#{$prop}: $offset;
|
||||||
|
};
|
||||||
|
|
||||||
|
@while $offset<=$max-size {
|
||||||
|
$i: $i+1;
|
||||||
|
@if $odd{
|
||||||
|
$offset:$offset+$col-width;
|
||||||
|
$odd:false;
|
||||||
|
}@else{
|
||||||
|
$offset:$offset+$col-gutter;
|
||||||
|
$odd:true;
|
||||||
|
}
|
||||||
|
.#{$class-name}#{$i} {
|
||||||
|
#{$prop}: $offset;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
html:not(.facing) .paper:nth-child(odd) .l-1,
|
||||||
|
html.facing .paper:nth-child(even) .l-1 { left: -( $page-margin-inside + 14pt); }
|
||||||
|
|
||||||
|
html:not(.facing) .paper:nth-child(even) .l-1,
|
||||||
|
html.facing .paper:nth-child(odd) .l-1 { left: -( $page-margin-outside + 14pt); }
|
||||||
|
|
||||||
|
// .create-grid-classes(left, l, $body-width);
|
||||||
|
@include create-grid-classes(left, l, $body-width);
|
||||||
|
|
||||||
|
html:not(.facing) .paper:nth-child(odd) .r-1,
|
||||||
|
html.facing .paper:nth-child(even) .r-1 { right: -( $page-margin-outside + 14pt); }
|
||||||
|
|
||||||
|
html:not(.facing) .paper:nth-child(even) .r-1,
|
||||||
|
html.facing .paper:nth-child(odd) .r-1 { right: -( $page-margin-inside + 14pt); }
|
||||||
|
|
||||||
|
// .create-grid-classes(right, r, $body-width);
|
||||||
|
@include create-grid-classes(right, r, $body-width);
|
||||||
|
|
||||||
|
.t-1 { top: -( $page-margin-top + 14pt); }
|
||||||
|
// .create-grid-classes(top, t, $body-height);
|
||||||
|
@include create-grid-classes(top, t, $body-height);
|
||||||
|
|
||||||
|
.b-1 { bottom: -( $page-margin-bottom + 14pt); }
|
||||||
|
// .create-grid-classes(bottom, b, $body-height);
|
||||||
|
@include create-grid-classes(bottom, b, $body-height);
|
||||||
|
|
||||||
|
|
||||||
|
.grid .body {
|
||||||
|
outline: 1px solid $grid-color;
|
||||||
|
background-attachment: local;
|
||||||
|
background-size: 100% $row-gutter-height,
|
||||||
|
$col-gutter-width 100%,
|
||||||
|
100% $row-gutter-height,
|
||||||
|
$col-gutter-width 100%,
|
||||||
|
100% 12pt;
|
||||||
|
background-position: -1px -1px,
|
||||||
|
-1px -1px,
|
||||||
|
-($col-gutter + 0) -($row-gutter + 0),
|
||||||
|
-($col-gutter + 0) -($row-gutter + 0),
|
||||||
|
0 -1px;
|
||||||
|
background-image: -webkit-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-webkit-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-webkit-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-webkit-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-webkit-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
|
||||||
|
background-image: -moz-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-moz-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-moz-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-moz-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-moz-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
|
||||||
|
background-image: -ms-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-ms-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-ms-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-ms-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-ms-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
|
||||||
|
background-image: -o-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-o-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-o-linear-gradient(top, $grid-color 1px, transparent 1px),
|
||||||
|
-o-linear-gradient(left, $grid-color 1px, transparent 1px),
|
||||||
|
-o-linear-gradient(top, $baseline-grid-color 1px, transparent 1px);
|
||||||
|
background-image: linear-gradient(to bottom, $grid-color 1px, transparent 1px),
|
||||||
|
linear-gradient(to right, $grid-color 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, $grid-color 1px, transparent 1px),
|
||||||
|
linear-gradient(to right, $grid-color 1px, transparent 1px),
|
||||||
|
linear-gradient(to bottom, $baseline-grid-color 1px, transparent 1px);
|
||||||
|
}
|
||||||
@@ -0,0 +1,204 @@
|
|||||||
|
/**
|
||||||
|
* This file is part of HTML2print.
|
||||||
|
*
|
||||||
|
* HTML2print is free software: you can redistribute it and/or modify it under the
|
||||||
|
* terms of the GNU Affero General Public License as published by the Free
|
||||||
|
* Software Foundation, either version 3 of the License, or (at your option) any
|
||||||
|
* later version.
|
||||||
|
*
|
||||||
|
* HTML2print is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||||
|
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
|
||||||
|
* PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||||
|
* details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License along
|
||||||
|
* with HTML2print. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Computation
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/* computes the edge size of the paper, which is the sum of the bleed and the
|
||||||
|
* crop sizes */
|
||||||
|
$edge: $crop-size + $bleed;
|
||||||
|
|
||||||
|
/* Computes the size of the paper sheet */
|
||||||
|
$paper-width: $page-width + ( $edge * 2 );
|
||||||
|
$paper-height: $page-height + ( $edge * 2 );
|
||||||
|
|
||||||
|
/**
|
||||||
|
* DEFINITION OF THE PAPER SHEET
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The $page CSS at-rule is used to define some properties of printed
|
||||||
|
* documents. We make it the size of the elements with the .paper class and
|
||||||
|
* remove any margins so they don't add up with margins specifed in elements
|
||||||
|
* with the .page class (or it's children, like .header, .body and .footer)
|
||||||
|
*
|
||||||
|
* We add 2pt to circumvent a rounding number bug in some browsers that make
|
||||||
|
* them include extra pages or shifts.
|
||||||
|
*/
|
||||||
|
@page {
|
||||||
|
size: $paper-width $paper-height + 2pt;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* CANVAS
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media all {
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
/* Activate opentype features and kernings */
|
||||||
|
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paper {
|
||||||
|
width: $paper-width;
|
||||||
|
height: $paper-height;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
/* defines a named counter and increments it every page, so we can use
|
||||||
|
* it to compute the page number */
|
||||||
|
counter-increment: folio;
|
||||||
|
|
||||||
|
/* makes sure that pages aren't cut because of pootential unprecise unit
|
||||||
|
* conversion at printing time */
|
||||||
|
page-break-inside: avoid;
|
||||||
|
page-break-after: always;
|
||||||
|
|
||||||
|
/* clips the content if it goes out of the page, so it doesn't increase
|
||||||
|
* the format */
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
/* Crop marks */
|
||||||
|
padding: $edge;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
/* 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 $edge,
|
||||||
|
$edge top,
|
||||||
|
right $edge,
|
||||||
|
($paper-width - $edge) top,
|
||||||
|
right ($paper-height - $edge),
|
||||||
|
($paper-width - $edge) bottom,
|
||||||
|
left ($paper-height - $edge),
|
||||||
|
$edge bottom
|
||||||
|
;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
/* defines the page size */
|
||||||
|
width: $page-width;
|
||||||
|
height: $page-height;
|
||||||
|
|
||||||
|
/* allows for absolutely positioned elements as settings the position
|
||||||
|
* property to relative as the side effect of making this elements
|
||||||
|
* top-left corner the reference point */
|
||||||
|
/*position: relative;*/
|
||||||
|
position: absolute; // FIXME: test it for printing issues
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: changer le format du papier en spread pour pouvoir imprimer en planche
|
||||||
|
.spread .paper { float: left; }
|
||||||
|
|
||||||
|
.spread:not(.facing) .paper:nth-child(odd) { margin-left: -$edge; }
|
||||||
|
.spread:not(.facing) .paper:nth-child(even) { margin-right: -$edge; }
|
||||||
|
.spread:not(.facing) .paper:first-child { margin-left: $page-width; }
|
||||||
|
|
||||||
|
.spread.facing .paper:nth-child(even) { margin-right: initial; margin-left: -$edge; }
|
||||||
|
.spread.facing .paper:nth-child(odd) { margin-left: initial; margin-right: -$edge; }
|
||||||
|
.spread.facing .paper:first-child { margin-left: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen {
|
||||||
|
/* defines the background color of the workspace */
|
||||||
|
/* UI */
|
||||||
|
body { background-color: #F0F0F0; }
|
||||||
|
|
||||||
|
#pages {
|
||||||
|
width: $paper-width;
|
||||||
|
height: $paper-height;
|
||||||
|
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
/* FIXME: allows for printing spreads as well */
|
||||||
|
.spread #pages {
|
||||||
|
width: $paper-width * 2;
|
||||||
|
height: $paper-height * 2;
|
||||||
|
}
|
||||||
|
.paper {
|
||||||
|
/* centrer la page à l'écran */
|
||||||
|
/* UI */
|
||||||
|
background-color: white;
|
||||||
|
/* UI */
|
||||||
|
margin-top: 1em;
|
||||||
|
/* UI */
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
/* UI */
|
||||||
|
.normal .page { outline: 1px dotted lightsalmon; }
|
||||||
|
/* UI */
|
||||||
|
.preview .paper { background: transparent; }
|
||||||
|
/* UI */
|
||||||
|
.preview .page {
|
||||||
|
outline: 1px solid lightgray;
|
||||||
|
background-color: white;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
html { width: $paper-width; }
|
||||||
|
body {
|
||||||
|
/* Allows for background colors printing */
|
||||||
|
background-color: transparent;
|
||||||
|
-webkit-print-color-adjust: exact;
|
||||||
|
print-color-adjust: exact;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helpers
|
||||||
|
*/
|
||||||
|
|
||||||
|
.region-break {
|
||||||
|
/* Apply this class to an element to put it on a new region.
|
||||||
|
* Hint:
|
||||||
|
* You can also use an empty <div class="page-break"></div>
|
||||||
|
* if you want to put manual page breaks without attaching it to an HTML element
|
||||||
|
*/
|
||||||
|
-webkit-region-break-before: always;
|
||||||
|
}
|
||||||
@@ -0,0 +1,113 @@
|
|||||||
|
/**
|
||||||
|
* Macro-structure
|
||||||
|
* ===============
|
||||||
|
*/
|
||||||
|
|
||||||
|
.body,
|
||||||
|
.body:before,
|
||||||
|
.body:after { position: absolute; }
|
||||||
|
|
||||||
|
.body:before,
|
||||||
|
.body:after { z-index: 500; }
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Zone de composition principale
|
||||||
|
* ------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.body {
|
||||||
|
top: $page-margin-top;
|
||||||
|
bottom: $page-margin-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* TODO: move into grid.less? */
|
||||||
|
.bloc { position: absolute; z-index: 500; }
|
||||||
|
// .debug .header,
|
||||||
|
// .debug .footer,
|
||||||
|
// .debug .body,
|
||||||
|
// .debug .bloc { outline: 1px solid purple; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Pieds de page
|
||||||
|
* -------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
.body:before,
|
||||||
|
.body:after {
|
||||||
|
display: block;
|
||||||
|
font-family: sans-serif;
|
||||||
|
font-size: 6pt;
|
||||||
|
line-height: $line-height;
|
||||||
|
letter-spacing: 0.25pt;
|
||||||
|
z-index: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .body:before,
|
||||||
|
// .body:after { bottom: $line-height * -3; }
|
||||||
|
|
||||||
|
/*gauche*/
|
||||||
|
.paper:nth-child(odd) .body:before { content: "Tous, des sang-mélés"; }
|
||||||
|
/*droite*/
|
||||||
|
.paper:nth-child(even) .body:before { content: "Tous, des sang-mélés"; }
|
||||||
|
|
||||||
|
.body:after { content: counter(folio); z-index: 499;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Miroir
|
||||||
|
* -------
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Placement en miroir des éléments en fonction de si ils se trouvent sur une
|
||||||
|
* page paire ou une page impaire, en utilisant le pseudo-sélecteur `nth-child`
|
||||||
|
*/
|
||||||
|
|
||||||
|
html:not(.facing) .paper:nth-child(odd) .body,
|
||||||
|
html.facing .paper:nth-child(even) .body {
|
||||||
|
right: $page-margin-outside;
|
||||||
|
left: $page-margin-inside;
|
||||||
|
}
|
||||||
|
|
||||||
|
html:not(.facing) .paper:nth-child(even) .body,
|
||||||
|
html.facing .paper:nth-child(odd) .body {
|
||||||
|
left: $page-margin-outside;
|
||||||
|
right: $page-margin-inside;
|
||||||
|
}
|
||||||
|
|
||||||
|
// html:not(.facing) .paper:nth-child(odd) .body:before,
|
||||||
|
// html.facing .paper:nth-child(even) .body:before {
|
||||||
|
// @extend .x1;
|
||||||
|
// @extend .w4;
|
||||||
|
// }
|
||||||
|
// html:not(.facing) .paper:nth-child(even) .body:before,
|
||||||
|
// html.facing .paper:nth-child(odd) .body:before {
|
||||||
|
// @extend .x5;
|
||||||
|
// @extend .w4;
|
||||||
|
// }
|
||||||
|
// html:not(.facing) .paper:nth-child(odd) .body:after,
|
||||||
|
// html.facing .paper:nth-child(even) .body:after {
|
||||||
|
// @extend .x5;
|
||||||
|
// @extend .w1;
|
||||||
|
// text-align: left;
|
||||||
|
// }
|
||||||
|
// html:not(.facing) .paper:nth-child(even) .body:after,
|
||||||
|
// html.facing .paper:nth-child(odd) .body:after {
|
||||||
|
// @extend .x1;
|
||||||
|
// @extend .w1;
|
||||||
|
// text-align: left;
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
#flow-main {
|
||||||
|
position: relative;
|
||||||
|
-webkit-flow-into: flow-main;
|
||||||
|
flow-into: flow-main;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-main {
|
||||||
|
-webkit-flow-from: flow-main;
|
||||||
|
flow-from: flow-main;
|
||||||
|
}
|
||||||
+150
-2
@@ -1,3 +1,151 @@
|
|||||||
body{
|
/**
|
||||||
background-color: white;
|
* This file is part of HTML2print.
|
||||||
|
*
|
||||||
|
* HTML2print is free software: you can redistribute it and/or modify it under the
|
||||||
|
* terms of the GNU Affero General Public License as published by the Free
|
||||||
|
* Software Foundation, either version 3 of the License, or (at your option) any
|
||||||
|
* later version.
|
||||||
|
*
|
||||||
|
* HTML2print is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||||
|
* WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
|
||||||
|
* PARTICULAR PURPOSE. See the GNU Affero General Public License for more
|
||||||
|
* details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License along
|
||||||
|
* with HTML2print. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The less CSS is splitted accross different files for a better organisation.
|
||||||
|
*
|
||||||
|
* This is the main less css file that defines custom values and requires all
|
||||||
|
* the the neccessary dependencies.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* THE CODE BELOW IS REQUIRED TO MAKE HTML2PRINT WORK.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@function mm2pt($mm){
|
||||||
|
@return $mm*2.8346pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines and loads the rules that set the geometry of the page and its
|
||||||
|
* representation on screen. This is the core of html2print.
|
||||||
|
*
|
||||||
|
* Customize the variables to your needs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* the geometry of the page */
|
||||||
|
$page-width: mm2pt(110);
|
||||||
|
$page-height: mm2pt(200);
|
||||||
|
|
||||||
|
/* the size of the crop marks based on scribus defaults */
|
||||||
|
$crop-size: mm2pt(2);
|
||||||
|
|
||||||
|
/* the size of bleed */
|
||||||
|
$bleed: mm2pt(3);
|
||||||
|
|
||||||
|
/* loads the core file */
|
||||||
|
// @import "html2print.scss";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* THE CODE BELOW IS NOT REQUIRED TO MAKE HTML2PRINT WORK, ALTHOUGH IT PROVES
|
||||||
|
* USEFUL IN MANY SITUATIONS.
|
||||||
|
*
|
||||||
|
* YOU ARE ENCOURAGED TO CUSTOMIZE IT TO YOU NEEDS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines and generate helper css rules to absolutly position elements on a
|
||||||
|
* grid.
|
||||||
|
*
|
||||||
|
* Customize the variables to your needs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
$col-number: 9;
|
||||||
|
$col-gutter: mm2pt(3);
|
||||||
|
|
||||||
|
//$row-number: 13;
|
||||||
|
$row-number: 12;
|
||||||
|
$row-gutter: mm2pt(4);
|
||||||
|
|
||||||
|
$grid-color: rgba(255, 0, 0, 0.25);
|
||||||
|
$baseline-grid-color: rgba(0, 255, 255, 0.15);
|
||||||
|
|
||||||
|
/* Loads the rules for using grids */
|
||||||
|
// @import "grid.scss";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads the rules to outline the main blocs
|
||||||
|
*/
|
||||||
|
|
||||||
|
// @import "debug.scss";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads a few less helpers
|
||||||
|
*/
|
||||||
|
|
||||||
|
// @import "mixins.scss";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines and loads the rules that set the base layout of the document
|
||||||
|
* (header, body, footer)
|
||||||
|
*
|
||||||
|
* Customize the variables to your needs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// FIXME: make a case for single page layouts
|
||||||
|
$page-margin-inside: mm2pt(7.5);
|
||||||
|
$page-margin-outside: mm2pt(15);
|
||||||
|
$page-margin-top: mm2pt(10);
|
||||||
|
$page-margin-bottom: mm2pt(10);
|
||||||
|
|
||||||
|
// @import "layout.scss";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Loads your own styles.
|
||||||
|
*
|
||||||
|
* Customize the file/path to you needs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*@import '/vendors/reset-css/reset.css';*/
|
||||||
|
/*@import "../vendors/normalize.css/normalize.css";*/
|
||||||
|
/*@import "../vendors/normalize-opentype.css/normalize-opentype.css";*/
|
||||||
|
// @import "fonts.scss";
|
||||||
|
// @import "colors.scss";
|
||||||
|
|
||||||
|
$line-height: mm2pt(4);
|
||||||
|
// @import "styles.scss";
|
||||||
|
|
||||||
|
@import "html2print.scss";
|
||||||
|
|
||||||
|
@import "grid.scss";
|
||||||
|
|
||||||
|
@import "debug.scss";
|
||||||
|
|
||||||
|
@import "mixins.scss";
|
||||||
|
|
||||||
|
@import "layout.scss";
|
||||||
|
|
||||||
|
// @import "fonts.scss";
|
||||||
|
|
||||||
|
// @import "colors.scss";
|
||||||
|
|
||||||
|
@import "styles.scss";
|
||||||
|
|
||||||
|
/*@import "export.scss";*/
|
||||||
|
|||||||
@@ -0,0 +1,27 @@
|
|||||||
|
/**
|
||||||
|
* Mixins
|
||||||
|
* ======
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin flow-into($flow) {
|
||||||
|
-webkit-flow-into: $flow;
|
||||||
|
flow-into: $flow;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin flow-from($flow) {
|
||||||
|
-webkit-flow-from: $flow;
|
||||||
|
flow-from: $flow;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pas de footer sur ces pages
|
||||||
|
@mixin no-footer($page) {
|
||||||
|
.paper:nth-of-type(#{$page}) .body:before,
|
||||||
|
.paper:nth-of-type(#{$page}) .body:after { content: "" }
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin trans($rotate, $skew, $originY, $originX) {
|
||||||
|
-webkit-transform: skewY($skew) rotate($rotate);
|
||||||
|
transform: skewY($skew) rotate($rotate);
|
||||||
|
-webkit-transform-origin: $originY $originX;
|
||||||
|
transform-origin: $originY $originX;
|
||||||
|
}
|
||||||
@@ -0,0 +1,297 @@
|
|||||||
|
// your styles here
|
||||||
|
|
||||||
|
$bgcolor:white;
|
||||||
|
|
||||||
|
.paper, .preview .page {
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: $bgcolor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#stories{
|
||||||
|
font-family: "Vremena Grotesk" sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-page{
|
||||||
|
@extend .w9;
|
||||||
|
// -webkit-region-break-after:always;
|
||||||
|
// break-after:always;
|
||||||
|
// -webkit-region-break-inside:auto;
|
||||||
|
// region-break-inside: auto;
|
||||||
|
// -webkit-region-fragment: break;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-page-0,
|
||||||
|
.story-page-1,
|
||||||
|
.story-page-2{
|
||||||
|
@extend .h12;
|
||||||
|
// overflow: visible;
|
||||||
|
// position: relative;
|
||||||
|
-webkit-region-break-after:always;
|
||||||
|
break-after:always;
|
||||||
|
-webkit-region-break-inside: avoid;
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
figure, img{
|
||||||
|
margin:0; padding:0;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// footer / pagination
|
||||||
|
.paper {
|
||||||
|
.body:before, .body:after{
|
||||||
|
// display: block;
|
||||||
|
display:inline-block;
|
||||||
|
width:auto;
|
||||||
|
.debug &{
|
||||||
|
outline: 1px solid green;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.body:before{
|
||||||
|
top:50%;
|
||||||
|
width:50mm;
|
||||||
|
margin-top: -25mm;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.body:after{
|
||||||
|
bottom:-5mm;
|
||||||
|
width:15mm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Footer
|
||||||
|
/*gauche*/
|
||||||
|
.paper:nth-child(odd) .body:before {
|
||||||
|
transform-origin: right;
|
||||||
|
transform: rotateZ(-90deg);
|
||||||
|
right:-7mm;
|
||||||
|
}
|
||||||
|
/*droite*/
|
||||||
|
.paper:nth-child(even) .body:before {
|
||||||
|
transform-origin: left;
|
||||||
|
transform: rotateZ(90deg);
|
||||||
|
left:-7mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pagination
|
||||||
|
// gauche
|
||||||
|
.paper:nth-child(odd) .body:after{
|
||||||
|
text-align: right;
|
||||||
|
right:-8mm;
|
||||||
|
}
|
||||||
|
// droite
|
||||||
|
.paper:nth-child(even) .body:after{
|
||||||
|
text-align: left;
|
||||||
|
left:-8mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#page-1, #page-2{
|
||||||
|
.body:before, .body:after{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.body{
|
||||||
|
top:0; right:0; bottom:0; left:0;
|
||||||
|
}
|
||||||
|
.bloc{
|
||||||
|
top:0; right:0; bottom:0; left:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.story-page-0, .story-page-1{
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
h1{
|
||||||
|
margin:0 auto;
|
||||||
|
width:mm2pt(150);
|
||||||
|
font-family: 'Vremena Grotesk';
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 95pt;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.4;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
-webkit-region-break-inside:avoid;
|
||||||
|
break-inside:avoid;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.story-page-0{
|
||||||
|
h1{
|
||||||
|
transform: translateX(4mm) translateY(-13mm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.story-page-1{
|
||||||
|
h1{
|
||||||
|
transform: translateX(-65mm) translateY(-20mm);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.story-page-2{
|
||||||
|
height:auto;
|
||||||
|
h2{
|
||||||
|
text-align: center;
|
||||||
|
font-family: "Vremena";
|
||||||
|
font-size: 25pt;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-top:mm2pt(55);
|
||||||
|
padding-left: 2.8em;
|
||||||
|
padding-right: 2.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.typo-1{
|
||||||
|
font-family: "Fantasque";
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.typo-2{
|
||||||
|
font-family: "Vremena";
|
||||||
|
}
|
||||||
|
.typo-3{
|
||||||
|
font-family: "Vremena Grotesk";
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.typo-4{
|
||||||
|
font-family: "Gap Sans"
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-page{
|
||||||
|
margin-bottom: 10mm;
|
||||||
|
}
|
||||||
|
|
||||||
|
.story-page:not(.story-page-0):not(.story-page-1):not(.story-page-2){
|
||||||
|
h1{
|
||||||
|
// -webkit-region-break-before: auto;
|
||||||
|
-webkit-region-break-inside: avoid;
|
||||||
|
-webkit-region-break-after: avoid;
|
||||||
|
|
||||||
|
margin: 0 0 5mm 0;
|
||||||
|
margin-right: -$page-margin-inside*0.5;
|
||||||
|
|
||||||
|
font-size: 40pt;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 35pt;
|
||||||
|
|
||||||
|
// &.paper-odd{
|
||||||
|
text-align: right;
|
||||||
|
padding-left: 20mm;
|
||||||
|
// }
|
||||||
|
&.paper-even{
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 20mm;
|
||||||
|
margin: 0 0 5mm 0;
|
||||||
|
margin-left: -$page-margin-inside*0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
figure{
|
||||||
|
// -webkit-region-break-before: avoid;
|
||||||
|
-webkit-region-break-inside: avoid;
|
||||||
|
// -webkit-region-break-after: avoid;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
$iw:35mm; // image width
|
||||||
|
$bw:4pt; // border width
|
||||||
|
|
||||||
|
max-width: $iw+$bw*3;
|
||||||
|
|
||||||
|
img{
|
||||||
|
max-width: $iw;
|
||||||
|
border:$bw solid black;
|
||||||
|
border-left: $bw*2 solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption{
|
||||||
|
font-size: 8pt;
|
||||||
|
line-height: 9.5pt;
|
||||||
|
max-width: 100%;
|
||||||
|
padding-left: $bw*2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// &.paper-odd{
|
||||||
|
float: left;
|
||||||
|
margin:0 4mm 2mm 0;
|
||||||
|
margin-left: -$page-margin-outside - $bw;
|
||||||
|
// }
|
||||||
|
&.paper-even{
|
||||||
|
float: right;
|
||||||
|
margin:0 0 2mm 4mm;
|
||||||
|
margin-right: -$page-margin-outside - $bw;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
img{
|
||||||
|
border:$bw solid black;
|
||||||
|
border-right: $bw*2 solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption{
|
||||||
|
padding-right: $bw*2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
font-family: "Averia Serif";
|
||||||
|
font-size: 9pt;
|
||||||
|
line-height: 13pt;
|
||||||
|
margin-top: 0;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
// -webkit-region-break-before: always;
|
||||||
|
// -webkit-region-break-inside: auto;
|
||||||
|
// -webkit-region-break-after: always;
|
||||||
|
// &:nth-of-type(1){
|
||||||
|
// -webkit-region-break-before:avoid;
|
||||||
|
// -webkit-region-break-inside:auto;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after{
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
float: none;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
@-webkit-region .paper .flow-main {
|
||||||
|
h1{
|
||||||
|
// color: red!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-region .paper:nth-child(even) .flow-main {
|
||||||
|
h1{
|
||||||
|
color: purple;
|
||||||
|
text-align: right;
|
||||||
|
padding-left: 3mm;
|
||||||
|
}
|
||||||
|
figure{
|
||||||
|
float: left;
|
||||||
|
margin-left: -$page-margin-outside;
|
||||||
|
margin:0 4mm 2mm 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@-webkit-region .paper:nth-child(odd) .flow-main {
|
||||||
|
h1{
|
||||||
|
color: blue;
|
||||||
|
text-align: left;
|
||||||
|
padding-right: 3mm;
|
||||||
|
}
|
||||||
|
figure{
|
||||||
|
float: right;
|
||||||
|
margin-left: -$page-margin-outside;
|
||||||
|
margin:0 0 2mm 4mm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
Reference in New Issue
Block a user