Compare commits
No commits in common. "main" and "sarah" have entirely different histories.
631 changed files with 2861 additions and 12275 deletions
|
|
@ -9,7 +9,7 @@ blockquote{
|
|||
|
||||
|
||||
blockquote p::before{
|
||||
/* display: none; */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.before-blockquote_container,
|
||||
|
|
|
|||
|
|
@ -2,18 +2,23 @@
|
|||
|
||||
.chapter-header {
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*-2.5);
|
||||
width: calc(100% + 4px);
|
||||
}
|
||||
|
||||
.chapter-header .hgroup {
|
||||
font-size: var(--fs-title);
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
top: calc(var(--baseline)*-0.25 - 2px);
|
||||
margin-bottom: calc(var(--baseline)*3 + 13px);
|
||||
/*padding-right: calc(var(--unit)*2);*/
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.chapter-header .type {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .hgroup h2 {
|
||||
|
|
@ -21,9 +26,10 @@
|
|||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
line-height: calc(var(--sign-baseline)*1.5);
|
||||
/*display: inline;*/
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
margin-top: 1em;
|
||||
margin-top: 0;
|
||||
color: var(--sign-color);
|
||||
|
||||
}
|
||||
|
|
@ -32,6 +38,7 @@
|
|||
padding-left: 0.25ch;
|
||||
padding-right: 0.25ch;
|
||||
box-decoration-break: clone;
|
||||
/*background-color: var(--sign-color);*/
|
||||
padding: 1px 0.25ch;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
@ -39,7 +46,6 @@
|
|||
.chapter-header .author{
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-indent: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -53,17 +59,11 @@
|
|||
.chapter-header .author::before { display: none; }
|
||||
.chapter-header .bio { display: none; }
|
||||
|
||||
|
||||
.chapter-header .icon-type{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .title-between,
|
||||
.hgroup-before,
|
||||
.hgroup-after,
|
||||
.chapter-header .title-before,
|
||||
.chapter-header .title-after,
|
||||
.chapter-header .icon-type,
|
||||
.chapter-header .type-container,
|
||||
.chapter-header .type-separator{
|
||||
.chapter-header .title-between {
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -71,27 +71,22 @@
|
|||
line-height: calc(var(--sign-baseline)*1);
|
||||
}
|
||||
|
||||
.chapter-header .type-container{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.chapter-header .type{
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.chapter-header .title-between,
|
||||
.chapter-header .title-before,
|
||||
.chapter-header .title-after{
|
||||
text-align: center;
|
||||
max-width: 1ch;
|
||||
margin-inline: auto;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.chapter-header .title-between{
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.chapter-header .title-before {
|
||||
top: calc(var(--baseline)*-2.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.chapter-header .title-after {
|
||||
bottom: calc(var(--baseline)*-2.25 + 1px);
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
padding-right: calc(var(--unit)*0.75);
|
||||
position: relative;
|
||||
top: -4px;
|
||||
|
||||
}
|
||||
|
||||
.description-before {
|
||||
|
|
@ -54,62 +53,43 @@
|
|||
top: -3px;
|
||||
}
|
||||
|
||||
.description-after::after{
|
||||
content: "/ /";
|
||||
display: block;
|
||||
text-align: center;
|
||||
max-width: 1ch;
|
||||
margin-inline: auto;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
h5, h6 {
|
||||
h5 {
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
font-weight: normal;
|
||||
|
||||
text-indent: calc(var(--unit) * 0.75);
|
||||
position: relative;
|
||||
font-family: var(--sign-family);
|
||||
|
||||
margin-top: calc(var(--baseline)*1);
|
||||
margin-bottom: calc(var(--baseline)*0);
|
||||
break-after: avoid;
|
||||
|
||||
}
|
||||
|
||||
|
||||
h5::after,
|
||||
h6::after{
|
||||
content: "----";
|
||||
left: -68px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
h5::before,
|
||||
h6::before{
|
||||
content: "@";
|
||||
left: -84px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
h5::after,
|
||||
h6::after,
|
||||
h5::before,
|
||||
h6::before{
|
||||
h5::before, h6::before{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
display: block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pagedjs_right_page h5::before{
|
||||
content: "//////"
|
||||
}
|
||||
|
||||
/* .decor-h6 {
|
||||
.pagedjs_left_page h5{
|
||||
left: -49px;
|
||||
}
|
||||
|
||||
.pagedjs_left_page h5::before{
|
||||
content: "//////"
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
}
|
||||
|
||||
h6::before {
|
||||
content: "//";
|
||||
}
|
||||
|
||||
.decor-h6 {
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -123,4 +103,4 @@ h6::before{
|
|||
.pagedjs_right_page .decor-h6 {
|
||||
left: -80px;
|
||||
top: calc(var(--baseline)*-4.5 + 11px);
|
||||
} */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,36 +5,12 @@ figure{
|
|||
}
|
||||
|
||||
figcaption{
|
||||
margin-top: calc(var(--baseline)*0.5);
|
||||
}
|
||||
|
||||
figcaption::before{
|
||||
content: "(>)";
|
||||
/* font-family: var(--sign-family); */
|
||||
font-size: var(--fs-notes);
|
||||
/* font-family: var(--sign-family);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline); */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 0.8em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
figcaption p{
|
||||
margin: 0;
|
||||
text-indent: 0!important;
|
||||
text-align: left!important;
|
||||
/* text-align: center!important; */
|
||||
font-size: var(--fs-notes);
|
||||
line-height: 14px;
|
||||
font-weight: 500;
|
||||
padding-left: calc(var(--unit) * 0.5);
|
||||
}
|
||||
|
||||
figcaption p::before{
|
||||
display: none;
|
||||
}
|
||||
|
||||
figure[data-ratio] {
|
||||
|
|
@ -55,55 +31,3 @@ figure[data-crop="false"] img {
|
|||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
|
||||
/* --- INTERPAGE ---- */
|
||||
|
||||
.interpage:not(#toc-interpage){
|
||||
break-before: left;
|
||||
}
|
||||
.interpage figure {
|
||||
/*background-color: var(--copper);*/
|
||||
background-color: var(--silver);
|
||||
}
|
||||
|
||||
.interpage figure img {
|
||||
filter: grayscale(100%);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* SPECIFIC */
|
||||
|
||||
#fig-outdoor-computer-club-1{
|
||||
margin: 0;
|
||||
width: calc(var(--unit) * 5);
|
||||
break-before: page;
|
||||
break-after: page;
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
}
|
||||
|
||||
|
||||
#fig-outdoor-computer-club-2,
|
||||
#fig-outdoor-computer-club-3{
|
||||
margin: 0;
|
||||
width: calc(var(--unit) * 6.5);
|
||||
height: var(--pagedjs-height);
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#fig-outdoor-computer-club-2{
|
||||
top: -11px;
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
#fig-outdoor-computer-club-3{
|
||||
break-before: page;
|
||||
break-after: page;
|
||||
top: 6px;
|
||||
}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
.container-following-note {
|
||||
margin-left: calc(var(--unit)*1.5);
|
||||
margin-left: calc(var(--unit)*2);
|
||||
}
|
||||
|
||||
.wrapper__note-call {
|
||||
|
|
@ -41,5 +41,5 @@
|
|||
|
||||
.following-note_marker {
|
||||
position: absolute;
|
||||
left: calc(var(--unit) * 0.75);
|
||||
left: 0;
|
||||
}
|
||||
|
|
@ -3,33 +3,11 @@
|
|||
--pagedjs-fold: 0px;
|
||||
}
|
||||
|
||||
.portfolio{
|
||||
page: portfolio;
|
||||
--margin: 8mm;
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
@page portfolio{
|
||||
background-color: var(--silver);
|
||||
}
|
||||
|
||||
@page portfolio:first{
|
||||
|
||||
@top-left { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@top-right-corner { content: none;}
|
||||
@top-left-corner { content: none; display: none; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pagedjs_portfolio_page .pagedjs_sheet{
|
||||
/* overflow: visible !important; */
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
/* [data-chapter="portfolio"] p{
|
||||
[data-chapter="portfolio"] p{
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
|
|
@ -38,200 +16,10 @@
|
|||
background-color: black;
|
||||
color: white;
|
||||
padding: 0;
|
||||
} */
|
||||
|
||||
|
||||
.portfolio .chapter-header{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
|
||||
.portfolio img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.intro-portfolio{
|
||||
width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
|
||||
position: absolute;
|
||||
left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
|
||||
top: calc(var(--pagedjs-margin-top)*-1 + var(--margin));
|
||||
|
||||
}
|
||||
|
||||
.portfolio-simple-paysage{
|
||||
width: calc(var(--pagedjs-pagebox-width) - var(--margin)*2);
|
||||
position: relative;
|
||||
left: calc(var(--pagedjs-margin-left)*-1 + var(--margin));
|
||||
}
|
||||
|
||||
|
||||
.portfolio-full-page{
|
||||
break-before: page;
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
.portfolio-full-page figure{
|
||||
position: absolute;
|
||||
width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images)*2);
|
||||
height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2);
|
||||
top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
|
||||
left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
|
||||
/* z-index: -1; */
|
||||
}
|
||||
|
||||
|
||||
/* .portfolio-spread-left:not(#fig-elsa-boyer-1){
|
||||
break-before: left;
|
||||
} */
|
||||
|
||||
.portfolio-spread-right{
|
||||
break-before: page;
|
||||
}
|
||||
|
||||
.portfolio-spread figure{
|
||||
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);
|
||||
}
|
||||
|
||||
.portfolio-spread-right figure{
|
||||
left: calc(var(--pagedjs-pagebox-width)*-1 - var(--pagedjs-margin-left) - var(--bleed-images));
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Josefa Ntjam ------------------------------------------------------------ */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#fig-josefa-ntjam-2.portfolio-spread-left,
|
||||
#fig-josefa-ntjam-3.portfolio-spread-left,
|
||||
#fig-josefa-ntjam-4.portfolio-spread-left,
|
||||
#fig-josefa-ntjam-5.portfolio-spread-left{
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
#fig-josefa-ntjam-1 img,
|
||||
#fig-josefa-ntjam-2 img,
|
||||
#fig-josefa-ntjam-3 img,
|
||||
#fig-josefa-ntjam-4 img,
|
||||
#fig-josefa-ntjam-5 img{
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
width: calc(100% - var(--margin)*2 - 5px);
|
||||
left: calc(var(--bleed-images)*2);
|
||||
|
||||
object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
|
||||
}
|
||||
|
||||
#fig-josefa-ntjam-1 img{
|
||||
top: calc(var(--baseline)*20)
|
||||
}
|
||||
|
||||
/* Stephane & Gwenola -------------------------------------------- */
|
||||
|
||||
|
||||
#fig-stephane-degoutin-et-gwenola-wagon-2.portfolio-spread-left{
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
|
||||
#fig-stephane-degoutin-et-gwenola-wagon-2 img{
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
width: calc(100% - var(--margin)*2 - 5px);
|
||||
left: calc(var(--bleed-images)*2);
|
||||
|
||||
object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
}
|
||||
|
||||
|
||||
#fig-stephane-degoutin-et-gwenola-wagon-3{
|
||||
break-before: left;
|
||||
|
||||
}
|
||||
|
||||
#fig-stephane-degoutin-et-gwenola-wagon-3 figure{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
#fig-stephane-degoutin-et-gwenola-wagon-5{
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
#fig-stephane-degoutin-et-gwenola-wagon-6{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* IYO BISSECK -------------------------------------------- */
|
||||
|
||||
|
||||
#fig-iyo-bisseck-1{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
|
||||
#fig-iyo-bisseck-3.portfolio-spread-left,
|
||||
#fig-iyo-bisseck-6.portfolio-spread-left{
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
#fig-iyo-bisseck-3 img,
|
||||
#fig-iyo-bisseck-6 img{
|
||||
object-fit: contain;
|
||||
position: relative;
|
||||
width: calc(100% - var(--margin)*2 - 5px);
|
||||
left: calc(var(--bleed-images)*2);
|
||||
|
||||
object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
}
|
||||
|
||||
|
||||
/* #fig-iyo-bisseck-3 img{
|
||||
object-fit: contain;
|
||||
width: 80%;
|
||||
object-position: calc(var(--margin) + var(--bleed-images)) calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
|
||||
} */
|
||||
|
||||
#fig-iyo-bisseck-4{
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
#fig-iyo-bisseck-5{
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
/* #fig-iyo-bisseck-6 img{
|
||||
position: relative;
|
||||
width: 60%;
|
||||
left: calc(40% - var(--bleed-images));
|
||||
object-fit: contain;
|
||||
object-position: 0px calc(var(--pagedjs-margin-top) + var(--bleed-images));
|
||||
} */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ------ DOUBLE PAGE (SUPPRIMER) ------- */
|
||||
/* ------ DOUBLE PAGE ------- */
|
||||
|
||||
.spread{
|
||||
position: absolute;
|
||||
|
|
@ -257,6 +45,7 @@ break-before: right;
|
|||
left: 0;
|
||||
overflow: hidden;
|
||||
break-after: page;
|
||||
/*break-before: left;*/
|
||||
}
|
||||
.spread__right{
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -72,13 +72,9 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
--pagedjs-full-page: spread;
|
||||
}
|
||||
|
||||
|
||||
.block-type-fullpageimage{
|
||||
break-before: page;
|
||||
break-after: page;
|
||||
}
|
||||
|
||||
.full-bleed-image{
|
||||
break-before: left;
|
||||
page-break-after: always;
|
||||
position: absolute;
|
||||
top: calc(var(--pagedjs-margin-top)*-1 - var(--pagedjs-bleed-top));
|
||||
height: var(--pagedjs-height);
|
||||
|
|
@ -224,7 +220,7 @@ figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
|||
}
|
||||
|
||||
|
||||
.spread-image figure.full-width img,
|
||||
.spread-image figure.full-width img;
|
||||
.full-bleed-image figure.full-width img{
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -12,11 +12,6 @@
|
|||
--running-bottom: 6mm;
|
||||
--running-left: 19px;
|
||||
--running-left-bottom: 55px;
|
||||
|
||||
bleed: 0mm;
|
||||
|
||||
/* bleed: 6mm;
|
||||
marks: crop */
|
||||
}
|
||||
|
||||
@page:left {
|
||||
|
|
@ -60,6 +55,7 @@
|
|||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
/*margin-left: -12px;*/
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -174,6 +170,7 @@
|
|||
@top-left-corner { content: none;}
|
||||
@top-right { content: none; }
|
||||
@top-center { content: none;}
|
||||
@bottom-center { content: none; }
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -257,15 +254,121 @@
|
|||
|
||||
|
||||
[data-chapter="essai"]{
|
||||
--sign-color: var(--blue);
|
||||
page: essai;
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
|
||||
@page essai{
|
||||
--sign-color: var(--blue);
|
||||
}
|
||||
|
||||
[data-chapter="entretien"]{
|
||||
--sign-color: var(--red);
|
||||
page: entretien;
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
@page entretien{
|
||||
--sign-color: var(--red);
|
||||
}
|
||||
|
||||
[data-chapter="portfolio"]{
|
||||
--sign-color: var(--green);
|
||||
--sign-color: white;
|
||||
page: portfolio;
|
||||
break-before: left;
|
||||
}
|
||||
|
||||
@page portfolio{
|
||||
--sign-color: var(--green);
|
||||
--sign-color: white;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* ------- 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; }
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -111,3 +111,9 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
/* TEMP */
|
||||
@page entretien{
|
||||
--sign-color: var(--red);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,34 +4,19 @@ h3, h4{
|
|||
h3, h4{
|
||||
font-family: var(--sign-family);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
position: relative;
|
||||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-top: calc(var(--baseline)*2);
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
h4{
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
h4::before{
|
||||
content: "///";
|
||||
}
|
||||
|
||||
.h3_container,
|
||||
.h4_container{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
h4::before,
|
||||
.subtitle-before,
|
||||
.subtitle-after{
|
||||
letter-spacing:var(--sign-spacing);
|
||||
|
|
@ -56,12 +41,8 @@ h4::before,
|
|||
.subtitle-text{
|
||||
/* background-color: yellow; */
|
||||
flex-grow: 2;
|
||||
position: relative;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.decor-h3{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
|
|
@ -69,7 +50,6 @@ h4::before,
|
|||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,8 @@
|
|||
hyphens: auto;
|
||||
hyphenate-limit-chars: 7 3 2;
|
||||
/* position: relative; */
|
||||
/* orphans: 2;
|
||||
hyphens: 2; */
|
||||
text-indent: calc(var(--unit) * 0.75);
|
||||
position: relative;
|
||||
orphans: 2;
|
||||
hyphens: 2;
|
||||
}
|
||||
|
||||
.chapter h2,
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
|
||||
|
||||
p::before {
|
||||
/* content: "........."; */
|
||||
content: ".........";
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -27,37 +25,15 @@ p::before {
|
|||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: -4px;
|
||||
|
||||
content: "...";
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: calc(var(--unit) * -0.75);
|
||||
top: 7px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
|
||||
.chapter p.first-p,
|
||||
.chapter p.following-title,
|
||||
.chapter p.following-h3,
|
||||
.chapter p.following-h4,
|
||||
.chapter p.following-h5,
|
||||
.chapter p.following-h6{
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
.first-p::before,
|
||||
.following-title::before,
|
||||
.following-h3::before,
|
||||
.following-h4::before,
|
||||
.following-h5::before,
|
||||
.following-h6::before {
|
||||
.following-h3::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ------ BILBIOGRAPHIE ------ */
|
||||
|
||||
.block-type-bibliographie p {
|
||||
|
|
@ -65,8 +41,8 @@ p::before {
|
|||
line-height: 14px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
padding-left: calc(var(--unit)*1.5);
|
||||
text-indent: calc(var(--unit)*-0.5)!important;
|
||||
padding-left: calc(var(--unit)*2);
|
||||
text-indent: calc(var(--unit)*-0.75);
|
||||
break-inside: avoid;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -94,6 +70,3 @@ p::before {
|
|||
|
||||
|
||||
|
||||
sup{
|
||||
line-height: 0;
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
|
||||
/* ------- TABLE OF CONTENTS --------- */
|
||||
.toc{
|
||||
break-before: right;
|
||||
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; }
|
||||
}
|
||||
|
||||
.toc h2{
|
||||
font-size: var(--fs-title);
|
||||
font-family: var(--fontTitle);
|
||||
/* margin-left: calc(var(--unit)*1); */
|
||||
text-align: center;
|
||||
/* margin-bottom: calc(var(--baseline)*2); */
|
||||
}
|
||||
|
||||
.toc h2::after{
|
||||
content: "/ / / /";
|
||||
display: block;
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
max-width: 1ch;
|
||||
margin-top: 0.5rem;
|
||||
/* margin-bottom: 0.5rem; */
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
||||
#list-toc-generated a{
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-left: calc(var(--unit)*1);
|
||||
width: calc(100% - var(--unit));
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#list-toc-generated .toc-element a::before{
|
||||
content: target-counter(attr(href), page);
|
||||
position: absolute;
|
||||
left: calc(var(--unit)*-1);
|
||||
top: calc(var(--baseline)*1.5 + 1px);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#list-toc-generated li .toc-title,
|
||||
#list-toc-generated li .toc-author,
|
||||
#list-toc-generated li .toc-type{
|
||||
display: block;
|
||||
}
|
||||
|
||||
#list-toc-generated li{
|
||||
break-inside: avoid;
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
#list-toc-generated li .toc-type{
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#list-toc-generated li .toc-title{
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--baseline)*0.25);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.toc-type-symbole_before,
|
||||
.toc-type-symbole_after{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
|
||||
}
|
||||
|
||||
.toc-type-symbole_before{
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.toc-type .text{
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1rem;
|
||||
font-size: 0.9em;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.toc-type{
|
||||
white-space: nowrap;
|
||||
margin-left: calc(var(--unit)*-1);
|
||||
}
|
||||
|
||||
.toc-type::before{
|
||||
content: "////";
|
||||
font-size: var(--sign-size);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
|
||||
}
|
||||
|
||||
[data-toc-chapter="entretien"]::after,
|
||||
[data-toc-chapter="portfolio"]::after{
|
||||
content: " /////////////////";
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
[data-toc-chapter="essai"]::after{
|
||||
content: " ///////////////////";
|
||||
left: -6px;
|
||||
}
|
||||
.toc-type::after{
|
||||
font-size: var(--sign-size);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: calc(var(--sign-baseline) * 1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
:root{
|
||||
--bg-type: rgba(232, 232, 5, 0.36);
|
||||
/* --bg-type: transparent; */
|
||||
}
|
||||
|
||||
/* (print-break:) */
|
||||
/* (nbsp:) */
|
||||
|
||||
/* Iyo Bisseck ----------------------------------------------- */
|
||||
|
||||
[data-unique-id="p-wgeujvnqel"]{
|
||||
letter-spacing: -0.015rem;
|
||||
background-color: var(--bg-type);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Outdoor computer club ----------------------------------------------- */
|
||||
|
||||
#tv-communales-televisions-populaires-au-venezuela{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#la-politisation-des-quartiers{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
#une-television-rhizomatique{
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
[data-unique-id="p-lrnspsdlrd"]{
|
||||
letter-spacing: -0.005rem;
|
||||
background-color: var(--bg-type);
|
||||
}
|
||||
|
||||
#des-medias-autonomes-en-2026{
|
||||
break-before: page;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* Olivain Porry ---------------------------------------------------------- */
|
||||
|
||||
[data-unique-id="p-slmeuuadai"]{
|
||||
letter-spacing: -0.01rem;
|
||||
background-color: var(--bg-type);
|
||||
}
|
||||
|
||||
[data-unique-id="p-lrgpboendn"]{
|
||||
letter-spacing: -0.005rem;
|
||||
background-color: var(--bg-type);
|
||||
}
|
||||
|
||||
[data-unique-id="p-ldodgdtepn"]{
|
||||
margin-top: 10px;
|
||||
letter-spacing: -0.005rem;
|
||||
background-color: var(--bg-type);
|
||||
}
|
||||
|
||||
[data-unique-id="p-ldodgdtepn"][data-split-from]{
|
||||
letter-spacing: 0rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-unique-id="p-ldclsdpddn"]{
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#le-langage-est-un-champ-de-bataille{
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
[data-unique-id="p-sllacdnasl"]{
|
||||
letter-spacing: -0.008rem;
|
||||
background-color: var(--bg-type);
|
||||
}
|
||||
|
||||
[data-unique-id="p-sllacdnasl"][data-split-from]{
|
||||
letter-spacing: 0rem;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
[data-unique-id="p-dcclpdldrp"]{
|
||||
letter-spacing: -0.012rem;
|
||||
background-color: var(--bg-type);
|
||||
}
|
||||
|
||||
[data-unique-id="p-dcclpdldrp"][data-split-from]{
|
||||
letter-spacing: -0.005rem;
|
||||
}
|
||||
|
||||
#pour-une-poesie-antagoniste{
|
||||
break-before: page;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
[data-unique-id="p-lfmdcrpudà"]{
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
[data-unique-id="p-durpfeladd"]{
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
#toujours-pas-peur{
|
||||
margin-top: calc(var(--baseline) * 2 - 4px);
|
||||
}
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
--fs-nav: 11px;
|
||||
--fs-subtitle: 16px;
|
||||
--fs-notes: 11px;
|
||||
--fs-title: 22px;
|
||||
|
||||
--red: #ff665e;
|
||||
--green: #44d62c;
|
||||
|
|
@ -30,9 +29,9 @@
|
|||
--green: #000;
|
||||
--blue: #000;
|
||||
|
||||
--silver: rgb(138, 131, 124);
|
||||
--copper: rgb(147, 121, 118);
|
||||
/* PANTONE 10444 C ou 8002 C */
|
||||
--silver: #8A8D8F;
|
||||
--copper: #a8923f;
|
||||
/* PANTONE 8642 C */
|
||||
|
||||
--border: 4mm; /* à enlever */
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@ class asciiTextFill extends Paged.Handler {
|
|||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
|
||||
|
||||
afterRendered(pages) {
|
||||
const PAD = 5;
|
||||
const chars = ["-", "+", "{", "[", "}", "]", ";", "<", ">"];
|
||||
|
|
@ -112,32 +110,81 @@ class asciiTextFill extends Paged.Handler {
|
|||
});
|
||||
|
||||
|
||||
// document.querySelectorAll('.chapter').forEach(chapter => {
|
||||
// // /* ── Titre : h2 + h3 dans .chapter-title ── */
|
||||
// // const titleEl = chapter.querySelector('.chapter-title');
|
||||
// // if(titleEl){
|
||||
// // const titleLinesH3 = Array.from(titleEl.querySelectorAll('h3'))
|
||||
// // .map(n => n.textContent.trim()).filter(Boolean);
|
||||
// // if (titleLinesH3.length) {
|
||||
// // // Supprimer les h2/h3 originaux
|
||||
// // titleEl.querySelectorAll('h3').forEach(el => el.remove());
|
||||
// // const preH3 = document.createElement('pre');
|
||||
// // preH3.textContent = makeBox(titleLinesH3);
|
||||
// // // Insérer la boîte juste après fill-top
|
||||
// // const fillTop = titleEl.querySelector('.fill-top');
|
||||
// // fillTop.insertAdjacentElement('afterend', preH3);
|
||||
// // }
|
||||
// // const titleLinesH2 = Array.from(titleEl.querySelectorAll('h2'))
|
||||
// // .map(n => n.textContent.trim()).filter(Boolean);
|
||||
// // if (titleLinesH2.length) {
|
||||
// // // Supprimer les h2/h3 originaux
|
||||
// // titleEl.querySelectorAll('h2').forEach(el => el.remove());
|
||||
// // const pre = document.createElement('pre');
|
||||
// // pre.textContent = makeBox(titleLinesH2);
|
||||
// // // Insérer la boîte juste après fill-top
|
||||
// // const fillTop = titleEl.querySelector('.fill-top');
|
||||
// // fillTop.insertAdjacentElement('afterend', pre);
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// // /* ── Bio : .biographie dans ce chapter ── */
|
||||
// // const bioEl = chapter.querySelector('.biographie');
|
||||
// // if(bioEl){
|
||||
// // const bioText = Array.from(bioEl.querySelectorAll('p'))
|
||||
// // .map(p => p.textContent.trim()).join(' ');
|
||||
// // const bioInnerW = COLS - 50;
|
||||
|
||||
// // if (bioText) {
|
||||
// // const wrapped = [];
|
||||
// // let cur = '';
|
||||
// // bioText.split(/\s+/).forEach(w => {
|
||||
// // const test = cur ? cur + ' ' + w : w;
|
||||
// // if (test.length <= bioInnerW) { cur = test; }
|
||||
// // else { if (cur) wrapped.push(cur); cur = w; }
|
||||
// // });
|
||||
// // if (cur) wrapped.push(cur);
|
||||
|
||||
// // const border = '|' + '-'.repeat(bioInnerW) + '|';
|
||||
// // const pre = document.createElement('pre');
|
||||
// // pre.textContent = border + '\n\n' + wrapped.join('\n') + '\n\n' + border;
|
||||
// // bioEl.innerHTML = '';
|
||||
// // bioEl.appendChild(pre);
|
||||
// // }
|
||||
// // }
|
||||
|
||||
// const totalH = pages[0].height;
|
||||
// // const fixedH = titleEl.offsetHeight + bioEl.offsetHeight;
|
||||
// const fixedH = (titleEl ? titleEl.offsetHeight : 0) + (bioEl ? bioEl.offsetHeight : 0);
|
||||
// const spare = Math.max(0, totalH - fixedH);
|
||||
|
||||
// const ratios = [1/3, 1/3, 1/3];
|
||||
// const fills = ['.fill-top', '.fill-mid', '.fill-bottom'];
|
||||
|
||||
// fills.forEach((sel, i) => {
|
||||
// const spare = Math.max(0, totalH - fixedH);
|
||||
// const el = chapter.querySelector(sel);
|
||||
// if (!el) return;
|
||||
// const n = Math.max(0, Math.floor((spare * ratios[i]) / lineH));
|
||||
// el.textContent = Array(n).fill(DASH).join('\n');
|
||||
// });
|
||||
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
// Paged.registerHandlers(asciiTextFill);
|
||||
|
||||
function slugify(text) {
|
||||
return text.trim()
|
||||
.toLowerCase()
|
||||
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-');
|
||||
}
|
||||
|
||||
class addHeadingIds extends Paged.Handler {
|
||||
beforeParsed(content) {
|
||||
content.querySelectorAll('h3, h4').forEach(heading => {
|
||||
if (!heading.id) {
|
||||
heading.id = slugify(heading.textContent);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Paged.registerHandlers(addHeadingIds);
|
||||
|
||||
class removeFullPageClass extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
|
|
|
|||
|
|
@ -3,27 +3,9 @@ window.onload = function(){
|
|||
};
|
||||
|
||||
|
||||
function slugify(text) {
|
||||
return text.trim()
|
||||
.toLowerCase()
|
||||
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-');
|
||||
}
|
||||
|
||||
function addHeadingIds(root) {
|
||||
root.querySelectorAll('h3, h4').forEach(heading => {
|
||||
if (!heading.id) {
|
||||
heading.id = slugify(heading.textContent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function init(){
|
||||
let fadeEl = document.getElementById('fade');
|
||||
if (fadeEl) {
|
||||
fadeEl.classList.add('loaded');
|
||||
}
|
||||
addHeadingIds(document);
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
|
||||
class before extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
beforeParsed(content) {
|
||||
paragraphId(content);
|
||||
}
|
||||
}
|
||||
|
||||
Paged.registerHandlers(before);
|
||||
|
||||
|
||||
|
||||
function paragraphId(content) {
|
||||
content.querySelectorAll("p, li").forEach((paragraph, index) => {
|
||||
let words = paragraph.textContent
|
||||
.trim()
|
||||
.split(/\s+/)
|
||||
.map(word => word.replace(/[^\wÀ-ÿ]/g, "")) // Supprime la ponctuation
|
||||
.filter(word => word.length > 0);
|
||||
|
||||
let id = words.slice(0, 10).map(word => word.charAt(0)).join("").toLowerCase();
|
||||
id = "p-" + id;
|
||||
|
||||
if (!id) id = `para-${index}`; // Si le paragraphe est vide, on donne un id par défaut
|
||||
paragraph.dataset.uniqueId = id;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -16,22 +16,22 @@ class subtitlesDecor extends Paged.Handler {
|
|||
return div;
|
||||
}
|
||||
|
||||
createLine(symbol, nodes, prefix = "subtitle") {
|
||||
createLine(symbol, nodes) {
|
||||
const line = document.createElement("span");
|
||||
line.className = `${prefix}-line`;
|
||||
line.className = "subtitle-line";
|
||||
|
||||
const spanBefore = document.createElement("span");
|
||||
spanBefore.className = `${prefix}-before`;
|
||||
spanBefore.className = "subtitle-before";
|
||||
spanBefore.textContent = symbol.repeat(3);
|
||||
line.appendChild(spanBefore);
|
||||
|
||||
const spanText = document.createElement("span");
|
||||
spanText.className = `${prefix}-text`;
|
||||
spanText.className = "subtitle-text";
|
||||
nodes.forEach(node => spanText.appendChild(node));
|
||||
line.appendChild(spanText);
|
||||
|
||||
const spanAfter = document.createElement("span");
|
||||
spanAfter.className = `${prefix}-after`;
|
||||
spanAfter.className = "subtitle-after";
|
||||
spanAfter.textContent = "";
|
||||
line.appendChild(spanAfter);
|
||||
|
||||
|
|
@ -39,8 +39,8 @@ class subtitlesDecor extends Paged.Handler {
|
|||
}
|
||||
|
||||
|
||||
processTitle(subtitle, symbol, withDecor, isLeft, prefix = "subtitle") {
|
||||
if (subtitle.querySelector(`.${prefix}-line`)) return;
|
||||
processTitle(subtitle, symbol, withDecor, isLeft) {
|
||||
if (subtitle.querySelector(".subtitle-line")) return;
|
||||
|
||||
const children = Array.from(subtitle.childNodes);
|
||||
|
||||
|
|
@ -57,15 +57,16 @@ class subtitlesDecor extends Paged.Handler {
|
|||
});
|
||||
segments.push(current);
|
||||
|
||||
// Reconstruire le titre avec des .{prefix}-line
|
||||
// Reconstruire le titre avec des .subtitle-line
|
||||
subtitle.innerHTML = "";
|
||||
segments.filter(seg => seg.length > 0).forEach(nodes => {
|
||||
const line = this.createLine(symbol, nodes, prefix);
|
||||
const line = this.createLine(symbol, nodes);
|
||||
subtitle.appendChild(line);
|
||||
|
||||
const spanAfter = line.querySelector(`.${prefix}-after`);
|
||||
const spanAfter = line.querySelector(".subtitle-after");
|
||||
const baseHeight = line.offsetHeight;
|
||||
let count = 0;
|
||||
// subtitle-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
|
||||
while (count < 300) {
|
||||
count++;
|
||||
spanAfter.textContent = symbol.repeat(count);
|
||||
|
|
@ -76,49 +77,37 @@ class subtitlesDecor extends Paged.Handler {
|
|||
}
|
||||
});
|
||||
|
||||
// if (withDecor) {
|
||||
// const smallSizes = [1, 2, 3, 2, 1];
|
||||
// const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
|
||||
// let firstDecor, secondDecor;
|
||||
// if (isLeft) {
|
||||
// firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
// secondDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
||||
// } else {
|
||||
// firstDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
||||
// secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
// }
|
||||
// const container = document.createElement("div");
|
||||
// container.className = "h3_container " + subtitle.className;
|
||||
// subtitle.className = "";
|
||||
// subtitle.parentNode.insertBefore(container, subtitle);
|
||||
// container.appendChild(firstDecor);
|
||||
// container.appendChild(secondDecor);
|
||||
// container.appendChild(subtitle);
|
||||
// }
|
||||
if (withDecor) {
|
||||
const smallSizes = [1, 2, 3, 2, 1];
|
||||
const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
|
||||
let firstDecor, secondDecor;
|
||||
if (isLeft) {
|
||||
firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
secondDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
||||
} else {
|
||||
firstDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
|
||||
secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
}
|
||||
const container = document.createElement("div");
|
||||
container.className = "h3_container " + subtitle.className;
|
||||
subtitle.className = "";
|
||||
subtitle.parentNode.insertBefore(container, subtitle);
|
||||
container.appendChild(firstDecor);
|
||||
container.appendChild(secondDecor);
|
||||
container.appendChild(subtitle);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
beforeParsed(content){
|
||||
content.querySelectorAll("h3, h4").forEach(subtitle => {
|
||||
const block = subtitle.closest('.block');
|
||||
const nextBlock = block?.nextElementSibling;
|
||||
if (!nextBlock) return;
|
||||
const firstP = nextBlock.querySelector('p');
|
||||
if (!firstP) return;
|
||||
if (subtitle.tagName === "H3") firstP.classList.add("following-h3");
|
||||
if (subtitle.tagName === "H4") firstP.classList.add("following-h4");
|
||||
content.querySelectorAll("h3").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h3");
|
||||
});
|
||||
|
||||
// content.querySelectorAll("h5, h6").forEach(subtitle => {
|
||||
// const nextSibling = subtitle.nextElementSibling;
|
||||
// if (!nextSibling || nextSibling.tagName !== "P") return;
|
||||
// if (subtitle.tagName === "H5") nextSibling.classList.add("following-h5");
|
||||
// if (subtitle.tagName === "H6") nextSibling.classList.add("following-h6");
|
||||
// });
|
||||
content.querySelectorAll(".chapter-content").forEach(chapter => {
|
||||
let pfirst = chapter.querySelector('p');
|
||||
pfirst.classList.add("first-p");
|
||||
content.querySelectorAll("h4").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h4");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -132,29 +121,29 @@ class subtitlesDecor extends Paged.Handler {
|
|||
this.processTitle(subtitle, symbol, true, isLeft);
|
||||
});
|
||||
|
||||
// pageElement.querySelectorAll("h4").forEach(subtitle => {
|
||||
// this.processTitle(subtitle, symbol, false, isLeft);
|
||||
// const container = document.createElement("div");
|
||||
// container.className = "h4_container " + subtitle.className;
|
||||
// subtitle.className = "";
|
||||
// subtitle.parentNode.insertBefore(container, subtitle);
|
||||
// container.appendChild(subtitle);
|
||||
// });
|
||||
pageElement.querySelectorAll("h4").forEach(subtitle => {
|
||||
this.processTitle(subtitle, symbol, false, isLeft);
|
||||
const container = document.createElement("div");
|
||||
container.className = "h4_container " + subtitle.className;
|
||||
subtitle.className = "";
|
||||
subtitle.parentNode.insertBefore(container, subtitle);
|
||||
container.appendChild(subtitle);
|
||||
});
|
||||
|
||||
// pageElement.querySelectorAll("h6").forEach(h6 => {
|
||||
// if (h6.closest(".h6_container")) return;
|
||||
// const smallSizes = [1, 2, 3, 2, 1];
|
||||
// const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
|
||||
// const firstDecor = isLeft
|
||||
// ? this.createDecor(symbol, smallSizes, "decor-h6_small", "decor-h6")
|
||||
// : this.createDecor(symbol, bigSizes, "decor-h6_big", "decor-h6");
|
||||
// const container = document.createElement("div");
|
||||
// container.className = "h6_container " + h6.className;
|
||||
// h6.className = "";
|
||||
// h6.parentNode.insertBefore(container, h6);
|
||||
// container.appendChild(firstDecor);
|
||||
// container.appendChild(h6);
|
||||
// });
|
||||
pageElement.querySelectorAll("h6").forEach(h6 => {
|
||||
if (h6.closest(".h6_container")) return;
|
||||
const smallSizes = [1, 2, 3, 2, 1];
|
||||
const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
|
||||
const firstDecor = isLeft
|
||||
? this.createDecor(symbol, smallSizes, "decor-h6_small", "decor-h6")
|
||||
: this.createDecor(symbol, bigSizes, "decor-h6_big", "decor-h6");
|
||||
const container = document.createElement("div");
|
||||
container.className = "h6_container " + h6.className;
|
||||
h6.className = "";
|
||||
h6.parentNode.insertBefore(container, h6);
|
||||
container.appendChild(firstDecor);
|
||||
container.appendChild(h6);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -10,13 +10,15 @@ class followingNotes extends Paged.Handler {
|
|||
super(chunker, polisher, caller);
|
||||
this.notesClass = ".inline-note";
|
||||
this.newNotesClass = "following-note";
|
||||
this.reset = ".chapter";
|
||||
// this.reset = this.parameters?.reset;
|
||||
// this.align = this.parameters?.align;
|
||||
this.followingNoteOverflow = new Set();
|
||||
}
|
||||
|
||||
beforeParsed(content) {
|
||||
|
||||
console.log("floatnotes");
|
||||
|
||||
let newNotesClass = this.newNotesClass;
|
||||
resetCounter(content, this.reset, this.notesClass);
|
||||
createCallandMarker(content, this.notesClass, newNotesClass);
|
||||
|
|
|
|||
296
assets/js/plugins/full-page.js
Normal file
296
assets/js/plugins/full-page.js
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
let bleedFull = '6mm';
|
||||
let cssFullSpread = `.pagedjs_page_fullLeft .pagedjs_full-spread_container{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
|
||||
height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2) !important;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + `+ bleedFull + `)*-1);
|
||||
left: calc((var(--pagedjs-margin-left) + `+ bleedFull + `)*-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagedjs_page_fullRight .pagedjs_full-spread_container{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
|
||||
height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2) !important;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + `+ bleedFull + `)*-1);
|
||||
left: calc(var(--pagedjs-margin-left)*-1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagedjs_full-spread_content{
|
||||
margin: 0;
|
||||
width: calc(var(--pagedjs-pagebox-width)*2 + `+ bleedFull + `*2);
|
||||
height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2) !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.pagedjs_page_fullLeft .pagedjs_full-spread_content{
|
||||
left: calc(var(--pagedjs-fold)*-1);
|
||||
}
|
||||
.pagedjs_page_fullRight .pagedjs_full-spread_content{
|
||||
left: calc((var(--pagedjs-pagebox-width) + `+ bleedFull + `)*-1 + var(--pagedjs-fold))
|
||||
}`;
|
||||
|
||||
|
||||
let cssFullPage = `
|
||||
.pagedjs_full-page_content {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: calc((var(--pagedjs-margin-top) + `+ bleedFull + `)*-1);
|
||||
}
|
||||
.pagedjs_left_page .pagedjs_full-page_content {
|
||||
width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
|
||||
height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2);
|
||||
left: calc((var(--pagedjs-margin-left) + `+ bleedFull + `)*-1);
|
||||
|
||||
}
|
||||
.pagedjs_right_page .pagedjs_full-page_content {
|
||||
width: calc(var(--pagedjs-pagebox-width) + `+ bleedFull + `);
|
||||
height: calc(var(--pagedjs-pagebox-height) + `+ bleedFull + `*2);
|
||||
left: calc(var(--pagedjs-margin-left)*-1);
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
||||
class fullPageImage extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.selectorFullSpread = new Set();
|
||||
this.fullSpreadEls = new Set();
|
||||
this.selectorFullPage = new Set();
|
||||
this.fullPageEls = new Set();
|
||||
this.selectorFullRight = new Set();
|
||||
this.fullRightEls = new Set();
|
||||
this.selectorFullLeft= new Set();
|
||||
this.fullLeftEls = new Set();
|
||||
this.usedPagedEls = new Set();
|
||||
}
|
||||
|
||||
onDeclaration(declaration, dItem, dList, rule) {
|
||||
// Read customs properties
|
||||
if (declaration.property == "--pagedjs-full-page") {
|
||||
// get selector of the declaration (NOTE: need csstree.js)
|
||||
let selector = csstree.generate(rule.ruleNode.prelude);
|
||||
// Push selector in correct set
|
||||
if (declaration.value.value.includes("page")) {
|
||||
this.selectorFullPage.add(selector);
|
||||
}else if(declaration.value.value.includes("spread")) {
|
||||
this.selectorFullSpread.add(selector);
|
||||
}else if(declaration.value.value.includes("right")) {
|
||||
this.selectorFullRight.add(selector);
|
||||
}else if(declaration.value.value.includes("left")) {
|
||||
this.selectorFullLeft.add(selector);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
afterParsed(parsed){
|
||||
// ADD global css
|
||||
addcss(cssFullSpread);
|
||||
addcss(cssFullPage);
|
||||
// ADD pagedjs classes to elements
|
||||
for (let item of this.selectorFullPage) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullSpread) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-spread-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullLeft) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-left-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullRight) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-right-elem");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
renderNode(clone, node) {
|
||||
// FULL SPREAD
|
||||
// if you find a full page element, move it in the array
|
||||
if (node.nodeType == 1 && node.classList.contains("pagedjs_full-spread-elem")) {
|
||||
this.fullSpreadEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
|
||||
// remove the element from the flow by hiding it.
|
||||
clone.style.display = "none";
|
||||
}
|
||||
|
||||
// FULL PAGE
|
||||
if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-left-elem")) {
|
||||
this.fullLeftEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-right-elem")) {
|
||||
this.fullRightEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-elem")) {
|
||||
this.fullPageEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken, chunker) {
|
||||
|
||||
// ADD --pagedjs-fold on body if doesn't exist
|
||||
if(pageElement.classList.contains("pagedjs_first_page")){
|
||||
let body = document.getElementsByTagName("body")[0];
|
||||
let style = window.getComputedStyle(body);
|
||||
let fold = style.getPropertyValue('--pagedjs-fold');
|
||||
if(!fold){
|
||||
body.style.setProperty('--pagedjs-fold', '0mm')
|
||||
}
|
||||
}
|
||||
|
||||
// FULL SPREAD
|
||||
// if there is an element in the fullSpreadEls Set, (goodbye arrays!)
|
||||
|
||||
for (let img of this.fullSpreadEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_right_page")) {
|
||||
|
||||
let imgLeft;
|
||||
let imgRight;
|
||||
|
||||
if (img.nodeName == "IMG") {
|
||||
/* Add outside + inside container if the element is an img */
|
||||
let containerLeft = document.createElement("div");
|
||||
containerLeft.classList.add("pagedjs_full-spread_container");
|
||||
let containerLeftInside = document.createElement("div");
|
||||
containerLeftInside.classList.add("pagedjs_full-spread_content");
|
||||
containerLeft.appendChild(containerLeftInside).appendChild(img);
|
||||
imgLeft = containerLeft;
|
||||
|
||||
let containerRight = document.createElement("div");
|
||||
containerRight.classList.add("pagedjs_full-spread_container");
|
||||
let containerRightInside = document.createElement("div");
|
||||
containerRightInside.classList.add("pagedjs_full-spread_content");
|
||||
containerRight.appendChild(containerRightInside).appendChild(img.cloneNode(true));
|
||||
imgRight = containerRight;
|
||||
|
||||
} else {
|
||||
/* Add outside container if the element is an img */
|
||||
let containerLeft = document.createElement("div");
|
||||
containerLeft.classList.add("pagedjs_full-spread_container");
|
||||
img.classList.add("pagedjs_full-spread_content");
|
||||
containerLeft.appendChild(img);
|
||||
imgLeft = containerLeft;
|
||||
let containerRight = document.createElement("div");
|
||||
containerRight.classList.add("pagedjs_full-spread_container");
|
||||
img.classList.add("pagedjs_full-spread_content");
|
||||
containerRight.appendChild(img.cloneNode(true));
|
||||
imgRight = containerRight;
|
||||
|
||||
}
|
||||
|
||||
// put the first element on the page
|
||||
let fullPage = chunker.addPage();
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", imgLeft);
|
||||
fullPage.element.classList.add("pagedjs_page_fullLeft");
|
||||
|
||||
// page right
|
||||
let fullPageRight = chunker.addPage();
|
||||
fullPageRight.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", imgRight);
|
||||
fullPageRight.element.classList.add("pagedjs_page_fullRight");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullSpreadEls.delete(img);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FULL PAGE
|
||||
// if there is an element in the fullPageEls Set
|
||||
for (let img of this.fullPageEls) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullPageEls.delete(img);
|
||||
}
|
||||
|
||||
// FULL Left PAGE
|
||||
// if there is an element in the fullLeftEls Set
|
||||
for (let img of this.fullLeftEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_right_page")) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullLeftEls.delete(img);
|
||||
}
|
||||
}
|
||||
|
||||
// FULL RIGHT PAGE
|
||||
// if there is an element in the fullRightEls Set
|
||||
for (let img of this.fullRightEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_left_page")) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullRightEls.delete(img);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
Paged.registerHandlers(fullPageImage);
|
||||
|
||||
|
||||
function addcss(css){
|
||||
var head = document.getElementsByTagName('head')[0];
|
||||
var s = document.createElement('style');
|
||||
s.setAttribute('type', 'text/css');
|
||||
if (s.styleSheet) { // IE
|
||||
s.styleSheet.cssText = css;
|
||||
} else {// the world
|
||||
s.appendChild(document.createTextNode(css));
|
||||
}
|
||||
head.appendChild(s);
|
||||
}
|
||||
|
|
@ -1,291 +1,56 @@
|
|||
/**
|
||||
* @name Full page
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/fullPage }
|
||||
*/
|
||||
let bleedFull = '6mm';
|
||||
// ---- C O R R E C T P O S I T I O N O F I M A G E S ----
|
||||
|
||||
class fullPage extends Paged.Handler {
|
||||
var classElemFullPage = "full-page"; // ← class of full page images
|
||||
|
||||
|
||||
class fullPageStuff extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.selectorFullSpread = new Set();
|
||||
this.fullSpreadEls = new Set();
|
||||
this.selectorFullPage = new Set();
|
||||
this.fullPageEls = new Set();
|
||||
this.selectorFullRight = new Set();
|
||||
this.fullRightEls = new Set();
|
||||
this.selectorFullLeft= new Set();
|
||||
this.fullLeftEls = new Set();
|
||||
this.usedPagedEls = new Set();
|
||||
this.specificPage = new Set();
|
||||
this.specificPageClone = new Set();
|
||||
}
|
||||
|
||||
|
||||
//find from the css the element you wanna have full page
|
||||
onDeclaration(declaration, dItem, dList, rule) {
|
||||
// Read customs properties
|
||||
if (declaration.property == "--pagedjs-full-page") {
|
||||
// get selector of the declaration (NOTE: need csstree.js)
|
||||
let selector = csstree.generate(rule.ruleNode.prelude);
|
||||
// Push selector in correct set
|
||||
if (declaration.value.value.includes("page")) {
|
||||
this.selectorFullPage.add(selector);
|
||||
}else if(declaration.value.value.includes("spread")) {
|
||||
this.selectorFullSpread.add(selector);
|
||||
}else if(declaration.value.value.includes("right")) {
|
||||
this.selectorFullRight.add(selector);
|
||||
}else if(declaration.value.value.includes("left")) {
|
||||
this.selectorFullLeft.add(selector);
|
||||
}else{
|
||||
let obj = { page: declaration.value.value, elem: selector };
|
||||
this.specificPage.add(JSON.stringify(obj));
|
||||
|
||||
if (declaration.property == "position") {
|
||||
if (declaration.value.children.head.data.name.includes("fullpage")) {
|
||||
let sel = csstree.generate(rule.ruleNode.prelude);
|
||||
sel = sel.replace('[data-id="', "#");
|
||||
sel = sel.replace('"]', "");
|
||||
this.floatFullPage.push(sel.split(","));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
afterParsed(parsed){
|
||||
|
||||
console.log("FULL PAGE loaded");
|
||||
|
||||
// ADD pagedjs classes to elements
|
||||
for (let item of this.selectorFullPage) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullSpread) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-spread-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullLeft) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-left-elem");
|
||||
}
|
||||
}
|
||||
for (let item of this.selectorFullRight) {
|
||||
let elems = parsed.querySelectorAll(item);
|
||||
for (let elem of elems) {
|
||||
elem.classList.add("pagedjs_full-page-right-elem");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// SPECIFIC PAGE ------------------------------------
|
||||
this.specificPage.forEach(entry => {
|
||||
const obj = JSON.parse(entry);
|
||||
const elements = parsed.querySelectorAll(obj.elem);
|
||||
if (elements.length > 0) {
|
||||
// pourquoi c’est ajouté même si l’élément n’existe pas ?
|
||||
elements[0].classList.add("pagedjs_full-page-specific");
|
||||
const clone = elements[0].cloneNode(true);
|
||||
obj.elemClone = clone.outerHTML;
|
||||
elements[0].remove();
|
||||
}
|
||||
this.specificPageClone.add(JSON.stringify(obj));
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
renderNode(clone, node) {
|
||||
// FULL SPREAD
|
||||
// if you find a full page element, move it in the array
|
||||
if (node.nodeType == 1 && node.classList.contains("pagedjs_full-spread-elem")) {
|
||||
this.fullSpreadEls.add(node);
|
||||
if (node.nodeType == 1 && node.classList.contains(classElemFullPage)) {
|
||||
// console.log(node);
|
||||
this.fullPageEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
|
||||
// remove the element from the flow by hiding it.
|
||||
clone.style.display = "none";
|
||||
}
|
||||
|
||||
// FULL PAGE
|
||||
if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-left-elem")) {
|
||||
this.fullLeftEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-right-elem")) {
|
||||
this.fullRightEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}else if (node.nodeType == 1 && node.classList.contains("pagedjs_full-page-elem")) {
|
||||
this.fullPageEls.add(node);
|
||||
this.usedPagedEls.add(node);
|
||||
clone.style.display = "none";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken, chunker) {
|
||||
// if there is an element in the fullPageEls Set, (goodbye arrays!)
|
||||
|
||||
if(page.id == "page-1"){
|
||||
let allPages = document.querySelector(".pagedjs_pages");
|
||||
allPages.style.setProperty('--bleed-images', bleedFull);
|
||||
}
|
||||
|
||||
// ADD --pagedjs-fold on body if doesn't exist
|
||||
if(pageElement.classList.contains("pagedjs_first_page")){
|
||||
let body = document.getElementsByTagName("body")[0];
|
||||
let style = window.getComputedStyle(body);
|
||||
let fold = style.getPropertyValue('--pagedjs-fold');
|
||||
if(!fold){
|
||||
body.style.setProperty('--pagedjs-fold', '0mm')
|
||||
}
|
||||
}
|
||||
|
||||
// FULL SPREAD
|
||||
// if there is an element in the fullSpreadEls Set, (goodbye arrays!)
|
||||
|
||||
for (let img of this.fullSpreadEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_right_page")) {
|
||||
|
||||
let imgLeft;
|
||||
let imgRight;
|
||||
|
||||
if (img.nodeName == "IMG") {
|
||||
/* Add outside + inside container if the element is an img */
|
||||
let containerLeft = document.createElement("div");
|
||||
containerLeft.classList.add("pagedjs_full-spread_container");
|
||||
let containerLeftInside = document.createElement("div");
|
||||
containerLeftInside.classList.add("pagedjs_full-spread_content");
|
||||
containerLeft.appendChild(containerLeftInside).appendChild(img);
|
||||
imgLeft = containerLeft;
|
||||
|
||||
let containerRight = document.createElement("div");
|
||||
containerRight.classList.add("pagedjs_full-spread_container");
|
||||
let containerRightInside = document.createElement("div");
|
||||
containerRightInside.classList.add("pagedjs_full-spread_content");
|
||||
containerRight.appendChild(containerRightInside).appendChild(img.cloneNode(true));
|
||||
imgRight = containerRight;
|
||||
|
||||
} else {
|
||||
/* Add outside container if the element is an img */
|
||||
let containerLeft = document.createElement("div");
|
||||
containerLeft.classList.add("pagedjs_full-spread_container");
|
||||
img.classList.add("pagedjs_full-spread_content");
|
||||
containerLeft.appendChild(img);
|
||||
imgLeft = containerLeft;
|
||||
let containerRight = document.createElement("div");
|
||||
containerRight.classList.add("pagedjs_full-spread_container");
|
||||
img.classList.add("pagedjs_full-spread_content");
|
||||
containerRight.appendChild(img.cloneNode(true));
|
||||
imgRight = containerRight;
|
||||
|
||||
}
|
||||
|
||||
// put the first element on the page
|
||||
let fullPage = chunker.addPage();
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", imgLeft);
|
||||
fullPage.element.classList.add("pagedjs_page_fullLeft");
|
||||
|
||||
// page right
|
||||
let fullPageRight = chunker.addPage();
|
||||
fullPageRight.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", imgRight);
|
||||
fullPageRight.element.classList.add("pagedjs_page_fullRight");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullSpreadEls.delete(img);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FULL PAGE
|
||||
// if there is an element in the fullPageEls Set
|
||||
for (let img of this.fullPageEls) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
.insertAdjacentElement("afterbegin", img);
|
||||
fullPage.element.classList.add("addedpage");
|
||||
fullPage.element.classList.add("pagedjs_named_page");
|
||||
fullPage.element.classList.add("pagedjs_pagedjs-fullpage_page");
|
||||
if(img.classList.contains('background-black')){
|
||||
fullPage.element.classList.add("pagedjs_pagedjs-fullpageblack_page");
|
||||
}
|
||||
this.fullPageEls.delete(img);
|
||||
}
|
||||
|
||||
// FULL Left PAGE
|
||||
// if there is an element in the fullLeftEls Set
|
||||
for (let img of this.fullLeftEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_right_page")) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullLeftEls.delete(img);
|
||||
}
|
||||
}
|
||||
|
||||
// FULL RIGHT PAGE
|
||||
// if there is an element in the fullRightEls Set
|
||||
for (let img of this.fullRightEls) {
|
||||
|
||||
if (page.element.classList.contains("pagedjs_left_page")) {
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.appendChild(img);
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
img.style.removeProperty("display");
|
||||
|
||||
this.fullRightEls.delete(img);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// SPECIFIC PAGE ------------------------------------
|
||||
let pageNum = pageElement.id.split('page-')[1];
|
||||
pageNum = parseInt(pageNum);
|
||||
|
||||
this.specificPageClone.forEach(entry => {
|
||||
const obj = JSON.parse(entry);
|
||||
let targetedPage = obj.page;
|
||||
let prevPage = parseInt(targetedPage) - 1;
|
||||
|
||||
let elem = obj.elemClone;
|
||||
|
||||
if(prevPage == pageNum){
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("pagedjs_full-page_content");
|
||||
container.innerHTML = elem;
|
||||
let fullPage = chunker.addPage();
|
||||
|
||||
fullPage.element
|
||||
.querySelector(".pagedjs_page_content")
|
||||
.insertAdjacentElement("afterbegin", container);
|
||||
fullPage.element.classList.add("pagedjs_page_fullPage");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Paged.registerHandlers(fullPage);
|
||||
Paged.registerHandlers(fullPageStuff);
|
||||
|
|
@ -49,86 +49,6 @@ class Booklet extends Paged.Handler {
|
|||
}
|
||||
|
||||
|
||||
/* SPREAD (PLANCHE) ------------------------------------------------*/
|
||||
window.addEventListener("beforeprint", () => {
|
||||
if (!window.enableSpread) return;
|
||||
injectSpreadCSS();
|
||||
});
|
||||
|
||||
window.addEventListener("afterprint", () => {
|
||||
window.enableSpread = false;
|
||||
let s = document.getElementById("spread-planche-style");
|
||||
if (s) s.remove();
|
||||
});
|
||||
|
||||
function injectSpreadCSS() {
|
||||
let format = document.querySelector(".pagedjs_page");
|
||||
|
||||
let width = getCSSCustomProp("--pagedjs-width", format);
|
||||
let numbers = width.match(/[0-9]+/g).map(n => +n);
|
||||
width = parseInt(numbers[0]);
|
||||
|
||||
let height = getCSSCustomProp("--pagedjs-height", format);
|
||||
numbers = height.match(/[0-9]+/g).map(n => +n);
|
||||
height = numbers.reduce((a, b) => a + b);
|
||||
|
||||
let bleedNum = parseInt(getCSSCustomProp("--pagedjs-bleed-top", format));
|
||||
|
||||
let spread = width * 2 + bleedNum * 2;
|
||||
let spreadHalf = width + bleedNum;
|
||||
|
||||
let styleSpread = document.createElement("style");
|
||||
styleSpread.id = "spread-planche-style";
|
||||
styleSpread.textContent = `
|
||||
@media print {
|
||||
@page { size: ${spread}mm ${height}mm; }
|
||||
.pagedjs_pages { width: auto; }
|
||||
}
|
||||
@media screen {
|
||||
.pagedjs_pages { max-width: calc(var(--pagedjs-width) * 2); }
|
||||
}
|
||||
.pagedjs_pages {
|
||||
display: flex !important;
|
||||
flex-wrap: wrap;
|
||||
transform: none !important;
|
||||
height: 100% !important;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: visible;
|
||||
}
|
||||
.pagedjs_page {
|
||||
margin: 0; padding: 0;
|
||||
max-height: 100%; min-height: 100%; height: 100% !important;
|
||||
}
|
||||
.pagedjs_sheet {
|
||||
margin: 0; padding: 0;
|
||||
max-height: 100%; min-height: 100%; height: 100% !important;
|
||||
}
|
||||
body { --pagedjs-bleed-right-left: 0mm; margin: 0; }
|
||||
.pagedjs_left_page {
|
||||
z-index: 20;
|
||||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width)) !important;
|
||||
}
|
||||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { border-color: transparent; }
|
||||
.pagedjs_right_page,
|
||||
.pagedjs_right_page .pagedjs_sheet {
|
||||
width: calc(var(--pagedjs-bleed-right-right) + var(--pagedjs-pagebox-width)) !important;
|
||||
}
|
||||
.pagedjs_right_page .pagedjs_sheet {
|
||||
grid-template-columns: [bleed-left] var(--pagedjs-bleed-right-left) [sheet-center] 1fr [bleed-right] var(--pagedjs-bleed-right-right);
|
||||
}
|
||||
.pagedjs_right_page .pagedjs_bleed-left { display: none; }
|
||||
.pagedjs_right_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(1),
|
||||
.pagedjs_right_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(1) { width: 0 !important; }
|
||||
.pagedjs_first_page { margin-left: 0; }
|
||||
.pagedjs_page:nth-of-type(even) { break-after: always; }
|
||||
.pagedjs_page, .pagedjs_sheet { width: ${spreadHalf - 0.1}mm !important; }
|
||||
.pagedjs_page:nth-of-type(1) { margin-left: ${spreadHalf}mm !important; }
|
||||
`;
|
||||
document.head.appendChild(styleSpread);
|
||||
}
|
||||
/* ----------------------------------------------------------------*/
|
||||
|
||||
// Bouton pour activer/désactiver l'imposition
|
||||
const imposeButton = document.querySelector("#imposition-toggle");
|
||||
let styleElement; // Variable pour stocker l'élément <style>
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
/**
|
||||
* @name Move Elems v1.0
|
||||
* @author Julie Blanc <contact@julie-blanc.fr>
|
||||
* @see { @link https://gitlab.com/csspageweaver/plugins/moveElems }
|
||||
*/
|
||||
|
||||
class moveElems extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.selectorMoveElem = new Set();
|
||||
}
|
||||
|
||||
onDeclaration(declaration, dItem, dList, rule) {
|
||||
|
||||
if (declaration.property == "--x-move-elem") {
|
||||
let selector = csstree.generate(rule.ruleNode.prelude);
|
||||
let value = declaration.value.value
|
||||
let doubleArray = [selector, value];
|
||||
this.selectorMoveElem.add(doubleArray);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
afterParsed(parsed){
|
||||
|
||||
console.log("MOVE ELEMS LOADED");
|
||||
|
||||
// ADD data to move elements
|
||||
for (let item of this.selectorMoveElem) {
|
||||
let elem = parsed.querySelector(item[0]);
|
||||
if(elem){
|
||||
elem.dataset.moveImg = item[1];
|
||||
}
|
||||
}
|
||||
|
||||
moveElem(parsed);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Paged.registerHandlers(moveElems);
|
||||
|
||||
|
||||
function moveElem(parsed){
|
||||
let elems = parsed.querySelectorAll('[data-move-img]');
|
||||
for (let elem of elems) {
|
||||
let n = parseInt(elem.getAttribute('data-move-img'));
|
||||
let newPlace
|
||||
if(n < 0){
|
||||
newPlace = elem.previousSibling;
|
||||
if (newPlace.nodeType !== Node.ELEMENT_NODE) {
|
||||
newPlace = newPlace.previousSibling
|
||||
}
|
||||
n = n*-1 - 1;
|
||||
for(let i = 0; i < n; i++){
|
||||
newPlace = newPlace.previousSibling
|
||||
if (newPlace.nodeType !== Node.ELEMENT_NODE) {
|
||||
newPlace = newPlace.previousSibling
|
||||
}
|
||||
}
|
||||
}else{
|
||||
newPlace = elem.nextSibling;
|
||||
if (newPlace.nodeType !== Node.ELEMENT_NODE) {
|
||||
newPlace = newPlace.nextSibling;
|
||||
}
|
||||
for(let i = 0; i < n; i++){
|
||||
newPlace = newPlace.nextSibling;
|
||||
if (newPlace.nodeType !== Node.ELEMENT_NODE) {
|
||||
newPlace = newPlace.nextSibling;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
newPlace.parentNode.insertBefore(elem, newPlace);
|
||||
// do next = next.nextSibling; while(next && next.nodeType !== 1);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
|
||||
class portfolio extends Paged.Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
beforeParsed(content) {
|
||||
portfolioSpread(content);
|
||||
}
|
||||
|
||||
|
||||
// delete running title page 2
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
if(pageElement.classList.contains("pagedjs_portfolio_page") && pageElement.querySelector(".chapter-header")){
|
||||
pageElement.querySelector(".pagedjs_margin-top").style.display = "none";
|
||||
pageElement.querySelector(".pagedjs_margin-top-left-corner-holder").style.display = "none";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Paged.registerHandlers(portfolio);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
function portfolioSpread(content){
|
||||
content.querySelectorAll('.portfolio-spread').forEach(block => {
|
||||
const clone = block.cloneNode(true);
|
||||
clone.classList.add('portfolio-spread-right');
|
||||
block.classList.add('portfolio-spread-left');
|
||||
block.parentNode.insertBefore(clone, block.nextSibling);
|
||||
});
|
||||
}
|
||||
|
|
@ -97,19 +97,8 @@ function createToc(config) {
|
|||
}
|
||||
}
|
||||
|
||||
const chapter = tocElement.closest('.chapter');
|
||||
const author = chapter?.querySelector('.nav-author')?.textContent || '';
|
||||
const chapterType = chapter?.dataset.chapter || '';
|
||||
tocNewLi.dataset.author = author;
|
||||
if (chapterType) tocNewLi.classList.add('toc-' + chapterType);
|
||||
const typeSymbols = { entretien: '@', portfolio: '+', essai: '*' };
|
||||
const symbol = typeSymbols[chapterType] || '';
|
||||
tocNewLi.innerHTML =
|
||||
'<a class="toc-link" href="#' + tocElement.id + '">' +
|
||||
(chapterType ? '<span class="toc-type" data-toc-chapter="' + chapterType + '">' + (symbol ? '<span class="toc-type-symbole_before">' + symbol + '</span>' : '') + '<span class="text">' + chapterType + ' </span>' + (symbol ? '<span class="toc-type-symbole_after">' + symbol + '</span>' : '') + '</span>' : '') +
|
||||
'<span class="toc-title">' + tocElement.innerHTML + '</span>' +
|
||||
(author ? '<span class="toc-author">' + author + '</span>' : '') +
|
||||
'</a>';
|
||||
'<a class="toc-link" href="#' + tocElement.id + '">' + tocElement.innerHTML + '</a>';
|
||||
|
||||
tocUl.appendChild(tocNewLi)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -329,7 +329,6 @@ form {
|
|||
#label-black-toggle,
|
||||
#button-print,
|
||||
#button-print-spread,
|
||||
#button-print-planche,
|
||||
#quality-toggle {
|
||||
border: 1px solid var(--color-interface-header);
|
||||
border-radius: 2px;
|
||||
|
|
@ -351,7 +350,6 @@ form {
|
|||
#label-black-toggle:hover,
|
||||
#button-print:hover,
|
||||
#button-print-spread:hover,
|
||||
#button-print-planche:hover,
|
||||
#quality-toggle:hover {
|
||||
background-color: #000;
|
||||
color: #FFF;
|
||||
|
|
|
|||
|
|
@ -27,6 +27,23 @@
|
|||
</div>
|
||||
<div class="reset-this" id="header-group-right">
|
||||
<div class="reset-this header-group" id="buttons">
|
||||
<form class="reset-this" id="layer-form">
|
||||
<label class="reset-this" for="layer-select">Sélection de couche</label>
|
||||
<select class="reset-this" id="layer-select" name="layer-select">
|
||||
<option value="">Toutes</option>
|
||||
<option value="red-layer">Rouge</option>
|
||||
<option value="green-layer">Verte</option>
|
||||
<option value="blue-layer">Bleue</option>
|
||||
<option value="black-layer">Noire</option>
|
||||
</select>
|
||||
</form>
|
||||
<form class="reset-this" id="black-form">
|
||||
<input class="reset-this" type="checkbox" id="black-toggle" name="black-toggle">
|
||||
<label class="reset-this"for="black-toggle" id="label-black-toggle">
|
||||
Noir et blanc
|
||||
</label>
|
||||
</form>
|
||||
<br>
|
||||
<form class="reset-this" id="preview-form">
|
||||
<input class="reset-this" type="checkbox" id="preview-toggle" name="preview-toggle">
|
||||
<label class="reset-this"for="preview-toggle" id="label-preview-toggle">
|
||||
|
|
@ -41,8 +58,5 @@
|
|||
<button class="reset-this" id="button-print-spread" data-ready="false" data-text="Print Spread">
|
||||
Exporter le PDF imposé
|
||||
</button>
|
||||
<button class="reset-this" id="button-print-planche" data-ready="false" data-text="Print Planche">
|
||||
Exporter le PDF en planche
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', (event) => {
|
|||
let book_content = flowBook.content;
|
||||
let paged = new Paged.Previewer();
|
||||
|
||||
paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", "assets/css/toc.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css', 'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css', 'assets/css/typesetting.css',], document.querySelector("#renderbook")).then((flow) => {
|
||||
paged.preview(book_content, ["assets/css/print-template.css", "assets/css/main.css", "assets/css/print.css", 'assets/css/blockquote.css', 'assets/css/chapter-header.css', 'assets/css/entretiens.css', 'assets/css/notes.css', 'assets/css/figures.css', 'assets/css/portfolio.css', "assets/css/running-page.css", 'assets/css/subtitles.css', 'assets/css/text.css',], document.querySelector("#renderbook")).then((flow) => {
|
||||
|
||||
});
|
||||
});
|
||||
|
|
@ -135,6 +135,40 @@ function interfaceEvents(){
|
|||
});
|
||||
|
||||
|
||||
/* LAYER SELECTOR ------------------------------------------------------------*/
|
||||
document.querySelector("#layer-select").addEventListener("change", (e) => {
|
||||
const layers = ["red-layer", "green-layer", "blue-layer", "black-layer"];
|
||||
const selected = e.target.value;
|
||||
|
||||
layers.forEach(layer => {
|
||||
body.classList.remove("isolate-" + layer);
|
||||
});
|
||||
|
||||
if (selected) {
|
||||
body.classList.add("isolate-" + selected);
|
||||
// Active automatiquement le mode noir et blanc
|
||||
body.classList.add("mode-black");
|
||||
document.querySelector("#black-toggle").checked = true;
|
||||
} else {
|
||||
// Repasse en couleur si on revient sur "Toutes"
|
||||
body.classList.remove("mode-black");
|
||||
document.querySelector("#black-toggle").checked = false;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* Passer le PDF en noir et blanc ----------------------------------------------------------------------------------------------------
|
||||
----------------------------------------------------------------------------------------------------------------*/
|
||||
|
||||
|
||||
document.querySelector("#black-toggle").addEventListener("input", (e) => {
|
||||
if(e.target.checked){
|
||||
/* black mode */
|
||||
body.classList.add('mode-black');
|
||||
}else{
|
||||
body.classList.remove('mode-black');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* PRINT SPREAD ----------------------------------------------------------------------------------------------------
|
||||
|
|
@ -149,12 +183,6 @@ function interfaceEvents(){
|
|||
window.print();
|
||||
});
|
||||
|
||||
window.enableSpread = false;
|
||||
document.querySelector("#button-print-planche").addEventListener("click", (e) => {
|
||||
window.enableSpread = true;
|
||||
window.print();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
1219
composer.lock
generated
1219
composer.lock
generated
File diff suppressed because it is too large
Load diff
25
content/10_bye-bye-google-bye-bye-meta/chapitre.txt
Normal file
25
content/10_bye-bye-google-bye-bye-meta/chapitre.txt
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 299 KiB |
File diff suppressed because one or more lines are too long
25
content/11_saul-pandelakis/chapitre.txt
Normal file
25
content/11_saul-pandelakis/chapitre.txt
Normal file
File diff suppressed because one or more lines are too long
29
content/12_jose-fa-ntjam-portfolio/chapitre.txt
Normal file
29
content/12_jose-fa-ntjam-portfolio/chapitre.txt
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
Title: Josèfa Ntjam
|
||||
|
||||
----
|
||||
|
||||
Author: Elsa Boyer
|
||||
|
||||
----
|
||||
|
||||
Typeof: portfolio
|
||||
|
||||
----
|
||||
|
||||
Cover:
|
||||
|
||||
----
|
||||
|
||||
Bio:
|
||||
|
||||
----
|
||||
|
||||
Text: [{"content":{"text":"<p>Dans la vidéo<em> swell of spæc(i)es</em> (2024) Josèfa Ntjam s'attache à réécrire les mythes Dogons et Huaorani entre l'espace sidéral et l'espace aquatique.</p><p>Au lieu d'une origine de la vie et des espèces, Josèfa Ntjam présente une non origine des espèces. Non pas un point d'origine qu'on pourrait identifier mais une boucle, une reprise, un cycle de transformations et de renouveaux qu'elle décrit comme « un processus alchimique en perpétuelle agitation, qui allie les genèses ancestrales avec les nouvelles technologies de génération d'image ».</p><p>Dans cette boucle, Amma, une divinité créatrice chez les Dogons, jette un fossile dans l'espace qui brise les astéroïdes et crée des étoiles de plancton bioluminescentes. Les étoiles sont ensuite avalées par un serpent astral et se déposent à l'intérieur de son ventre où elles se transforment en fossile. De la bouche du serpent émerge une planète fossile où Nommo, un génie ancestral des eaux dans les mythes dogons, crée une vie marine. Au sein de cette vie marine évolue une pieuvre qui se transforme en Amma, recommençant à nouveau le cycle.</p><p>Pour réaliser les images de cette vidéo, Josèfa Ntjam a utilisé une IA qui a été alimentée avec un ensemble de données que l'artiste a assemblé elle-même : des modèles 3D de vie marine, des images de statues d'Afrique de l’Ouest conservées dans des collections occidentales, des photographies de figures du mouvement de libération du Cameroun (UPC) contre les troupes coloniales françaises (Elisabeth Djouka, Marthe Ekemeyong Moumie et le grand-père de Josèfa Ntjam). Les modèles de génération automatisée d'images et les outils de modélisation permettent de naviguer visuellement entre les dimensions aquatiques et sidérales que convoque le récit.</p><p>Si Josèfa Ntjam se sert de l'IA c'est aussi parce qu'à ses yeux elle apporte de nouvelles manières de relier les histoires de domination coloniale et d'extraction des ressources à des récits d'émancipation. L'artiste s'en sert comme d'une ressource pour hybrider les différentes formes de récits, pour circuler entre plusieurs logiques. <em>swell of spæc(i)es</em> se construit autour d'un point commun que Josèfa Ntjam repère entre les mythes et le fonctionnement de l'IA : comme les mythes, l’IA est itérative, elle répète et fait varier, générant des versions infinies à partir des mêmes éléments de base. En ce sens, l'IA permet aux figures et aux histoires de continuer à se transformer sans jamais se figer.</p>"},"id":"c4d22afc-4b74-4ed0-ade0-aafad5afa943","isHidden":false,"type":"text"}]
|
||||
|
||||
----
|
||||
|
||||
Portfolio:
|
||||
|
||||
----
|
||||
|
||||
Uuid: 8ypn0x7twyajcir4
|
||||
|
Before Width: | Height: | Size: 5.7 MiB After Width: | Height: | Size: 5.7 MiB |
|
Before Width: | Height: | Size: 77 MiB After Width: | Height: | Size: 77 MiB |
|
Before Width: | Height: | Size: 11 MiB After Width: | Height: | Size: 11 MiB |
|
Before Width: | Height: | Size: 16 MiB After Width: | Height: | Size: 16 MiB |
|
Before Width: | Height: | Size: 14 MiB After Width: | Height: | Size: 14 MiB |
|
Before Width: | Height: | Size: 13 MiB After Width: | Height: | Size: 13 MiB |
|
Before Width: | Height: | Size: 15 MiB After Width: | Height: | Size: 15 MiB |
|
Before Width: | Height: | Size: 15 MiB After Width: | Height: | Size: 15 MiB |
|
Before Width: | Height: | Size: 15 MiB After Width: | Height: | Size: 15 MiB |
|
Before Width: | Height: | Size: 80 MiB After Width: | Height: | Size: 80 MiB |
|
Before Width: | Height: | Size: 6 MiB After Width: | Height: | Size: 6 MiB |
|
Before Width: | Height: | Size: 2.8 MiB After Width: | Height: | Size: 2.8 MiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 MiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: pzyfunqyznkdbssr
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 699 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: qmtgb4zleeatphfz
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 184 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: nqzeluwagoevmc4o
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 219 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: ylhkc69z8mfxgais
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 239 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: p5qknzdfhxgqhyo3
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 170 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: hmekqakzupr8qklh
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 912 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: zmeqpmgzmsyu3yqk
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 155 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: mzkwqjjsibinhqzy
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 124 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: ugzwhihcbrajsxyj
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 130 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Uuid: sdssakryi7penohw
|
||||
|
||||
----
|
||||
|
||||
Template: blocks/image
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 900 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 1
|
||||
|
||||
----
|
||||
|
||||
Uuid: watozysigmc0gvxl
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 783 KiB |
|
|
@ -2,10 +2,6 @@ Caption:
|
|||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
|
@ -14,4 +10,4 @@ Sort: 5
|
|||
|
||||
----
|
||||
|
||||
Uuid: ookycfw1pjqdkrag
|
||||
Uuid: 2wf46av8ux3phcf2
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 846 KiB |
|
|
@ -2,10 +2,6 @@ Caption:
|
|||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
|
@ -14,4 +10,4 @@ Sort: 6
|
|||
|
||||
----
|
||||
|
||||
Uuid: uajjiiw77onfpfod
|
||||
Uuid: srxqys3zkq30qj3p
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 756 KiB |
|
|
@ -2,10 +2,6 @@ Caption:
|
|||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
|
@ -14,4 +10,4 @@ Sort: 7
|
|||
|
||||
----
|
||||
|
||||
Uuid: b94dm0ffzab1noq5
|
||||
Uuid: 1uzzwwbasn8r0iqo
|
||||
|
Before Width: | Height: | Size: 322 KiB After Width: | Height: | Size: 322 KiB |
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue