developpement piste finale
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
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 |
|
After Width: | Height: | Size: 2.6 MiB |
|
|
@ -2,6 +2,10 @@ Caption:
|
|||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
|
@ -10,4 +14,4 @@ Sort: 5
|
|||
|
||||
----
|
||||
|
||||
Uuid: sgu2mmjd8chfozjo
|
||||
Uuid: etrhupihgpfizstq
|
||||
|
|
@ -10,7 +10,7 @@ Typeof: essai
|
|||
|
||||
----
|
||||
|
||||
Cover: - file://g9qttd07hfv4rccq
|
||||
Cover: - file://qrvv3ph5la8ywppy
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
BIN
content/3_index/gold_cuivrejpg.jpg
Normal file
|
After Width: | Height: | Size: 2 MiB |
17
content/3_index/gold_cuivrejpg.jpg.txt
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 10
|
||||
|
||||
----
|
||||
|
||||
Uuid: qrvv3ph5la8ywppy
|
||||
BIN
content/3_index/silver_blue_pcb.jpg
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
|
|
@ -2,6 +2,10 @@ Caption:
|
|||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
|
@ -10,4 +14,4 @@ Sort: 8
|
|||
|
||||
----
|
||||
|
||||
Uuid: m424yi6q8uc0m3wu
|
||||
Uuid: eesklecm2xn2aie6
|
||||
BIN
content/3_index/silver_pcb.jpg
Normal file
|
After Width: | Height: | Size: 1 MiB |
17
content/3_index/silver_pcb.jpg.txt
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 9
|
||||
|
||||
----
|
||||
|
||||
Uuid: 74gv6wqmocnijyxu
|
||||
|
|
@ -10,7 +10,7 @@ Typeof: essai
|
|||
|
||||
----
|
||||
|
||||
Cover: - file://npveardyqdym23xm
|
||||
Cover: - file://ktfsuc0az4cfej77
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
BIN
content/4_code-creatif/lafargue_copper.png
Normal file
|
After Width: | Height: | Size: 2.3 MiB |
|
|
@ -2,6 +2,10 @@ Caption:
|
|||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
|
@ -10,4 +14,4 @@ Sort: 3
|
|||
|
||||
----
|
||||
|
||||
Uuid: i9aya6v89p6vqmxz
|
||||
Uuid: ktfsuc0az4cfej77
|
||||
BIN
content/5_parade/parade_copper.png
Normal file
|
After Width: | Height: | Size: 283 KiB |
17
content/5_parade/parade_copper.png.txt
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 16
|
||||
|
||||
----
|
||||
|
||||
Uuid: iyqivumhpfpbpftz
|
||||
|
|
@ -18,7 +18,38 @@ Bio:
|
|||
|
||||
----
|
||||
|
||||
Text: [{"content":{"text":"<p><em>Everything is Real </em>plonge dans les biais et les archétypes des images générées par IA. Le site est visible à cette adresse : <a href=\"http://everythingisreal.net/\">everythingisreal.net</a></p><p>Nous ne voulions ni rester extérieurs aux IA, ni leur résister frontalement. Nous avons choisi une autre voie : plonger à l’intérieur, suivre leur propre logique, jusqu’à ce que celle-ci s’épuise ou se retourne contre elle-même. Nous naviguons à l’intérieur même de la matière des images des IA génératives, en adoptant une posture d’observation participante.</p><p>Dans les années 1970, l'architecte britannique Reyner Banham, pour comprendre Los Angeles, écrivait : « Comme les générations précédentes d’intellectuels anglais qui ont appris l’italien pour lire Dante dans le texte, j’ai appris à conduire pour lire Los Angeles dans le texte ».</p><p>Nous poussons les IA dans leurs retranchements, jusqu’à la saturation de leurs stéréotypes. Le film <em>Everything is Real </em>met en scène l’automatisation, la répétition et l’amplification algorithmique.</p><p>Nous avions constitué un corpus des tropes les plus répandus des images de stock. Nous avons ensuite reproduit chacune de ces images en utilisant les générateurs les plus répandus. Nous tirons parti de l’archéologie des images de stock pour retourner les IA génératives sur leurs propres sources, leurs propres biais, en fouillant dans les strates de leurs stéréotypes, de leurs récits implicites, de leurs imaginaires figés.</p><p>Ainsi, <em>Everything is Real </em>montre les pommes les plus rouges, les call centers les plus verts, les salles de serveurs les plus câblées, les bénévoles les plus efficaces, les montagnes de déchets les plus massives.</p><p>Mais en faisant tourner les stéréotypes en boucle, les images versent insensiblement dans l’extrême. La pomme rouge, seule sur fond blanc, apparaît dans les mains d’employés qui sourient un peu trop, puis se gavent jusqu’à sombrer dans leur jus.</p><p>Stéphane Degoutin et Gwenola Wagon</p><p>Nos films et nos installations sont visibles sur le site <a href=\"http://d-w.fr/\">d-w.fr</a></p><p>Nos projets explorent les fantasmes d’un monde d’hyper efficience dont la figure archétypale serait le data center : une infrastructure automatisée servant à la fois au stockage des produits, du vivant et des données.</p><p>Le film-essai <em>Cyborgs dans la brume </em>(2011) dessine le portrait d’une société en poudre, à travers les processus d’atomisation incarnés par le béton armé, la farine animale, les data centers et les églises évangélistes.</p><p>Le film-essai <em>World Brain </em>(2015) est « un labyrinthe, dont l'idée de cerveau mondial serait le centre virtuel » (Andreas Rauth)</p><p>L’installation <em>Le monde comme entrepôt de livraison </em>(2017) montre les réalités cachées de l’automatisation du monde et révèle le déploiement d’un monde habité par des machines et des algorithmes.</p><p>La série de films <em>Erewhon </em>(2019) raconte des fables sur la vie des habitants d’un monde où l’automatisation a été fantasmée jusqu’à ses extrêmes.</p><p><em>L’Atlas du nuage </em>(2021) « dévoile l’invisible matrice de travail humain, de consommation énergétique et d’extraction de ressources qui sous-tend les réseaux numériques et l’intelligence artificielle. » (Marie Lechner)</p><p>Le film <em>La maison qui vous veut du bien </em>(2023) parle d’un objet très banal – une sonnette connectée équipée d’une caméra – à partir duquel se déploie tout un système de surveillance et de contrôle.</p>"},"id":"a0cc0bfa-2c4f-4b58-b5db-b4cefd8047b2","isHidden":false,"type":"text"},{"content":{"images":["file://u7tafpgzvgblnekd","file://go5mej2mbgah9bgv","file://rpp5npgikc1p4bkp","file://xo6jwuqkhvldwboq","file://6lymgrtmatdlmg6b","file://xtjc1ga0gcsuehyg","file://gkzt6a0uqfei06ii"],"caption":"","ratio":"","crop":"false"},"id":"42f7ea45-6764-42fc-9a89-cb13e6f1f978","isHidden":false,"type":"gallery"}]
|
||||
Text: [{"content":{"text":"<p><em>Everything is Real </em>plonge dans les biais et les archétypes des images générées par IA. Le site est visible à cette adresse : <a href=\"http://everythingisreal.net/\">everythingisreal.net</a></p><p>Nous ne voulions ni rester extérieurs aux IA, ni leur résister frontalement. Nous avons choisi une autre voie : plonger à l’intérieur, suivre leur propre logique, jusqu’à ce que celle-ci s’épuise ou se retourne contre elle-même. Nous naviguons à l’intérieur même de la matière des images des IA génératives, en adoptant une posture d’observation participante.</p><p>Dans les années 1970, l'architecte britannique Reyner Banham, pour comprendre Los Angeles, écrivait : « Comme les générations précédentes d’intellectuels anglais qui ont appris l’italien pour lire Dante dans le texte, j’ai appris à conduire pour lire Los Angeles dans le texte ».</p><p>Nous poussons les IA dans leurs retranchements, jusqu’à la saturation de leurs stéréotypes. Le film <em>Everything is Real </em>met en scène l’automatisation, la répétition et l’amplification algorithmique.</p><p>Nous avions constitué un corpus des tropes les plus répandus des images de stock. Nous avons ensuite reproduit chacune de ces images en utilisant les générateurs les plus répandus. Nous tirons parti de l’archéologie des images de stock pour retourner les IA génératives sur leurs propres sources, leurs propres biais, en fouillant dans les strates de leurs stéréotypes, de leurs récits implicites, de leurs imaginaires figés.</p><p>Ainsi, <em>Everything is Real </em>montre les pommes les plus rouges, les call centers les plus verts, les salles de serveurs les plus câblées, les bénévoles les plus efficaces, les montagnes de déchets les plus massives.</p><p>Mais en faisant tourner les stéréotypes en boucle, les images versent insensiblement dans l’extrême. La pomme rouge, seule sur fond blanc, apparaît dans les mains d’employés qui sourient un peu trop, puis se gavent jusqu’à sombrer dans leur jus.</p><p>Stéphane Degoutin et Gwenola Wagon</p><p>Nos films et nos installations sont visibles sur le site <a href=\"http://d-w.fr/\">d-w.fr</a></p><p>Nos projets explorent les fantasmes d’un monde d’hyper efficience dont la figure archétypale serait le data center : une infrastructure automatisée servant à la fois au stockage des produits, du vivant et des données.</p><p>Le film-essai <em>Cyborgs dans la brume </em>(2011) dessine le portrait d’une société en poudre, à travers les processus d’atomisation incarnés par le béton armé, la farine animale, les data centers et les églises évangélistes.</p><p>Le film-essai <em>World Brain </em>(2015) est « un labyrinthe, dont l'idée de cerveau mondial serait le centre virtuel » (Andreas Rauth)</p><p>L’installation <em>Le monde comme entrepôt de livraison </em>(2017) montre les réalités cachées de l’automatisation du monde et révèle le déploiement d’un monde habité par des machines et des algorithmes.</p><p>La série de films <em>Erewhon </em>(2019) raconte des fables sur la vie des habitants d’un monde où l’automatisation a été fantasmée jusqu’à ses extrêmes.</p><p><em>L’Atlas du nuage </em>(2021) « dévoile l’invisible matrice de travail humain, de consommation énergétique et d’extraction de ressources qui sous-tend les réseaux numériques et l’intelligence artificielle. » (Marie Lechner)</p><p>Le film <em>La maison qui vous veut du bien </em>(2023) parle d’un objet très banal – une sonnette connectée équipée d’une caméra – à partir duquel se déploie tout un système de surveillance et de contrôle.</p>"},"id":"a0cc0bfa-2c4f-4b58-b5db-b4cefd8047b2","isHidden":false,"type":"text"}]
|
||||
|
||||
----
|
||||
|
||||
Portfolio:
|
||||
|
||||
-
|
||||
spread:
|
||||
- file://rpp5npgikc1p4bkp
|
||||
imageontop:
|
||||
- file://go5mej2mbgah9bgv
|
||||
position: bottomright
|
||||
largeur: 10
|
||||
-
|
||||
spread:
|
||||
- file://xtjc1ga0gcsuehyg
|
||||
imageontop:
|
||||
- file://gkzt6a0uqfei06ii
|
||||
position: topleft
|
||||
largeur: 20
|
||||
-
|
||||
spread:
|
||||
- file://6lymgrtmatdlmg6b
|
||||
imageontop: [ ]
|
||||
position: ""
|
||||
largeur: ""
|
||||
-
|
||||
spread:
|
||||
- file://u7tafpgzvgblnekd
|
||||
imageontop: [ ]
|
||||
position: ""
|
||||
largeur: ""
|
||||
|
||||
----
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 457 KiB |
|
Before Width: | Height: | Size: 300 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 2
|
||||
|
||||
----
|
||||
|
||||
Uuid: tt8vjwnun9qicyyg
|
||||
|
Before Width: | Height: | Size: 426 KiB |
|
Before Width: | Height: | Size: 450 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 4
|
||||
|
||||
----
|
||||
|
||||
Uuid: hv723pupkth3rbak
|
||||
|
Before Width: | Height: | Size: 332 KiB |
|
Before Width: | Height: | Size: 529 KiB |
|
|
@ -1,13 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 6
|
||||
|
||||
----
|
||||
|
||||
Uuid: r2fsclqo5fvlguhd
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 7
|
||||
|
||||
----
|
||||
|
||||
Uuid: 2i6zxsgijegwa6lu
|
||||
|
Before Width: | Height: | Size: 261 KiB |
|
Before Width: | Height: | Size: 9.7 MiB After Width: | Height: | Size: 9.7 MiB |
|
Before Width: | Height: | Size: 5.9 MiB After Width: | Height: | Size: 5.9 MiB |
|
|
@ -18,7 +18,33 @@ Bio:
|
|||
|
||||
----
|
||||
|
||||
Text: [{"content":{"text":"<p>Wilderness Garden est un jeu vidéo narratif qui explore les histoires entremêlées des technologies contemporaines et des héritages coloniaux. À travers une série d’espaces interconnectés, le joueur traverse des lieux où se dévoilent les infrastructures visibles et invisibles du pouvoir : une salle d’archives, un bureau administratif, les profondeurs d’Internet, ou encore des souvenirs familiaux fragmentés. Le projet interroge les dynamiques d’accès aux ressources, aux territoires et aux espaces numériques, et examine comment les technologies actuelles peuvent prolonger, transformer ou dissimuler des logiques de domination.</p><p>Le titre du jeu fait écho à la métaphore controversée formulée par Josep Borrell, qui décrivait l’Europe comme un « jardin » à protéger du reste du monde. En reprenant cette image, Wilderness Garden questionne les récits qui naturalisent les frontières et les hiérarchies entre peuples, territoires et formes de vie.</p><p>L’expérience commence dans un espace inspiré du sac amniotique, où la voix et l’avatar d’Iyo invitent les joueurs à prendre conscience de leur propre corps et de leurs histoires transgénérationnelles. Ce point de départ suggère que la mémoire et la présence peuvent devenir des formes de résistance face à l’effacement produit par le neurocapitalisme et les récits coloniaux.</p><p>Au fil du parcours, les joueurs rencontrent un jardin clos où la surveillance rappelle les mécanismes du «contrat racial », une salle d’archives où la conférence de Berlin, l’exploitation minière au Congo et la construction de la ligne Congo-Océan révèlent la logistique coloniale qui a redessiné territoires et vies. Sous les océans, les câbles d’Internet réactivent d’anciennes routes impériales, révélant comment l’infrastructure numérique s’inscrit dans des géographies façonnées par l’expansion coloniale.</p><p>Un espace administratif, inspiré des bureaux de la CAF, met en scène un système algorithmique qui envoie des lettres recommandées et produit des formes contemporaines de tri, de profilage et de contrôle des populations vulnérables.</p><p>Entre ces lieux surgissent aussi des moments plus intimes : une cérémonie de mémoire au cœur des infrastructures numériques, ou un espace poétique évoquant les ancêtres disparus et les fractures familiales.</p><p>À travers ce voyage non linéaire, Wilderness Garden invite les joueurs à dépasser les lignes droites des frontières et des récits dominants, pour imaginer des formes de vie plus vastes, capables de reconnaître les graines enfouies dans l’histoire et les possibles retours qu’elles portent.</p>"},"id":"84b8861c-0e6f-4767-ad55-523766865d95","isHidden":false,"type":"text"},{"content":{"images":["file://shprtv8wmmlccuma","file://rkfkgfwvwaoqqqkb","file://1doh2xvgznjyh1b5","file://agycxmm3k3mpbba0","file://coa5h7f71hdru7mj","file://czj4n0r93jw8ofsb","file://ujynt8nqvk8r2qie","file://36fsvvwod97nz1ga"],"caption":"","ratio":"","crop":"false"},"id":"7674d888-60dd-465a-8c26-641687562a6d","isHidden":false,"type":"gallery"}]
|
||||
Text: [{"content":{"text":"<p>Wilderness Garden est un jeu vidéo narratif qui explore les histoires entremêlées des technologies contemporaines et des héritages coloniaux. À travers une série d’espaces interconnectés, le joueur traverse des lieux où se dévoilent les infrastructures visibles et invisibles du pouvoir : une salle d’archives, un bureau administratif, les profondeurs d’Internet, ou encore des souvenirs familiaux fragmentés. Le projet interroge les dynamiques d’accès aux ressources, aux territoires et aux espaces numériques, et examine comment les technologies actuelles peuvent prolonger, transformer ou dissimuler des logiques de domination.</p><p>Le titre du jeu fait écho à la métaphore controversée formulée par Josep Borrell, qui décrivait l’Europe comme un « jardin » à protéger du reste du monde. En reprenant cette image, Wilderness Garden questionne les récits qui naturalisent les frontières et les hiérarchies entre peuples, territoires et formes de vie.</p><p>L’expérience commence dans un espace inspiré du sac amniotique, où la voix et l’avatar d’Iyo invitent les joueurs à prendre conscience de leur propre corps et de leurs histoires transgénérationnelles. Ce point de départ suggère que la mémoire et la présence peuvent devenir des formes de résistance face à l’effacement produit par le neurocapitalisme et les récits coloniaux.</p><p>Au fil du parcours, les joueurs rencontrent un jardin clos où la surveillance rappelle les mécanismes du «contrat racial », une salle d’archives où la conférence de Berlin, l’exploitation minière au Congo et la construction de la ligne Congo-Océan révèlent la logistique coloniale qui a redessiné territoires et vies. Sous les océans, les câbles d’Internet réactivent d’anciennes routes impériales, révélant comment l’infrastructure numérique s’inscrit dans des géographies façonnées par l’expansion coloniale.</p><p>Un espace administratif, inspiré des bureaux de la CAF, met en scène un système algorithmique qui envoie des lettres recommandées et produit des formes contemporaines de tri, de profilage et de contrôle des populations vulnérables.</p><p>Entre ces lieux surgissent aussi des moments plus intimes : une cérémonie de mémoire au cœur des infrastructures numériques, ou un espace poétique évoquant les ancêtres disparus et les fractures familiales.</p><p>À travers ce voyage non linéaire, Wilderness Garden invite les joueurs à dépasser les lignes droites des frontières et des récits dominants, pour imaginer des formes de vie plus vastes, capables de reconnaître les graines enfouies dans l’histoire et les possibles retours qu’elles portent.</p>"},"id":"84b8861c-0e6f-4767-ad55-523766865d95","isHidden":false,"type":"text"},{"content":[],"id":"de1021ac-030f-46be-8673-b48556f62b1f","isHidden":false,"type":"break"}]
|
||||
|
||||
----
|
||||
|
||||
Portfolio:
|
||||
|
||||
-
|
||||
spread:
|
||||
- file://ujynt8nqvk8r2qie
|
||||
imageontop:
|
||||
- file://shprtv8wmmlccuma
|
||||
position: center
|
||||
largeur: 13
|
||||
-
|
||||
spread:
|
||||
- file://rkfkgfwvwaoqqqkb
|
||||
imageontop:
|
||||
- file://1doh2xvgznjyh1b5
|
||||
position: bottomright
|
||||
largeur: 15
|
||||
-
|
||||
spread:
|
||||
- file://36fsvvwod97nz1ga
|
||||
imageontop:
|
||||
- file://coa5h7f71hdru7mj
|
||||
position: topleft
|
||||
largeur: 20
|
||||
|
||||
----
|
||||
|
||||
|
Before Width: | Height: | Size: 3.1 MiB After Width: | Height: | Size: 3.1 MiB |
|
Before Width: | Height: | Size: 2 MiB After Width: | Height: | Size: 2 MiB |
|
Before Width: | Height: | Size: 7.5 MiB After Width: | Height: | Size: 7.5 MiB |
|
Before Width: | Height: | Size: 9.7 MiB After Width: | Height: | Size: 9.7 MiB |
|
Before Width: | Height: | Size: 8.2 MiB After Width: | Height: | Size: 8.2 MiB |
|
Before Width: | Height: | Size: 10 MiB After Width: | Height: | Size: 10 MiB |
|
|
@ -10,7 +10,7 @@ Typeof: entretien
|
|||
|
||||
----
|
||||
|
||||
Cover:
|
||||
Cover: - file://eg7ribg80drrlgsh
|
||||
|
||||
----
|
||||
|
||||
BIN
content/8_charlie-aubry/itw2_copper.jpg
Normal file
|
After Width: | Height: | Size: 288 KiB |
|
|
@ -2,6 +2,10 @@ Caption:
|
|||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
|
@ -10,4 +14,4 @@ Sort: 1
|
|||
|
||||
----
|
||||
|
||||
Uuid: astpj70hc7vkyjmh
|
||||
Uuid: eg7ribg80drrlgsh
|
||||
25
content/9_soline-nivet/chapitre.txt
Normal file
|
Before Width: | Height: | Size: 501 KiB After Width: | Height: | Size: 501 KiB |
|
Before Width: | Height: | Size: 755 KiB After Width: | Height: | Size: 755 KiB |
BIN
content/9_soline-nivet/itw1_copper.jpg
Normal file
|
After Width: | Height: | Size: 245 KiB |
17
content/9_soline-nivet/itw1_copper.jpg.txt
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
Caption:
|
||||
|
||||
----
|
||||
|
||||
Taille:
|
||||
|
||||
----
|
||||
|
||||
Alt:
|
||||
|
||||
----
|
||||
|
||||
Sort: 3
|
||||
|
||||
----
|
||||
|
||||
Uuid: nl9porqozqem6h4v
|
||||
|
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 |