integrated last medor boilerplate from osp
This commit is contained in:
Bachir Soussi Chiadmi
+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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user