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