integrated last medor boilerplate from osp
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1,200 @@
|
||||
//palette identité Médor -------------
|
||||
//bleu gris foncé
|
||||
$color-A2: rgba(42, 133, 164, 255);
|
||||
//brun foncé
|
||||
$color-A3: rgba(177, 69, 66, 255);
|
||||
//ajune total
|
||||
$color-A4: rgba(255, 254, 53, 255);
|
||||
//vert gazon
|
||||
$color-A4: rgba(57, 145, 79, 255);
|
||||
|
||||
//rouge brun
|
||||
$color-B2: rgba(219, 40, 35, 255);
|
||||
//jaune clair
|
||||
$color-B3: rgba(255, 253, 115, 255);
|
||||
//vert clair
|
||||
$color-B4: rgba(225, 241, 122, 255);
|
||||
//bleu ciel
|
||||
$color-C1: rgba(137, 203, 225, 255);
|
||||
//rouge
|
||||
$color-C2: rgba(249, 49, 52, 255);
|
||||
//orange
|
||||
$color-C3: rgba(250, 181, 71, 255);
|
||||
//beige verdâtre
|
||||
$color-C4: rgba(243, 253, 207, 255);
|
||||
//bleu gris clair
|
||||
$color-D1: rgba(169, 213, 222, 255);
|
||||
//orange clair
|
||||
$color-D3: rgba(247, 229, 149, 255);
|
||||
//beige
|
||||
$color-E1: rgba(233, 234, 225, 255);
|
||||
//nacre
|
||||
$color-E3: rgba(254, 250, 194, 255);
|
||||
//rose peteur
|
||||
$color-F2: rgba(243, 225, 226, 255);
|
||||
|
||||
|
||||
// palette Médor#1 --------------------
|
||||
//beige
|
||||
$color-beige:#fefac2;
|
||||
//bleu-gris - portrait #1
|
||||
$color-bleu-gris:#1e60e1;
|
||||
//bleu clair turquoise - traduction #1
|
||||
$color-bleu-clair: #0AB1AF;
|
||||
//fushia - libre de droit #1
|
||||
$color-fushia:#FE02FC;
|
||||
$color-pomme:#e1f17a;
|
||||
// vert - lobbycratie #1
|
||||
$color-vert:#3AAB0D;
|
||||
// orange brun - entretien #1
|
||||
$color-brun:#d38d5f;
|
||||
|
||||
// palette Médor#2 spyche-riso--------------------
|
||||
//bleu riso
|
||||
$color-blue-deep:#1b3c6c;
|
||||
$color-blue-kashmir:#547291;
|
||||
$color-blue-gris-fonce:#51596c;
|
||||
$color-blue-egyptien-intense:#293ea2;
|
||||
$color-blue-gris-clair:#5791b9;
|
||||
//bleu bug
|
||||
$color-blue:#0000ff;
|
||||
|
||||
//violet riso
|
||||
$color-violet-nuit:#662d4d;
|
||||
$color-mures-pasmures:#cd4f94;
|
||||
$color-fushia:#c54764;
|
||||
$color-magenta:#f93134;
|
||||
$color-rose-bebe:#f49d92;
|
||||
$color-rose-terrecuite:#de7162;
|
||||
|
||||
//rouge orangés riso
|
||||
$color-rouge-brun:#5d151f;
|
||||
$color-ocre-rouge:#ad2519;
|
||||
$color-ocre-brun:#a84229;
|
||||
$color-orange:#ea6d1d;
|
||||
$color-ocre-rose:#d86630;
|
||||
$color-brun:#c0682b;
|
||||
|
||||
// jaune riso
|
||||
$color-jaune-nuit:#ac8b21;
|
||||
$color-gold:#d6b229;
|
||||
$color-jaune-pasmur:#d2bf1d;
|
||||
$color-jaune-marguerite:#ffe645;
|
||||
$color-jaune-souris:#ccbc6c;
|
||||
$color-gold-luxor:#9f8741;
|
||||
|
||||
// vert riso
|
||||
$color-vert-canard:#115748;
|
||||
$color-vert-hippie:#578454;
|
||||
$color-vert-fougere:#518f3f;
|
||||
$color-vert-pomme:#54bb42;
|
||||
$color-vert-laurier:#80b38a;
|
||||
$color-vert-cuir:#6a8a77;
|
||||
|
||||
// autres riso
|
||||
$color-irish-coffee:#5f4329;
|
||||
$color-maron-pale:#9d7955;
|
||||
$color-vieille-rose:#b7705e;
|
||||
$color-camel:#cdab85;
|
||||
$color-maron-bourbon:#a67242;
|
||||
|
||||
$color-vert-finlande:#626d5f;
|
||||
$color-gris-militaire:#978e63;
|
||||
$color-gris-agave:#cabca2;
|
||||
$color-rose-pale:#f3e1e2;
|
||||
$color-vert-gris-clair:#96a187;
|
||||
|
||||
//couleur été (medor 3)
|
||||
$color-ete-jaune:#fffd73;
|
||||
$color-ete-soleil:#fffe35;
|
||||
$color-ete-rose-pale:#ffcce6;
|
||||
$color-ete-rose:#ff99cc;
|
||||
$color-ete-vert-pale:#a6ffcc;
|
||||
$color-ete-vert:#71f6b7;
|
||||
$color-ete-majenta:#ff0961;
|
||||
$color-ete-nuit:#004080;
|
||||
$color-ete-violet:#7f5aa1;
|
||||
$color-ete-sapin:#0c443f;
|
||||
|
||||
$color-black: black;
|
||||
|
||||
$color-bleu-mons:#8cb2bd;
|
||||
|
||||
//couleur automne (medor 4)
|
||||
|
||||
$color-vieux-turquoise:#a1d0c0;
|
||||
$color-jaune-sale:#e1d521;
|
||||
$color-orange-sale:#d85b23;
|
||||
$color-vieux-rouge:#a4292b;
|
||||
$color-bleu-sexe:#1f37ff;
|
||||
$color-jaune-sexe:#eeff2a;
|
||||
$color-bleu-ciel-sexe:#71f8d2;
|
||||
$color-vert-punch-sexe:#5fff00;
|
||||
$color-rose-peche-sexe:#f84d22;
|
||||
$color-vieille-peche-sexe:#ba536d;
|
||||
$color-rose-biche: #fb2928;
|
||||
$color-vert-prairie-loup:#acea9a;
|
||||
$color-vert-foret-loup:#b1d0a3;
|
||||
$color-jaune-maison-loup:#fed137;
|
||||
$color-bleu-archives:#6479a0;
|
||||
$color-bleu-lumiere-archives:#537fc3;
|
||||
$color-bleu-contour-archives:#62e7ff;
|
||||
$color-gris-contour-archives:#b3c8d0;
|
||||
$color-vert-billet-100:#30721E;
|
||||
$color-orange-seventies:#ff8126;
|
||||
$color-orange-seventies-petant:#ff8605;
|
||||
$color-vert-sapin-fonce:#243f1c;
|
||||
$color-vert-moisi:#71BD9F;
|
||||
$color-violet-billet-500: #ab4584;
|
||||
|
||||
|
||||
//couleur hiver (medor 5)
|
||||
|
||||
$color-rouge-fesses:#FF0000;
|
||||
$color-jaune-fesses:#FFFF00;
|
||||
$color-ciel-fesses:#00FFFF;
|
||||
$color-bleu-fesses:#3400FF;
|
||||
$color-rose-fesses:#FF00FF;
|
||||
|
||||
$color-jaune-messes:#D19E25;
|
||||
$color-bleu-messes:#0F1051;
|
||||
$color-rose-messes:#EDACB4;
|
||||
$color-rouge-messes:#CA3A49;
|
||||
$color-beige-messes:#EFC794;
|
||||
$color-vert-messes:#019462;
|
||||
|
||||
$color-ocre-lumumba:#640a02;
|
||||
$color-jaune-lumumba:#ffbc05;
|
||||
$color-orange-lumumba:#ff6046;
|
||||
|
||||
$color-beau-vert-neo:#40c893;
|
||||
$color-saumon-neo:#fddad0;
|
||||
$color-jaune-neo:#febe30;
|
||||
$color-vert-parc-neo:#3b8d7a;
|
||||
$color-bleu-route-neo:#005681;
|
||||
|
||||
$color-jaune-flamand:#FCFD19;
|
||||
$color-fushia-flamand:#D60FA0;
|
||||
$color-bleu-flamand:#0001FE;
|
||||
$color-bleu-vert-flamand:#27C2B4;
|
||||
$color-vert-flamand:#71F199;
|
||||
|
||||
$color-vert-carda:#04ba79;
|
||||
|
||||
$color-vert-bleri:#008e6d;
|
||||
$color-rouge-bleri:#b94c49;
|
||||
|
||||
$color-vert-robert:#4EBE86;
|
||||
|
||||
$color-bleu-couv:#3983e5;
|
||||
$color-orange-couv:#c75000;
|
||||
$color-vert-couv:#2f7500;
|
||||
$color-peau-couv:#d696a7;
|
||||
$color-rouge-couv:#b82e00;
|
||||
$color-bleu-vert-couv:#03745e;
|
||||
$color-bleu-vert-gris-couv:#69a29b;
|
||||
|
||||
$color-vert-pomme-couv:#d3c643;
|
||||
$color-saumon-couv:#e1a57b;
|
||||
|
||||
$color-jaune-couv:#fcc703;
|
||||
+4
-12
@@ -2,21 +2,13 @@
|
||||
* DEBUG STYLES
|
||||
*/
|
||||
|
||||
.debug .header {
|
||||
outline: 1px solid pink;
|
||||
}
|
||||
.debug .body {
|
||||
outline: 1px solid purple;
|
||||
}
|
||||
.debug .footer {
|
||||
outline: 1px solid pink;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.debug img { outline: 1px solid blue; }
|
||||
|
||||
Vendored
+34
-16
@@ -1,9 +1,31 @@
|
||||
/**
|
||||
* 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/>.
|
||||
*/
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
#viewport {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 25px;
|
||||
left: 0;
|
||||
right: 0; }
|
||||
width: 100%;
|
||||
height: calc(100% - 25px);
|
||||
border: none; }
|
||||
|
||||
#toolbar {
|
||||
background-color: black;
|
||||
@@ -17,31 +39,32 @@
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
-webkit-align-items: center; }
|
||||
|
||||
label {
|
||||
#toolbar > label {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 3px; }
|
||||
|
||||
input {
|
||||
#toolbar > input {
|
||||
border: 1px solid white;
|
||||
background-color: white;
|
||||
font-size: 11px;
|
||||
vertical-align: -2px; }
|
||||
|
||||
input[type=number] {
|
||||
#toolbar > input[type=number] {
|
||||
width: 50px;
|
||||
vertical-align: 0px;
|
||||
margin-left: 2px; }
|
||||
|
||||
input:hover {
|
||||
#toolbar > input:hover {
|
||||
cursor: pointer;
|
||||
background-color: yellow; }
|
||||
|
||||
button {
|
||||
#toolbar > button {
|
||||
border: 1px solid white;
|
||||
background-color: white;
|
||||
font-size: 11px;
|
||||
@@ -49,16 +72,11 @@ button {
|
||||
margin-right: 1em;
|
||||
height: 19px; }
|
||||
|
||||
button:hover {
|
||||
#toolbar > button:hover {
|
||||
cursor: pointer;
|
||||
background-color: yellow; }
|
||||
|
||||
.separator {
|
||||
#toolbar > .separator {
|
||||
content: " ";
|
||||
flex-grow: 2;
|
||||
-webkit-flex-grow: 2; }
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0; }
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
/**
|
||||
* This file holds the declaration of the fonts used in our layout.
|
||||
*/
|
||||
|
||||
@import "/assets/fonts/dejavu/dejavu.css";
|
||||
@import "/assets/fonts/opensans/opensans.css";
|
||||
@@ -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 {
|
||||
@if $odd{
|
||||
$offset:$offset+$col-width;
|
||||
$odd:false;
|
||||
}@else{
|
||||
$offset:$offset+$col-gutter;
|
||||
$odd:true;
|
||||
}
|
||||
.#{$class-name}#{$i} {
|
||||
#{$prop}: $offset;
|
||||
};
|
||||
$i: $i+1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
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);
|
||||
}
|
||||
+42
-17
@@ -1,9 +1,35 @@
|
||||
/**
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#viewport {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 25px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: calc(100% - 25px);
|
||||
border: none;
|
||||
}
|
||||
|
||||
#toolbar {
|
||||
@@ -18,34 +44,37 @@
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 0;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
align-items: center;
|
||||
-webkit-align-items: center;
|
||||
}
|
||||
|
||||
label {
|
||||
#toolbar > label {
|
||||
margin-left: 1.5em;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
input {
|
||||
#toolbar > input {
|
||||
border: 1px solid white;
|
||||
background-color: white;
|
||||
font-size: 11px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
input[type=number]{
|
||||
|
||||
#toolbar > input[type=number]{
|
||||
width: 50px;
|
||||
vertical-align: 0px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
input:hover {
|
||||
|
||||
#toolbar > input:hover {
|
||||
cursor: pointer;
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
button {
|
||||
#toolbar > button {
|
||||
border: 1px solid white;
|
||||
background-color: white;
|
||||
font-size: 11px;
|
||||
@@ -53,18 +82,14 @@ button {
|
||||
margin-right: 1em;
|
||||
height: 19px;
|
||||
}
|
||||
button:hover {
|
||||
|
||||
#toolbar > button:hover {
|
||||
cursor: pointer;
|
||||
background-color: yellow;
|
||||
}
|
||||
.separator {
|
||||
|
||||
#toolbar > .separator {
|
||||
content: " ";
|
||||
flex-grow: 2;
|
||||
-webkit-flex-grow: 2;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
+139
-97
@@ -1,26 +1,49 @@
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
||||
|
||||
/* EXTRA SPACE AROUND THE PAGE: BLEED + CROP */
|
||||
// TODO: find a more appropriate name
|
||||
$crop: $crop-size + $bleed;
|
||||
|
||||
/* GEOMETRY OF THE PAPER SHEET */
|
||||
$paper-width: $page-width + ( $crop * 2 );
|
||||
$paper-height: $page-height + ( $crop * 2 );
|
||||
|
||||
/* SIZE OF SPREAD */
|
||||
$spread: $page-width * 2;
|
||||
|
||||
/* 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 + 1);
|
||||
size: $paper-width $paper-height + 2pt;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -32,121 +55,141 @@ $spread: $page-width * 2;
|
||||
@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;
|
||||
|
||||
counter-increment: page-counter;
|
||||
/* defines a named counter and increments it every page, so we can use
|
||||
* it to compute the page number */
|
||||
counter-increment: folio;
|
||||
|
||||
// To make sure that one paper sheet is not splitted into different pages in the PDF
|
||||
/* 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: $crop;
|
||||
padding: $edge;
|
||||
position: relative;
|
||||
.crops {
|
||||
width: $paper-width;
|
||||
height: $paper-height;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
div {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 0;
|
||||
width: $crop;
|
||||
height: $crop;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
|
||||
span {
|
||||
width: $bleed;
|
||||
height: $bleed;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.crop-top-left {
|
||||
border-right-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
span { right: -1px; bottom: -1px;}
|
||||
}
|
||||
.crop-top-right {
|
||||
border-left-width: 1px;
|
||||
border-bottom-width: 1px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
span { left: -1px; bottom: -1px;}
|
||||
}
|
||||
.crop-bottom-right {
|
||||
border-left-width: 1px;
|
||||
border-top-width: 1px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
span { left: -1px; top: -1px;}
|
||||
}
|
||||
.crop-bottom-left {
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
span { right: -1px; top: -1px;}
|
||||
}
|
||||
}
|
||||
/* 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;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
|
||||
/* 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;
|
||||
}
|
||||
.paper:nth-child(odd) {
|
||||
margin-left: -$crop;
|
||||
}
|
||||
.paper:nth-child(even) {
|
||||
margin-right: -$crop;
|
||||
}
|
||||
.paper:first-child {
|
||||
margin-left: $page-width;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
html { width: $paper-width; }
|
||||
body {
|
||||
/* Allows printing of background colors */
|
||||
background-color: white;
|
||||
/* Allows for background colors printing */
|
||||
background-color: transparent;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
/* Activate opentype features and kernings */
|
||||
-webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Helpers
|
||||
*/
|
||||
@@ -158,5 +201,4 @@ $spread: $page-width * 2;
|
||||
* if you want to put manual page breaks without attaching it to an HTML element
|
||||
*/
|
||||
-webkit-region-break-before: always;
|
||||
break-before: always;
|
||||
}
|
||||
|
||||
+95
-91
@@ -1,109 +1,113 @@
|
||||
.header,
|
||||
/**
|
||||
* Macro-structure
|
||||
* ===============
|
||||
*/
|
||||
|
||||
.body,
|
||||
.footer {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.body:before,
|
||||
.body:after { position: absolute; }
|
||||
|
||||
/* __________________________________ HEADER __________________________________ */
|
||||
.header {
|
||||
top: 0;
|
||||
margin: 0;
|
||||
padding-top: $page-margin-top;
|
||||
width: 100%;
|
||||
height: $header-height;
|
||||
text-align: left;
|
||||
.body:before,
|
||||
.body:after { z-index: 500; }
|
||||
|
||||
|
||||
/**
|
||||
* Zone de composition principale
|
||||
* ------------------------------
|
||||
*/
|
||||
|
||||
&:after {
|
||||
content: $header-text;
|
||||
}
|
||||
}
|
||||
/* __________________________________ MAIN SECTION __________________________________ */
|
||||
.body {
|
||||
height: $page-height - $header-height - $footer-height;
|
||||
width: $page-width;
|
||||
margin-bottom: $page-margin-bottom;
|
||||
padding-top: $page-margin-top + $header-height;
|
||||
padding-bottom: $page-margin-bottom;
|
||||
position: absolute;
|
||||
top: $page-margin-top;
|
||||
bottom: $page-margin-bottom;
|
||||
}
|
||||
|
||||
.recipient {
|
||||
-webkit-flow-from: myStory;
|
||||
flow-from: myStory;
|
||||
/* 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: "Belgika8th", sans-serif;
|
||||
font-size: 6pt;
|
||||
line-height: $line-height;
|
||||
letter-spacing: 0.25pt;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
#my-story {
|
||||
-webkit-flow-into: myStory;
|
||||
flow-into: myStory;
|
||||
}
|
||||
/* __________________________________ FOOTER __________________________________ */
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: $footer-height;
|
||||
text-align: center;
|
||||
.body:before,
|
||||
.body:after { bottom: $line-height * -3; }
|
||||
|
||||
&:after {
|
||||
content: $footer-text;
|
||||
}
|
||||
/*gauche*/
|
||||
/*.body:before { content: "Type d'article — Titre de l'article"; } */
|
||||
/*droite*/
|
||||
/*.body:before { content: "Médor n°1 — printemps 2015"; }*/
|
||||
.paper:nth-child(even) .body:before { content: "Médor — hiver 2016-2017"; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* mirrored pages */
|
||||
.paper {
|
||||
&:nth-child(odd) .header {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:nth-child(odd) .header,
|
||||
&:nth-child(odd) .body,
|
||||
&:nth-child(odd) .footer {
|
||||
padding-left: $page-margin-inside;
|
||||
padding-right: $page-margin-outside;
|
||||
}
|
||||
&:nth-child(even) .header,
|
||||
&:nth-child(even) .body,
|
||||
&:nth-child(even) .footer {
|
||||
padding-left: $page-margin-outside;
|
||||
padding-right: $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;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
/* Avoids headings to be cut or to be orphans.
|
||||
* But it doesn't seem to work
|
||||
* if the element after has a page-break-inside avoid. It tries its best! */
|
||||
-webkit-region-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
-webkit-region-break-after: avoid;
|
||||
break-after: avoid;
|
||||
|
||||
#flow-main {
|
||||
-webkit-flow-into: flow-main;
|
||||
flow-into: flow-main;
|
||||
}
|
||||
|
||||
/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE,
|
||||
* HERE NO PARAGRAPH WILL BE CUT,
|
||||
* BUT YOU MIGHT WANT TO DEACTIVATE THIS */
|
||||
p {
|
||||
/*-webkit-region-break-inside: avoid;*/
|
||||
/* break-inside: avoid;*/
|
||||
}
|
||||
|
||||
.story-page, .page-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-after:always;
|
||||
break-after:always;
|
||||
.flow-main {
|
||||
-webkit-flow-from: flow-main;
|
||||
flow-from: flow-main;
|
||||
}
|
||||
|
||||
+148
-3
@@ -1,6 +1,151 @@
|
||||
@import "setup.scss";
|
||||
/**
|
||||
* 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(90);
|
||||
$page-height: mm2pt(150);
|
||||
|
||||
/* the size of the crop marks based on scribus defaults */
|
||||
$crop-size: mm2pt(12);
|
||||
|
||||
/* the size of bleed */
|
||||
$bleed: mm2pt(5);
|
||||
|
||||
/* 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(13);
|
||||
$page-margin-outside: mm2pt(8);
|
||||
$page-margin-top: mm2pt(8);
|
||||
$page-margin-bottom: mm2pt(22);
|
||||
|
||||
// @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 "layout.scss";
|
||||
|
||||
@import "grid.scss";
|
||||
|
||||
@import "debug.scss";
|
||||
@import "ui.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;
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
/* the geometry of the page */
|
||||
$page-width: 210mm;
|
||||
$page-height: 297mm;
|
||||
|
||||
/* the size of the crop marks*/
|
||||
$crop-size: 7mm;
|
||||
|
||||
/* the size of bleed */
|
||||
$bleed: 5mm;
|
||||
|
||||
// page layouts
|
||||
// 1 for single page
|
||||
// 2 for double page
|
||||
$page-layout:1;
|
||||
|
||||
$page-margin-inside: 20mm;
|
||||
$page-margin-outside: 10mm;
|
||||
$page-margin-top: 10mm;
|
||||
$page-margin-bottom: 15mm;
|
||||
|
||||
// Header & footer variables
|
||||
$header-height: 10mm;
|
||||
$header-text: "TDSM";
|
||||
$footer-height: 10mm;
|
||||
$footer-text: counter(page-counter);
|
||||
@@ -1 +1,5 @@
|
||||
// your styles here
|
||||
|
||||
#stories{
|
||||
font-family: "DejaVuSansMono" sans-serif;
|
||||
}
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
/**
|
||||
* User Interface
|
||||
*/
|
||||
@media screen {
|
||||
// C A N V A S
|
||||
body {
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
#pages {
|
||||
width: $paper-width;
|
||||
height: $paper-height;
|
||||
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.spread #pages {
|
||||
width: $paper-width * 2;
|
||||
height: $paper-height * 2;
|
||||
}
|
||||
.paper {
|
||||
/* centrer la page à l'écran */
|
||||
background-color: white;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.normal .paper {
|
||||
//outline: 1px solid lightgray;
|
||||
}
|
||||
.normal .page {
|
||||
outline: 1px dashed lightsalmon;
|
||||
}
|
||||
.preview .paper {
|
||||
background: none;
|
||||
}
|
||||
.preview .page {
|
||||
outline: 1px solid lightgray;
|
||||
background-color: white;
|
||||
}
|
||||
.preview .crops { visibility: hidden; }
|
||||
|
||||
|
||||
|
||||
// M E N U
|
||||
.button {
|
||||
z-index: 1000;
|
||||
background-color: black;
|
||||
font-family: sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 9pt !important;
|
||||
letter-spacing: 1pt;
|
||||
color: white;
|
||||
margin: 0;
|
||||
padding: 5pt 7pt;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
outline: 1pt solid black;
|
||||
}
|
||||
.button-active {
|
||||
background-color: white;
|
||||
color: black;
|
||||
outline: 1pt solid black;
|
||||
}
|
||||
.lo-res {
|
||||
outline: 10px solid red;
|
||||
}
|
||||
#interface {
|
||||
font-family: sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-size: 10pt !important;
|
||||
line-height: 14pt;
|
||||
letter-spacing: 1pt;
|
||||
position: fixed;
|
||||
bottom: 10pt;
|
||||
right: 10pt;
|
||||
}
|
||||
|
||||
#interface a {
|
||||
text-decoration: none;
|
||||
position: static;
|
||||
}
|
||||
|
||||
|
||||
div.dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
padding: 0.5em 0;
|
||||
display: none;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 2em;
|
||||
height: 200pt;
|
||||
width: 80pt;
|
||||
overflow: auto;
|
||||
|
||||
a {
|
||||
padding: 0 1em;
|
||||
color: white;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 80pt;
|
||||
}
|
||||
}
|
||||
|
||||
#toc {
|
||||
display: inline-block;
|
||||
}
|
||||
#toc-pages {
|
||||
padding: 0.5em 0;
|
||||
display: none;
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 2em;
|
||||
height: 200pt;
|
||||
width: 80pt;
|
||||
overflow: auto;
|
||||
}
|
||||
#toc-pages a {
|
||||
padding: 0 1em;
|
||||
color: white;
|
||||
}
|
||||
#toc-pages a:hover {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
#toc-pages button {
|
||||
width: 80pt;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media print {
|
||||
#interface {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user