Commit 5a453281 authored by Julie Blanc's avatar Julie Blanc

proposition layout julie

parent 99683458
This diff is collapsed.
# Font Squirrel Font-face Generator Configuration File
# Upload this file to the generator to recreate the settings
# you used to create these fonts.
{"mode":"expert","formats":["woff","woff2"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","ot_features":["smcp","c2sc","onum","tnum","salt"],"css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
\ No newline at end of file
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-light-webfont.woff2') format('woff2'),
url('alegreyasans-light-webfont.woff') format('woff');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-lightitalic-webfont.woff2') format('woff2'),
url('alegreyasans-lightitalic-webfont.woff') format('woff');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-regular-webfont.woff2') format('woff2'),
url('alegreyasans-regular-webfont.woff') format('woff');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-italic-webfont.woff2') format('woff2'),
url('alegreyasans-italic-webfont.woff') format('woff');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-medium-webfont.woff2') format('woff2'),
url('alegreyasans-medium-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-mediumitalic-webfont.woff2') format('woff2'),
url('alegreyasans-mediumitalic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-bold-webfont.woff2') format('woff2'),
url('alegreyasans-bold-webfont.woff') format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-bolditalic-webfont.woff2') format('woff2'),
url('alegreyasans-bolditalic-webfont.woff') format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-extrabold-webfont.woff2') format('woff2'),
url('alegreyasans-extrabold-webfont.woff') format('woff');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'alegreya-sans';
src: url('alegreyasans-extrabolditalic-webfont.woff2') format('woff2'),
url('alegreyasans-extrabolditalic-webfont.woff') format('woff');
font-weight: 600;
font-style: italic;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
# Font Squirrel Font-face Generator Configuration File
# Upload this file to the generator to recreate the settings
# you used to create these fonts.
{"mode":"expert","formats":["ttf","woff","woff2","svg"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","subset_ot_features_list":"","ot_features":["smcp","onum","tnum","salt"],"css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0"}
\ No newline at end of file
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 3, 2018 */
@font-face {
font-family: 'gentium-basic';
src: url('genbasb-webfont.woff2') format('woff2'),
url('genbasb-webfont.woff') format('woff'),
url('genbasb-webfont.ttf') format('truetype'),
url('genbasb-webfont.svg#gentium_basicbold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'gentium-basic';
src: url('genbasbi-webfont.woff2') format('woff2'),
url('genbasbi-webfont.woff') format('woff'),
url('genbasbi-webfont.ttf') format('truetype'),
url('genbasbi-webfont.svg#gentium_basicbold_italic') format('svg');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'gentium-basic';
src: url('genbasi-webfont.woff2') format('woff2'),
url('genbasi-webfont.woff') format('woff'),
url('genbasi-webfont.ttf') format('truetype'),
url('genbasi-webfont.svg#gentium_basicitalic') format('svg');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'gentium-basic';
src: url('genbasr-webfont.woff2') format('woff2'),
url('genbasr-webfont.woff') format('woff'),
url('genbasr-webfont.ttf') format('truetype'),
url('genbasr-webfont.svg#gentium_basicregular') format('svg');
font-weight: 300;
font-style: normal;
}
\ No newline at end of file
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
background-color: #fdfdfd; background-color: #fdfdfd;
margin-bottom: calc(var(--margin) / 2); margin-bottom: calc(var(--margin) / 2);
flex: none; flex: none;
border: 1px solid black;
} }
.pages { .pages {
...@@ -90,131 +91,10 @@ ...@@ -90,131 +91,10 @@
} }
/*.page {
box-sizing: border-box;
width: var(--width);
height: var(--height);
overflow: hidden;
position: relative;
display: grid;
grid-template-columns: [left] var(--margin-left) [center] calc(var(--width) - var(--margin-left) - var(--margin-right)) [right] var(--margin-right);
grid-template-rows: [header] var(--margin-top) [page] calc(var(--height) - var(--margin-top) - var(--margin-bottom)) [footer] var(--margin-bottom);
}
.page * {
box-sizing: border-box;
}
.top {
width: var(--width);
height: var(--margin-top);
display: flex;
grid-column: left / right;
grid-row: header;
}
.top .top-left-corner {
width: var(--margin-left);
height: var(--margin-top);
flex: none;
}
.top .top-right-corner {
width: var(--margin-right);
height: var(--margin-top);
flex: none;
}
.top > div {
flex-grow: 1;
position: relative;
}
.right {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-right);
display: flex;
flex-direction: column;
right: 0;
grid-column: right;
grid-row: page;
}
.right > div {
flex-grow: 1;
position: relative;
}
.bottom {
width: var(--width);
height: var(--margin-bottom);
display: flex;
grid-column: left / right;
grid-row: footer;
}
.bottom .bottom-left-corner {
width: var(--margin-left);
height: var(--margin-bottom);
flex: none;
}
.bottom .bottom-right-corner {
width: var(--margin-right);
height: var(--margin-bottom);
flex: none;
}
.bottom > div {
flex-grow: 1;
position: relative;
}
.left {
height: calc(var(--height) - var(--margin-top) - var(--margin-bottom));
width: var(--margin-left);
display: flex;
flex-direction: column;
grid-column: left;
grid-row: page;
}
.left > div {
flex-grow: 1;
position: relative;
}
.page > .area {
grid-column: center;
grid-row: page;
width: 100%;
height: 100%;
}
.page {
counter-increment: page;
}
.page .top > div,
.page .bottom > div {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.page .left > div,
.page .right > div {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}*/
@media screen { @media screen {
.top .top-left-corner, /*.top .top-left-corner,
.top .top-right-corner { .top .top-right-corner {
border: 1px dotted tomato; border: 1px dotted tomato;
} }
...@@ -237,6 +117,6 @@ ...@@ -237,6 +117,6 @@
} }
.left > div { .left > div {
border: 1px dotted sienna; border: 1px dotted sienna;*/
} }
} }
...@@ -2,107 +2,191 @@ ...@@ -2,107 +2,191 @@
@page { @page {
size: 215.9mm 215.9mm; size: 215.9mm 215.9mm;
margin: 15mm 15mm; margin: 15mm 15mm;
} }
header { #couv {
page: cover; page: couv;
} }
@page cover { @page couv {
margin: 2mm 2mm; margin: 2mm 2mm;
background-color:red; background-color: black;
}
@page:blank{
}
/* FONTMATTER -------------------------------------- */
.frontmatter{
page: frontmatter;
break-before: right;
}
@page frontmatter:left {
margin: 30mm 30mm;
}
@page frontmatter {
margin: 30mm 30mm;
} }
#section-auteurs{
page: sectionAuteur; /* BACKMATTER -------------------------------------- */
.backmatter{
page: backmatter;
break-before: right;
} }
@page sectionAuteur:left {
@page backmatter:left {
margin: 30mm 30mm; margin: 30mm 30mm;
background-color:yellow;
} }
@page sectionAuteur { @page backmatter {
margin: 30mm 30mm; margin: 30mm 30mm;
background-color:yellow;
} }
@page:left{
margin-top:15mm;
/* CHAPTER -------------------------------------- */
@page chapter:left{
margin-top:20mm;
margin-bottom:15mm; margin-bottom:15mm;
margin-left:50mm; margin-left:15mm;
margin-right: 15mm; margin-right: 20mm;
@top-left{ @bottom-left{
content: counter(page); content: counter(page);
width: 30px;
margin-top: 20px;
font-family: 'alegreya-sans';
font-weight: 400;
} }
@bottom-center{
width: 650px;
content: "Curiosités Ecridil 2018";
margin-top: 20px;
font-family: 'alegreya-sans';
font-weight: 400;
}
} }
@page:right{ @page chapter:right{
margin-top:15mm; margin-top:20mm;
margin-bottom:15mm; margin-bottom:15mm;
margin-right:50mm; margin-right:15mm;
margin-left: 15mm; margin-left: 12mm;
@bottom-right{
content: counter(page);
text-align: right!important;
margin-top: 20px;
width: 30px;
font-family: 'alegreya-sans';
font-weight: 400;
}
@bottom-center{
content: element(shorter);
text-align:right!important;
width: 650px;
margin-top: 20px;
font-family: 'alegreya-sans';
font-weight: 400;
}
} }
@page chapter:first{
background-color: green;
@bottom-right{
content: "";
/*.area{ }
overflow: visible!important; @bottomcenter{
} content: "";
*/ }
}
.saut{
color: green;
page-break-after: right;
break-after: page;
}
.sidenote { .chapter {
display: block; page: chapter;
break-before: right;
} }
.area-sidenote-left { /* Hack pour mettre les éléments à droite */
width: 150px; .top-center, .top-left, .top-right, .bottom-center, .bottom-left, .bottom-right {
position:absolute; display: block!important;
top:0mm;
left:-45mm;
} }
.area-sidenote-right { .shorter{
width: 150px; position: running(shorter);
position:absolute; text-align: right;
top:0mm; margin: 0!important;
left: 150mm;
} }
/* running title*/
section h1{
string-set: sectiontitle content(text);
}
.fragment {
/*border: 1px solid black;*/
display:flex;
margin-bottom: 3rem;
}
body { .separateur{
counter-reset: appelnote sidenote; width: 50px;
border-top: solid 2px black;
} }
.sidenote { .fragment-left{
display: block; justify-content: space-between;
counter-increment: sidenote;
} }
.fragment-left .main {
margin-right: 40px;
}
.appelnote { .fragment-right{
counter-increment: appelnote; justify-content: space-between;
flex-direction: row-reverse;
} }
.appelnote:before { .fragment-right .main {
content: counter(appelnote); margin-left: 40px;
color: red;
} }
.main {
width: 70%;
height: auto;
}
.glose {
width: 30%;
}
.sidenote:before {
content: counter(sidenote) ". ";
}
\ No newline at end of file
...@@ -21,44 +21,24 @@ window.onload=function(){ ...@@ -21,44 +21,24 @@ window.onload=function(){
{ {
var el = area[a]; var el = area[a];
var sidenote = area[a].getElementsByClassName('sidenote'); var fragment= area[a].getElementsByClassName('fragment');
/* Add sidenotes area */
do {
el = el.parentElement;
if(el.classList.contains(classPageLeft) == true){
/* add sidenote area to the left*/
var target = area[a].children[0];
var areaSidenoteLeft = document.createElement("div");
areaSidenoteLeft.className = 'area-sidenote-left';
target.parentNode.insertBefore(areaSidenoteLeft, target);
}else if(el.classList.contains(classPageRight) == true){
/* add sidenote area to the right*/
var target = area[a].children[0];
var areaSidenoteRight = document.createElement("div");
areaSidenoteRight.className = 'area-sidenote-right';
target.parentNode.insertBefore(areaSidenoteRight, target);
}
} while (!el.classList.contains(classPage));
/* Move sidenotes in sidenotes area */ /* Move sidenotes in sidenotes area */
for(var i = 0; i < sidenote.length; i++) { for(var i = 0; i < fragment.length; i++) {
var elside = sidenote[i]; var elside = fragment[i];