developpement piste finale
This commit is contained in:
sarahgarcin1
parent
221d5abf9a
commit
341b64d33f
122 changed files with 499 additions and 5228 deletions
|
|
@ -251,7 +251,7 @@ blockquote p::before{
|
|||
color: var(--sign-color);
|
||||
/*margin-top: calc(var(--baseline)*1.5);*/
|
||||
text-transform: uppercase;
|
||||
background-color: white;
|
||||
/*background-color: white;*/
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
|
@ -284,6 +284,7 @@ blockquote p::before{
|
|||
|
||||
.chapter-header .title-before {
|
||||
top: calc(var(--baseline)*-2.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.chapter-header .title-after {
|
||||
|
|
|
|||
|
|
@ -3,9 +3,12 @@
|
|||
--pagedjs-fold: 0px;
|
||||
}
|
||||
|
||||
.pagedjs_portfolio_page .pagedjs_sheet{
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
[data-chapter="portfolio"] p{
|
||||
color: white;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.pagedjs_portfolio_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after,
|
||||
|
|
@ -15,63 +18,106 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
[data-chapter="portfolio"] .chapter-header h2 span,
|
||||
[data-chapter="portfolio"] .chapter-header .author span{
|
||||
color: black;
|
||||
padding-right: 0.75ch;
|
||||
}
|
||||
|
||||
|
||||
/* DOUBLE */
|
||||
/* DOUBLE */
|
||||
|
||||
.spread{
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
|
||||
}
|
||||
|
||||
.spread-inner{
|
||||
position: relative;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
|
||||
}
|
||||
|
||||
|
||||
.spread__left{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
break-after: page;
|
||||
}
|
||||
.spread__right{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spread-content{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width)*2 + var(--bleed-images)*2);
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
|
||||
overflow: hidden;
|
||||
break-after: page;
|
||||
}
|
||||
.spread__right{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
left: calc(var(--pagedjs-margin-left)*-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.spread-content{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width)*2 + var(--bleed-images)*2);
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.spread__left .spread-content{
|
||||
left: calc(var(--pagedjs-fold)*-1);
|
||||
}
|
||||
.spread__right .spread-content{
|
||||
left: calc((var(--pagedjs-pagebox-width) + var(--bleed-images))*-1 + var(--pagedjs-fold));
|
||||
}
|
||||
.spread__left .spread-content{
|
||||
left: calc(var(--pagedjs-fold)*-1);
|
||||
}
|
||||
.spread__right .spread-content{
|
||||
left: calc((var(--pagedjs-pagebox-width) + var(--bleed-images))*-1 + var(--pagedjs-fold));
|
||||
}
|
||||
|
||||
|
||||
|
||||
.spread-content img{
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.spread .image__top{
|
||||
z-index: 9000;
|
||||
position: absolute;
|
||||
/*overflow: hidden;*/
|
||||
}
|
||||
|
||||
.spread .image__top img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* SPECIFIC */
|
||||
|
||||
#josefa-1 .spread-content img{
|
||||
.spread .image__top.topleft{
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.spread .image__top.topright{
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.spread .image__top.bottomleft{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.spread .image__top.bottomright{
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.spread .image__top.center{
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* SPECIFIC */
|
||||
|
||||
#josefa-1 .spread-content img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
|
|
|||
|
|
@ -391,34 +391,6 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
figure.bottom { align-self: end;}
|
||||
|
||||
|
||||
/* ------- TABLE OF CONTENTS --------- */
|
||||
/* counters */
|
||||
#list-toc-generated{
|
||||
counter-reset: counterTocLevel1;
|
||||
list-style: none;
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element-level-1{
|
||||
counter-increment: counterTocLevel1;
|
||||
counter-reset: counterTocLevel2;
|
||||
}
|
||||
|
||||
#list-toc-generated a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element a::after{
|
||||
content: target-counter(attr(href), page);
|
||||
position: absolute;
|
||||
right:0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#list-toc-generated li span{
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,9 +7,11 @@
|
|||
/*bleed: 6mm;*/
|
||||
/*marks: crop;*/
|
||||
--symbol-top: 1px;
|
||||
--running-top: 8mm;
|
||||
--symbol2-top: 0px;
|
||||
--running-top: 6mm;
|
||||
--running-bottom: 6mm;
|
||||
--running-left: 19px;
|
||||
--running-left-bottom: 55px;
|
||||
}
|
||||
|
||||
@page:left {
|
||||
|
|
@ -17,7 +19,7 @@
|
|||
margin-right: 26mm;
|
||||
|
||||
@top-left-corner {
|
||||
content: var(--symbol) var(--symbol) var(--symbol);
|
||||
content: var(--symbol2) var(--symbol2) var(--symbol2);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -27,7 +29,8 @@
|
|||
padding-top: var(--running-top);
|
||||
text-align: left;
|
||||
padding-left: var(--running-left);
|
||||
|
||||
position: relative;
|
||||
top: var(--symbol2-top);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -52,12 +55,13 @@
|
|||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
/*margin-left: -12px;*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
@top-right {
|
||||
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -68,23 +72,25 @@
|
|||
width: 100%;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
|
||||
padding-left: 15px;
|
||||
position: relative;
|
||||
top: var(--symbol2-top);
|
||||
}
|
||||
|
||||
@bottom-left {
|
||||
content: counter(page);
|
||||
@bottom-left-corner {
|
||||
content: counter(page) " (";
|
||||
vertical-align: bottom;
|
||||
padding-bottom: var(--running-bottom);
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: var(--sign-size);
|
||||
font-size: 12px;
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
text-align: left;
|
||||
margin-left: 5mm;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -99,7 +105,7 @@
|
|||
margin-right: 18mm;
|
||||
|
||||
@top-left-corner {
|
||||
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -109,7 +115,8 @@
|
|||
padding-top: var(--running-top);
|
||||
text-align: left;
|
||||
padding-left: var(--running-left);
|
||||
|
||||
position: relative;
|
||||
top: var(--symbol2-top);
|
||||
}
|
||||
|
||||
@top-left {
|
||||
|
|
@ -124,7 +131,7 @@
|
|||
}
|
||||
|
||||
@top-right {
|
||||
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -134,19 +141,23 @@
|
|||
padding-top: var(--running-top);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
top: var(--symbol2-top);
|
||||
}
|
||||
|
||||
|
||||
@bottom-right {
|
||||
content: counter(page);
|
||||
@bottom-right-corner {
|
||||
content: ") " counter(page);
|
||||
vertical-align: bottom;
|
||||
padding-bottom: var(--running-bottom);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: var(--sign-size);
|
||||
font-size: var(--sign-size);
|
||||
font-size: 12px;
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
margin-right: 5mm;
|
||||
|
||||
z-index: 100;
|
||||
|
||||
|
|
@ -155,31 +166,20 @@
|
|||
|
||||
|
||||
@page:blank {
|
||||
@top-left {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-left-corner {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-right {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-center {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@bottom-center {
|
||||
content: none;
|
||||
}
|
||||
@top-left { content: none;}
|
||||
@top-left-corner { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@bottom-center { content: none; }
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-title, .nav-author, .nav-type, .nav-decor{
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
position: running(title);
|
||||
|
|
@ -187,6 +187,7 @@
|
|||
|
||||
.nav-author {
|
||||
position: running(author);
|
||||
|
||||
}
|
||||
|
||||
.nav-type {
|
||||
|
|
@ -203,7 +204,7 @@
|
|||
|
||||
|
||||
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after {
|
||||
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
content: var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2) var(--symbol2);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -212,7 +213,7 @@
|
|||
/* padding-left: 1ch; */
|
||||
width: calc(var(--unit) + var(--sub-unit));
|
||||
position: relative;
|
||||
top: var(--symbol-top);
|
||||
top: var(--symbol2-top);
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
|
|
@ -280,25 +281,94 @@
|
|||
break-before: left;
|
||||
}
|
||||
|
||||
|
||||
@page portfolio{
|
||||
--sign-color: var(--green);
|
||||
--sign-color: white;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
[data-chapter="portfolio-bis"]{
|
||||
--sign-color: var(--green);
|
||||
page: portfolioBis;
|
||||
/* ------- TABLE OF CONTENTS --------- */
|
||||
.toc{
|
||||
break-before: left;
|
||||
font-family: var(--fontTitle);
|
||||
text-align: left;
|
||||
font-size: var(--font-size);
|
||||
page: toc;
|
||||
}
|
||||
|
||||
@page toc{
|
||||
margin-top: 10mm;
|
||||
margin-bottom: 10mm;
|
||||
@top-left { content: none;}
|
||||
@top-left-corner { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@bottom-center { content: none; }
|
||||
@bottom-right-corner { content: none; }
|
||||
}
|
||||
|
||||
@page portfolioBis{
|
||||
--sign-color: var(--green);
|
||||
.toc h2{
|
||||
font-family: var(--fontTitle);
|
||||
text-align: left;
|
||||
font-size: var(--font-size);
|
||||
margin-bottom: var(--baseline);
|
||||
}
|
||||
|
||||
/* counters */
|
||||
#list-toc-generated{
|
||||
counter-reset: counterTocLevel1;
|
||||
list-style: none;
|
||||
overflow-x: visible !important;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element-level-1{
|
||||
counter-increment: counterTocLevel1;
|
||||
margin-bottom: calc(var(--baseline) * 1);
|
||||
}
|
||||
|
||||
.toc-essai a span{
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.toc-entretien a span{
|
||||
color: var(--red);
|
||||
}
|
||||
|
||||
.toc-portfolio a span{
|
||||
color: var(--green);
|
||||
}
|
||||
|
||||
#list-toc-generated a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-left: 70px;
|
||||
width: calc(100% - 70px);
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element a::before{
|
||||
content: target-counter(attr(href), page);
|
||||
position: absolute;
|
||||
left:0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#list-toc-generated li span{
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#list-toc-generated li span::before{
|
||||
content: "//////// essai //////////////////////////////////////////";
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element a span::after{
|
||||
content: "— Auteur du texte";
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -25,6 +25,11 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .running-page-bottom{
|
||||
padding-left: var(--running-left-bottom);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.running-page .symbols{
|
||||
flex-shrink: 0;
|
||||
z-index: 20;
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ h3, h4{
|
|||
h3, h4{
|
||||
font-family: var(--sign-family);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
position: relative;
|
||||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
}
|
||||
|
||||
.h3_container,
|
||||
|
|
|
|||
|
|
@ -5,8 +5,6 @@
|
|||
/* position: relative; */
|
||||
orphans: 2;
|
||||
hyphens: 2;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
--pagedjs-fold: 0px;
|
||||
|
||||
--symbol: "/";
|
||||
--symbol2: "-";
|
||||
--unit: 70px;
|
||||
--sub-unit: 17.5px;
|
||||
|
||||
|
|
@ -24,6 +25,14 @@
|
|||
--green: #44d62c;
|
||||
--blue: #0078bf;
|
||||
|
||||
--red: #000;
|
||||
--green: #000;
|
||||
--blue: #000;
|
||||
|
||||
--silver: #8A8D8F;
|
||||
--copper: #a8923f;
|
||||
/* PANTONE 8642 C */
|
||||
|
||||
--border: 4mm; /* à enlever */
|
||||
|
||||
--gap: 8px;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ class numPagesDecor extends Paged.Handler {
|
|||
|
||||
afterRendered(pages){
|
||||
let totalPages = pages.length;
|
||||
let symbol = "/";
|
||||
let symbol = "=";
|
||||
pages.forEach(function(page){
|
||||
let pageElement = page.element;
|
||||
const numPage = parseInt(pageElement.dataset.pageNumber);
|
||||
|
|
@ -23,14 +23,15 @@ class numPagesDecor extends Paged.Handler {
|
|||
symbols.style.wordBreak = "break-all";
|
||||
symbols.style.overflowWrap = "anywhere";
|
||||
|
||||
const dots = document.createElement("div");
|
||||
dots.className = "dots";
|
||||
dots.textContent = ".".repeat(100);
|
||||
// const dots = document.createElement("div");
|
||||
// dots.className = "dots";
|
||||
// dots.textContent = ".".repeat(100);
|
||||
|
||||
const runningPage = document.createElement("div");
|
||||
runningPage.className = "running-page";
|
||||
runningPage.classList.add("running-page-bottom");
|
||||
runningPage.appendChild(symbols);
|
||||
runningPage.appendChild(dots);
|
||||
// runningPage.appendChild(dots);
|
||||
container.appendChild(runningPage);
|
||||
area.after(container);
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue