Compare commits
26 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
1867e54400 | ||
|
|
6e97e2f46c | ||
|
|
828d97f3f9 | ||
|
|
fe9a3228a8 | ||
|
|
a34e879296 | ||
|
|
464f6cf39f | ||
|
|
92668b5d29 | ||
|
|
8a33fa6ef0 | ||
|
|
738d470087 | ||
|
|
ce4d7285fe | ||
|
|
9344129a9f | ||
|
|
1783105175 | ||
|
|
7851d1a4ec | ||
|
|
2f5da421b5 | ||
|
|
16e268c7ef | ||
|
|
bd64798428 | ||
|
|
f255ad6733 | ||
|
|
56d11343f8 | ||
|
|
015689c0ed | ||
|
|
4833822985 | ||
|
|
cc971f6152 | ||
|
|
1c1a2b0a93 | ||
|
|
512d62e5df | ||
|
|
15aaf441cd | ||
|
|
9340553c0b | ||
|
|
0e03ba8475 |
54 changed files with 1734 additions and 479 deletions
20
maquette-tests/README.md
Normal file
20
maquette-tests/README.md
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
# Notes
|
||||
|
||||
|
||||
|
||||
Choses que je n’ai pas automatisées:
|
||||
|
||||
- pour les titres h3 et h4, il faut mettre explicitement un `<br>` si on a 2 lignes pour que le décor fonctionne
|
||||
- pour les titres h3 et h4 qui arrivent en début de page ajouter la class `.subtitle-top-page`
|
||||
- pour les bibliographies: les wrapper dans une div `.bibliographie`
|
||||
|
||||
|
||||
|
||||
|
||||
**TO-DO**
|
||||
|
||||
- Régler les hypens
|
||||
- ajouter des `<wbr>’aux liens
|
||||
- ajouter des `+` devant les points dans les blockquote comme dans les bibliogaphies
|
||||
- attention le «œ» de Routed Gothic Wide
|
||||
- pas d’accents pour les typo Teletex
|
||||
|
|
@ -1,11 +1,22 @@
|
|||
:root{
|
||||
|
||||
--symbol: "+";
|
||||
--unit: 70px;
|
||||
--sub-unit: 17.5px;
|
||||
|
||||
|
||||
|
||||
|
||||
--font: 'Routed Gothic', sans-serif;
|
||||
--font: 'Wagram Slab', serif;
|
||||
--font: 'Bilzig', serif;
|
||||
--font: 'Routed Gothic', sans-serif;
|
||||
|
||||
|
||||
|
||||
--font-title: 'OCR-X';
|
||||
|
||||
|
||||
/* --font: 'HAL Timezone', serif; */
|
||||
--mono: 'Selectric Mono', monospace;
|
||||
--mono: 'Ivory Mono', monospace;
|
||||
|
|
@ -17,6 +28,8 @@
|
|||
|
||||
--font-notes: 'Selectric Mono', monospace;
|
||||
--font-notes: 'Baskemo Sans', monospace;
|
||||
--font-notes: 'OCR-X';
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -46,11 +59,22 @@
|
|||
--baseline: 18px;
|
||||
|
||||
--fs-nav: 11px;
|
||||
--fs-subtitle: 11px;
|
||||
--fs-subtitle: 16px;
|
||||
--fs-notes: 11px;
|
||||
|
||||
--unit: 20px;
|
||||
|
||||
--gap: 8px;
|
||||
|
||||
|
||||
}
|
||||
--sign-family: 'Teletext';
|
||||
--sign-size: 14px;
|
||||
--sign-baseline: 18px;
|
||||
/* --sign-spacing: 0.45rem; */
|
||||
--sign-spacing: 7.5px;
|
||||
--sign-spacing-dots: 7px;
|
||||
--sign-color: var(--blue);
|
||||
/* --sign-color: black; */
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
-o-font-smoothing: antialiased;
|
||||
text-rendering: geometricPrecision;
|
||||
|
||||
}
|
||||
a {
|
||||
|
|
@ -19,4 +20,16 @@ body {
|
|||
font-size: var(--font-size);
|
||||
line-height: var(--baseline);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pagedjs_left_page .pagedjs_sheet{
|
||||
--grid-position-x: 21px!important;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .pagedjs_sheet{
|
||||
--grid-position-x: 16px!important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,111 +2,178 @@
|
|||
|
||||
@page {
|
||||
size: 165mm 240mm;
|
||||
margin-top: 25mm;
|
||||
margin-bottom: 14mm;
|
||||
margin-top: 95px;
|
||||
margin-bottom: 18mm;
|
||||
bleed: 6mm;
|
||||
marks: crop;
|
||||
|
||||
margin-left: 33mm;
|
||||
margin-right: 11mm;
|
||||
|
||||
--symbol-top: 1px;
|
||||
--running-top: 8mm;
|
||||
--running-bottom: 6mm;
|
||||
--running-left: 19px;
|
||||
}
|
||||
|
||||
@page:left {
|
||||
margin-left: 18mm;
|
||||
margin-right: 26mm;
|
||||
|
||||
@top-left-corner {
|
||||
content: var(--symbol) var(--symbol) var(--symbol);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
vertical-align: top;
|
||||
padding-top: var(--running-top);
|
||||
text-align: left;
|
||||
padding-left: var(--running-left);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@top-left {
|
||||
content: element(decor);
|
||||
width: 0px;
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
padding-top: calc(var(--running-top) - var(--symbol-top));
|
||||
width: calc(var(--unit)*2);
|
||||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@top-center {
|
||||
content: element(author);
|
||||
vertical-align: top;
|
||||
padding-top: calc(var(--running-top) - var(--symbol-top));
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@top-right {
|
||||
content: element(author);
|
||||
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);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
padding-top: var(--running-top);
|
||||
width: 100%;
|
||||
padding-top: 8mm;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@top-left-corner {
|
||||
content: counter(page);
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
margin-left: 11mm;
|
||||
padding-left: 5px;
|
||||
|
||||
}
|
||||
|
||||
@bottom-left {
|
||||
content: counter(page);
|
||||
vertical-align: bottom;
|
||||
padding-bottom: var(--running-bottom);
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
|
||||
z-index: 100;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@page:right {
|
||||
/* margin-left: 18mm;
|
||||
margin-right: 26mm; */
|
||||
margin-left: 26mm;
|
||||
margin-right: 18mm;
|
||||
|
||||
@top-left-corner {
|
||||
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
vertical-align: top;
|
||||
padding-top: var(--running-top);
|
||||
text-align: left;
|
||||
padding-left: var(--running-left);
|
||||
|
||||
}
|
||||
|
||||
@top-left {
|
||||
content: element(type);
|
||||
width: 0px;
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
}
|
||||
|
||||
@top-right {
|
||||
content: element(title);
|
||||
vertical-align: top;
|
||||
padding-top: calc(8mm + 20px);
|
||||
/* padding-right: 11mm; */
|
||||
text-align: left;
|
||||
position: relative;
|
||||
left: -11mm;
|
||||
width: 100%;
|
||||
padding-top: var(--running-top);
|
||||
white-space: nowrap;
|
||||
padding-right: 1.5ch;
|
||||
font-family: var(--sign-family);
|
||||
font-size: var(--font-size);
|
||||
color: var(--sign-color);
|
||||
}
|
||||
|
||||
@top-right-corner {
|
||||
content: counter(page);
|
||||
width: 40px;
|
||||
position: relative;
|
||||
left: -40px;
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.chapter {
|
||||
break-before: right;
|
||||
page: chapter;
|
||||
}
|
||||
|
||||
|
||||
@page chapter:first {
|
||||
@top-right {
|
||||
content: none;
|
||||
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);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
vertical-align: top;
|
||||
padding-top: var(--running-top);
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
@bottom-right {
|
||||
content: counter(page);
|
||||
vertical-align: bottom;
|
||||
padding-bottom: var(--running-bottom);
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
font-family: var(--sign-family);
|
||||
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@page:blank {
|
||||
@top-left {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-left-corner {
|
||||
content: none;
|
||||
}
|
||||
@top-right {
|
||||
|
||||
@top-right {
|
||||
content: none;
|
||||
}
|
||||
@top-center {
|
||||
|
||||
@top-center {
|
||||
content: none;
|
||||
}
|
||||
|
||||
|
|
@ -134,4 +201,89 @@
|
|||
|
||||
.nav-decor {
|
||||
position: running(decor);
|
||||
}
|
||||
|
||||
.pagedjs_area {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after {
|
||||
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
/* padding-left: 1ch; */
|
||||
width: calc(var(--unit) + var(--sub-unit));
|
||||
position: relative;
|
||||
top: var(--symbol-top);
|
||||
padding-left: 11px;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .pagedjs_margin-top {
|
||||
width: calc(100% + var(--pagedjs-margin-right) - 2ch);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.pagedjs_right_page .pagedjs_margin-top{
|
||||
width: calc(100% + var(--pagedjs-margin-left) - 4ch);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after {
|
||||
padding-left: 0.25ch;
|
||||
padding-right: 1.25ch;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
min-width: 2ch;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pagedjs_right_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after {
|
||||
padding-left: 1.25ch;
|
||||
padding-right: 0.25ch;
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
min-width: 2ch;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
[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);
|
||||
page: portfolio;
|
||||
break-before: right;
|
||||
}
|
||||
|
||||
@page portfolio{
|
||||
--sign-color: var(--green);
|
||||
}
|
||||
48
maquette-tests/assets/css/blockquote.css
Normal file
48
maquette-tests/assets/css/blockquote.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
blockquote{
|
||||
/* padding-left: 3ch; */
|
||||
|
||||
margin-top: calc(var(--baseline)*1);
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
padding-left: calc(var(--unit)*0.75);
|
||||
padding-right: calc(var(--unit)*0.75);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
blockquote p::before{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.before-blockquote_container,
|
||||
.after-blockquote_container{
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.before-blockquote_container{
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.after-blockquote_container{
|
||||
right: -10px;
|
||||
}
|
||||
|
||||
.after-blockquote,
|
||||
.before-blockquote{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
word-break: break-all;
|
||||
width: calc(var(--unit)*0.5 + 4px);
|
||||
overflow-wrap: anywhere;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,91 +1,165 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
.chapter-header {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* break-after: page; */
|
||||
|
||||
|
||||
|
||||
.chapter-header p {
|
||||
text-indent: 0px !important;
|
||||
}
|
||||
|
||||
.chapter-header .type,
|
||||
.chapter-header .h2-pattern {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.chapter-header .hgroup{
|
||||
/* margin-top: var(--gap);
|
||||
border-left: var(--unit) solid var(--grey);
|
||||
border-left: var(--unit) solid var(--grey);
|
||||
padding-left: var(--gap);
|
||||
|
||||
|
||||
display: flex;
|
||||
flex-direction: column; */
|
||||
margin-left: 15%;
|
||||
|
||||
}
|
||||
|
||||
.chapter-header h2 {
|
||||
font-family: 'Routed Gothic Wide';
|
||||
line-height: 1.1;
|
||||
font-size: 36px;
|
||||
font-weight: normal;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .author {
|
||||
font-family: 'Routed Gothic Wide';
|
||||
font-size: 36px;
|
||||
margin-top: calc(var(--baseline)*6);
|
||||
margin-bottom: calc(var(--baseline)*2);
|
||||
|
||||
/* background-color: black;
|
||||
color: white;
|
||||
|
||||
font-family: var(--mono);
|
||||
font-size: var(--fs-nav);
|
||||
text-align: center;
|
||||
|
||||
font-size: var(--fs-nav);
|
||||
.chapter-header .hgroup {
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
padding: 4px 1ch;
|
||||
font-weight: normal;
|
||||
font-weight: normal;
|
||||
/* margin-top: calc(var(--baseline)*2);*/
|
||||
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;
|
||||
|
||||
height: var(--unit);
|
||||
margin-bottom: 0; */
|
||||
|
||||
/* display: inline-block;
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--baseline)*1); */
|
||||
|
||||
}
|
||||
|
||||
.chapter-header .bio{
|
||||
.chapter-header .hgroup::before {
|
||||
content: "***************************************************************************************************************************************************************************************************************************************************************************************************************************************************";
|
||||
display: block;
|
||||
width: calc(100% + 1ch);
|
||||
height: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
z-index: -1;
|
||||
|
||||
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.5);
|
||||
overflow-wrap: anywhere;
|
||||
/* padding-top: 6px; */
|
||||
}
|
||||
|
||||
.chapter-header .type {
|
||||
display: none;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .hgroup h2 {
|
||||
font-family: 'Teletext';
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
line-height: calc(var(--sign-baseline)*1.5);
|
||||
display: inline;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.chapter-header .hgroup h2 span {
|
||||
color: white;
|
||||
padding-left: 0.25ch;
|
||||
padding-right: 0.25ch;
|
||||
box-decoration-break: clone;
|
||||
background-color: var(--sign-color);
|
||||
padding: 1px 0.25ch;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.chapter-header .author span {
|
||||
font-family: 'Teletext';
|
||||
color: var(--sign-color);
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
text-transform: uppercase;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.chapter-header .author::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chapter-header{
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
|
||||
.chapter-header .bio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chapter-header:after{
|
||||
/* content: "";
|
||||
display: block;
|
||||
margin-top: var(--gap);
|
||||
.hgroup-before,
|
||||
.hgroup-after,
|
||||
.chapter-header .title-before,
|
||||
.chapter-header .title-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);
|
||||
|
||||
|
||||
border-top: 2px dashed var(--grey);
|
||||
}
|
||||
|
||||
margin-bottom: calc(var(--baseline)*1); */
|
||||
.chapter-header .title-before,
|
||||
.chapter-header .title-after{
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
}
|
||||
|
||||
.chapter-header .title-before {
|
||||
top: calc(var(--baseline)*-1.25);
|
||||
}
|
||||
|
||||
.chapter-header .title-after {
|
||||
bottom: calc(var(--baseline)*-1.5 + 1px);
|
||||
}
|
||||
|
||||
|
||||
.hgroup-before{
|
||||
position: absolute;
|
||||
left: calc(var(--pagedjs-margin-left)*-1);
|
||||
padding-left: 19px;
|
||||
top: -47px;
|
||||
}
|
||||
|
||||
.hgroup-after{
|
||||
position: absolute;
|
||||
bottom: calc(var(--baseline)*-5 - 1px);
|
||||
right: calc(var(--pagedjs-margin-right)*-1);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* SPECIFIC ----------------------------------------------- */
|
||||
|
||||
#charlie-aubry .hgroup{
|
||||
top: calc(var(--baseline)*-0.25 - 2px);
|
||||
top: -2px;
|
||||
}
|
||||
#charlie-aubry .chapter-header .title-before{
|
||||
/* top: calc(var(--baseline)*-1.25); */
|
||||
top: calc(var(--baseline)*-1.5);
|
||||
}
|
||||
|
||||
#charlie-aubry .chapter-header .title-after {
|
||||
/* bottom: calc(var(--baseline)*-5 - 1px); */
|
||||
bottom: calc(var(--baseline) * -1.75 + 1px);
|
||||
}
|
||||
|
||||
#charlie-aubry .hgroup-after{
|
||||
bottom: calc(var(--baseline)*-11 - 10px);
|
||||
}
|
||||
138
maquette-tests/assets/css/entretiens.css
Normal file
138
maquette-tests/assets/css/entretiens.css
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
.description {
|
||||
padding-left: calc(var(--unit)*0.75);
|
||||
padding-right: calc(var(--unit)*0.75);
|
||||
position: relative;
|
||||
top: -4px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.description-before {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
}
|
||||
.description-after {
|
||||
margin-top: -5px;
|
||||
margin-bottom: calc(var(--baseline)*1 - 3px);
|
||||
}
|
||||
|
||||
|
||||
.description-before,
|
||||
.description-after {
|
||||
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
|
||||
}
|
||||
|
||||
.description::before,
|
||||
.description::after {
|
||||
content: "......";
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
word-break: break-all;
|
||||
width: calc(var(--unit)*0.75 + 4px);
|
||||
overflow-wrap: anywhere;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.description::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.description::after {
|
||||
position: absolute;
|
||||
right: -13px;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
h5 {
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
top: calc(var(--baseline)*1);
|
||||
|
||||
background-color: white;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
.pagedjs_right_page h5{
|
||||
left: -80px;
|
||||
}
|
||||
|
||||
.pagedjs_right_page h5::before{
|
||||
content: "+++++++"
|
||||
}
|
||||
|
||||
.pagedjs_left_page h5{
|
||||
left: -49px;
|
||||
}
|
||||
|
||||
.pagedjs_left_page h5::before{
|
||||
content: "+++++"
|
||||
}
|
||||
|
||||
|
||||
|
||||
.h6_container {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
top: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
display: inline;
|
||||
|
||||
}
|
||||
|
||||
h6::before {
|
||||
content: "++";
|
||||
|
||||
}
|
||||
|
||||
|
||||
.decor-h6 {
|
||||
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: -49px;
|
||||
top: calc(var(--baseline)*-2.5 + 11px);
|
||||
}
|
||||
|
||||
.pagedjs_right_page .decor-h6 {
|
||||
left: -80px;
|
||||
top: calc(var(--baseline)*-4.5 + 11px);
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.item-decor{
|
||||
font-family: var(--sans);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pagedjs_left_page .item-decor{
|
||||
left: -12mm;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .item-decor{
|
||||
right: -12mm;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.container-following-note {
|
||||
margin-left: 30%;
|
||||
margin-left: calc(var(--unit)*2);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
padding-left: 0.25ch;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
125
maquette-tests/assets/css/running-page.css
Normal file
125
maquette-tests/assets/css/running-page.css
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
.running-page_container{
|
||||
--w-container: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left)*2);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
vertical-align: bottom;
|
||||
padding-bottom: var(--running-bottom);
|
||||
width: 100%;
|
||||
|
||||
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
|
||||
bottom: 0px;
|
||||
width: var( --w-container);
|
||||
overflow: hidden;
|
||||
/* background-color: red; */
|
||||
|
||||
}
|
||||
|
||||
|
||||
.running-page{
|
||||
width: calc(var(--w-container)*2);
|
||||
padding-left: var(--running-left);
|
||||
padding-right: 6px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.running-page .symbols{
|
||||
flex-shrink: 0;
|
||||
/* background-color: white; */
|
||||
z-index: 20;
|
||||
|
||||
}
|
||||
.running-page .dots{
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: var(--running-left);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .running-page_container .running-page{
|
||||
position: relative;
|
||||
/* left: calc(var( --w-container)*-1 + var(--pagedjs-margin-left)*-1 + 2px); */
|
||||
left: calc(var( --w-container)*-1 + 10px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@page essai:first {
|
||||
|
||||
@top-left-corner {
|
||||
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) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
}
|
||||
|
||||
@top-left {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-center {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-right {
|
||||
content: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@page entretien:first {
|
||||
|
||||
@top-left-corner {
|
||||
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) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
}
|
||||
|
||||
@top-left {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-center {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-right {
|
||||
content: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@page portfolio:first {
|
||||
|
||||
@top-left-corner {
|
||||
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) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
|
||||
}
|
||||
|
||||
@top-left {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-center {
|
||||
content: none;
|
||||
}
|
||||
|
||||
@top-right {
|
||||
content: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* TEMP */
|
||||
|
||||
@page entretien{
|
||||
--sign-color: var(--red);
|
||||
}
|
||||
122
maquette-tests/assets/css/subtitles.css
Normal file
122
maquette-tests/assets/css/subtitles.css
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
h3, h4{
|
||||
break-after: avoid;
|
||||
}
|
||||
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_container,
|
||||
.h4_container{
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.subtitle-before,
|
||||
.subtitle-after{
|
||||
letter-spacing:var(--sign-spacing);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
line-height: var(--sign-baseline);
|
||||
}
|
||||
|
||||
.subtitle-line {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.subtitle-after{
|
||||
padding-left: 0.75ch;
|
||||
position: relative;
|
||||
left: 6px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.subtitle-text{
|
||||
/* background-color: yellow; */
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.decor-h3{
|
||||
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 PAGE */
|
||||
|
||||
.decor-h3_small{
|
||||
left: -49px;
|
||||
top: calc(var(--baseline)*-2.5 + 9px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.decor-h3_big{
|
||||
right: -81px;
|
||||
text-align: right;
|
||||
top: calc(var(--baseline) * -3.5 - 9px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* RIGHT PAGE */
|
||||
|
||||
|
||||
.pagedjs_right_page .decor-h3_small{
|
||||
left: auto;
|
||||
right: -53px;
|
||||
top: calc(var(--baseline)*-2.5 + 9px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pagedjs_right_page .decor-h3_big{
|
||||
right: 0;
|
||||
left: -80px;
|
||||
text-align: left;
|
||||
top: calc(var(--baseline) * -3.5 - 9px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* if page top */
|
||||
|
||||
.pagedjs_right_page .subtitle-top-page h3 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .subtitle-top-page [data-count="2"]{
|
||||
color: transparent
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pagedjs_left_page .subtitle-top-page h3 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .subtitle-top-page .decor-h3_big [data-count="1"],
|
||||
.pagedjs_left_page .subtitle-top-page .decor-h3_big [data-count="2"]{
|
||||
color: transparent!important
|
||||
}
|
||||
|
|
@ -1,118 +1,71 @@
|
|||
.chapter p{
|
||||
.chapter p {
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
hyphenate-limit-chars: 8 3;
|
||||
position: relative;
|
||||
hyphenate-limit-chars: 7 3 2;
|
||||
/* position: relative; */
|
||||
orphans: 2;
|
||||
hyphens: 2;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.container-following-note + p,
|
||||
p + p{
|
||||
text-indent: 30%;
|
||||
|
||||
p::before {
|
||||
content: ".........";
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: 0px;
|
||||
position: relative;
|
||||
/* text-indent: -6ch; */
|
||||
|
||||
top: -3px;
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
margin-right: -4px;
|
||||
}
|
||||
|
||||
p::before{
|
||||
/* content: ">";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-family: var(--mono);
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-nav); */
|
||||
|
||||
/* display: block;
|
||||
width: var(--unit);
|
||||
height: var(--unit);
|
||||
background-color: var(--grey);
|
||||
top: 2px;
|
||||
display: flex;
|
||||
align-items: center; */
|
||||
/* justify-content: center; */
|
||||
.following-title::before,
|
||||
.following-h3::before {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* BILBIOGRAPHIE */
|
||||
|
||||
h3, h4{
|
||||
break-after: avoid;
|
||||
}
|
||||
h3, h4{
|
||||
font-weight: normal;
|
||||
/* font-size: 14px; */
|
||||
font-family: var(--font-subtitle);
|
||||
/* font-family: var(--font-subtitle);
|
||||
font-size: var(--fs-subtitle);
|
||||
background-color: var(--grey);
|
||||
font-size: var(--fs-nav);
|
||||
line-height: 1;
|
||||
padding: 4px 1ch;
|
||||
min-height: var(--unit);
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
font-weight: normal; */
|
||||
/* padding-left: 1.5ch; */
|
||||
margin-top: calc(var(--baseline)*1.5);
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
padding-left: 30%;
|
||||
.bibliographie p {
|
||||
font-size: var(--fs-notes);
|
||||
line-height: 14px;
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
padding-left: calc(var(--unit)*2);
|
||||
text-indent: calc(var(--unit)*-0.75);
|
||||
break-inside: avoid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h3::before,
|
||||
h3::after{
|
||||
/* content: "+------------------------------------------------+";
|
||||
display: block;
|
||||
position: relative;
|
||||
left: -1.5ch;
|
||||
width: calc(100% + 1.5ch); */
|
||||
}
|
||||
|
||||
|
||||
|
||||
h4{
|
||||
border: var(--border-grey);
|
||||
background: none;
|
||||
}
|
||||
|
||||
blockquote p{
|
||||
/* font-family: var(--mono); */
|
||||
}
|
||||
|
||||
blockquote{
|
||||
padding-left: 3ch;
|
||||
/* font-style: italic; */
|
||||
|
||||
margin-top: calc(var(--baseline)*0.5);
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
|
||||
|
||||
}
|
||||
|
||||
blockquote::before{
|
||||
content: "> > > > > > > > > >";
|
||||
display: block;
|
||||
width: 1ch;
|
||||
.bibliographie p::before {
|
||||
content: ".....";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-family: var(--mono);
|
||||
font-size: var(--fs-nav);
|
||||
font-style: normal;
|
||||
/* left: calc(var(--unit)*0.75); */
|
||||
left: calc(var(--unit)*0.75 + 16px);
|
||||
top: 3px;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
||||
.bibliographie p::after {
|
||||
content: "+";
|
||||
position: absolute;
|
||||
left: calc(var(--unit)*0.75);
|
||||
top: 0px;
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.chapter > :first-child{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pagedjs_area{
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
BIN
maquette-tests/assets/fonts/JetBrains/JetBrainsMono[wght].ttf
Normal file
BIN
maquette-tests/assets/fonts/JetBrains/JetBrainsMono[wght].ttf
Normal file
Binary file not shown.
18
maquette-tests/assets/fonts/JetBrains/stylesheet.css
Normal file
18
maquette-tests/assets/fonts/JetBrains/stylesheet.css
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("JetBrainsMono[wght].ttf") format("truetype");
|
||||
font-weight: 100 800;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "JetBrains Mono";
|
||||
src: url("JetBrainsMono-Italic[wght].ttf") format("truetype");
|
||||
font-weight: 100 800;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* p {
|
||||
font-family: "JetBrains Mono";
|
||||
font-feature-settings: "calt" 1;
|
||||
} */
|
||||
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff2
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Black.woff2
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff2
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Bold.woff2
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff2
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Light.woff2
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff2
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Medium.woff2
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff2
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Regular.woff2
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff2
Normal file
BIN
maquette-tests/assets/fonts/OCR-X/OCR-X-Thin.woff2
Normal file
Binary file not shown.
54
maquette-tests/assets/fonts/OCR-X/stylesheet.css
Normal file
54
maquette-tests/assets/fonts/OCR-X/stylesheet.css
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
@font-face {
|
||||
font-family: 'OCR-X';
|
||||
src: url('OCR-X-Bold.woff2') format('woff2'),
|
||||
url('OCR-X-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OCR-X';
|
||||
src: url('OCR-X-Black.woff2') format('woff2'),
|
||||
url('OCR-X-Black.woff') format('woff');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OCR-X';
|
||||
src: url('OCR-X-Light.woff2') format('woff2'),
|
||||
url('OCR-X-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OCR-X';
|
||||
src: url('OCR-X-Regular.woff2') format('woff2'),
|
||||
url('OCR-X-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OCR-X';
|
||||
src: url('OCR-X-Medium.woff2') format('woff2'),
|
||||
url('OCR-X-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'OCR-X';
|
||||
src: url('OCR-X-Thin.woff2') format('woff2'),
|
||||
url('OCR-X-Thin.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
Binary file not shown.
Binary file not shown.
13
maquette-tests/assets/fonts/OCR-X_trial/stylesheet.css
Normal file
13
maquette-tests/assets/fonts/OCR-X_trial/stylesheet.css
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@font-face {
|
||||
font-family: "OCR X";
|
||||
src: url("OCR-XTrial-VariableVF.ttf") format("truetype");
|
||||
font-weight: 10 220;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "OCR X";
|
||||
src: url("OCR-XTrial-VariableVF.woff2") format("woff2");
|
||||
font-weight: 10 220;
|
||||
font-style: normal;
|
||||
}
|
||||
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX0.TTF
Normal file
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX0.TTF
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX1.TTF
Normal file
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX1.TTF
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX2.TTF
Normal file
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX2.TTF
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX3.TTF
Normal file
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX3.TTF
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX4.TTF
Normal file
BIN
maquette-tests/assets/fonts/Teletext/MODE7GX4.TTF
Normal file
Binary file not shown.
40
maquette-tests/assets/fonts/Teletext/stylesheet.css
Normal file
40
maquette-tests/assets/fonts/Teletext/stylesheet.css
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
|
||||
@font-face {
|
||||
font-family: 'Teletext';
|
||||
src: url('MODE7GX0.TTF') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* @font-face {
|
||||
font-family: 'Teletext';
|
||||
src: url('MODE7GX1.TTF') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
} */
|
||||
|
||||
/* @font-face {
|
||||
font-family: 'Teletext';
|
||||
src: url('MODE7GX2.TTF') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Teletext';
|
||||
src: url('MODE7GX3.TTF') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Teletext';
|
||||
src: url('MODE7GX4.TTF') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
} */
|
||||
55
maquette-tests/assets/fonts/Triplicate/stylesheet.css
Normal file
55
maquette-tests/assets/fonts/Triplicate/stylesheet.css
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
@font-face {
|
||||
font-family: "Triplicate T3";
|
||||
src: url("triplicate-t3.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Triplicate T3";
|
||||
src: url("triplicate-t3-italic.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Triplicate T3";
|
||||
src: url("triplicate-t3-bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Triplicate T3";
|
||||
src: url("triplicate-t3-bold-italic.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Triplicate T4";
|
||||
src: url("triplicate-t4.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Triplicate T4";
|
||||
src: url("triplicate-t4-italic.ttf") format("truetype");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Triplicate T4";
|
||||
src: url("triplicate-t4-bold.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Triplicate T4";
|
||||
src: url("triplicate-t4-bold-italic.ttf") format("truetype");
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
Binary file not shown.
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t3-bold.ttf
Normal file
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t3-bold.ttf
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t3-italic.ttf
Normal file
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t3-italic.ttf
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t3.ttf
Normal file
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t3.ttf
Normal file
Binary file not shown.
Binary file not shown.
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t4-bold.ttf
Normal file
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t4-bold.ttf
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t4-italic.ttf
Normal file
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t4-italic.ttf
Normal file
Binary file not shown.
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t4.ttf
Normal file
BIN
maquette-tests/assets/fonts/Triplicate/triplicate-t4.ttf
Normal file
Binary file not shown.
|
|
@ -1,177 +0,0 @@
|
|||
# CSS Page Weaver
|
||||
|
||||
|
||||
|
||||
CSS Page Weaver is a browser-based publishing tool, made up of [PagedJs](https://pagedjs.org/about/) library and modulars additionals features. While it's design to ease installation for beginners CSS Page Weaver also bring elegant and extendable solution for more advanced users.
|
||||
|
||||
## ✨ Features
|
||||
|
||||
- **Streamlined and Ready-to-Use**: Get started quickly with a standardized way to integrate features.
|
||||
- **Extensive Plugin Library**: No need to reinvent the wheel with the available plugins.
|
||||
- **WYSIWYG Editor**: Streamline your design pratice with an extandable interface.
|
||||
- **Create and Share Plugins**: Develop and share your own plugins easily.
|
||||
|
||||
## ⛵ Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- A local web server
|
||||
|
||||
### 🪴 Installation (fastest way)
|
||||
|
||||
If you feel a bit lost with following instruction, you should probably look at the [CSS Page Weaver compiled with a few plugins](https://gitlab.com/csspageweaver/csspageweaver/-/releases)
|
||||
|
||||
Integrate it at the root level of your page and add a link to `csspageweaver` main _module_ into your HTML template
|
||||
|
||||
```html
|
||||
<script src="/csspageweaver/main.js" type="module"></script>
|
||||
```
|
||||
|
||||
*Do you need to also install PagedJs? Nope! CSS Page Weaver already embed it.*
|
||||
|
||||
### Use
|
||||
|
||||
Run a simple server. That's it!
|
||||
|
||||
### Boilerplate
|
||||
|
||||
Don't have a project to test it? There is [a ready-to-use boilerplate](https://gitlab.com/csspageweaver//boilerplate). Download, unzip & run a server!
|
||||
|
||||
|
||||
## 🚀 Going further
|
||||
|
||||
### 🌲 Installation (complete way)
|
||||
|
||||
Released version on CSS Page Weaver is compiled with few plugins. You can install the package yourself for greater control.
|
||||
|
||||
#### Clone CSS Page Weaver repo in your project [option A].
|
||||
|
||||
```bash
|
||||
# With HTTPS
|
||||
git clone https://gitlab.com/csspageweaver/csspageweaver.git
|
||||
|
||||
# With SSH
|
||||
git clone git@gitlab.com:csspageweaver/csspageweaver.git
|
||||
```
|
||||
#### Clone CSS Page Weaver as a git subtree [option B].
|
||||
|
||||
Subtree are great to:
|
||||
- embed CSS Page Weaver repo in another repo
|
||||
- get updates
|
||||
|
||||
```bash
|
||||
git subtree add --prefix csspageweaver/ git@gitlab.com:csspageweaver/cssPageWeaver.git --squash
|
||||
```
|
||||
|
||||
### 🔌 Dependencies
|
||||
|
||||
CSS Page Weaver is designed to work with plugins. In this complete installation, you need to install plugins by yourself. If you've downloaded [the last release of CSS Page Weaver](https://gitlab.com/csspageweaver/csspageweaver/-/releases), few plugins are already embedded.
|
||||
|
||||
**Here is a [list of all plugins](https://gitlab.com/csspageweaver//plugins) known.**
|
||||
|
||||
**Steps**
|
||||
|
||||
1. Download and place plugin folder in `csspageweaver/plugins`
|
||||
2. Add plugin to manifest
|
||||
|
||||
#### Installation as subtree
|
||||
|
||||
We prefer to install plugins using Git Subtree because it allows us to easily preserve the filiation link with the plugin directory (and to obtain updates!).
|
||||
|
||||
Bear in mind, if you're not comfortable with command lines, that *step 1* can easily be replaced by a simple *download, drag and drop*.
|
||||
|
||||
Otherwise, here is how it works.
|
||||
|
||||
##### (Step 1) Clone plugin as a subtree
|
||||
|
||||
Install plugin as a submodule of `csspageweaver`
|
||||
|
||||
```bash
|
||||
git subtree add --prefix="csspageweaver/plugins/{{PLUGIN_FOLDER_NAME}}" git@gitlab.com:csspageweaver/plugins/{{PLUGIN_NAME}}.git --squash
|
||||
```
|
||||
|
||||
##### (Step 2) Add plugin to manifest
|
||||
|
||||
Almost done. Add a mention to `csspageweaver/manifest.json`
|
||||
|
||||
```json
|
||||
{
|
||||
"plugins": [
|
||||
// existing plugin,
|
||||
"PLUGIN_FOLDER_NAME"
|
||||
],
|
||||
}
|
||||
```
|
||||
|
||||
Look at complete [plugins list](https://gitlab.com/csspageweaver/plugins) and [plugins installation guide](https://gitlab.com/csspageweaver/csspageweaver/-/wikis/design/plugins/install)
|
||||
|
||||
#### Update as subtree
|
||||
|
||||
This is where Git subtrees are wonderful
|
||||
|
||||
```bash
|
||||
git subtree pull --prefix="csspageweaver/plugins/{{PLUGIN_NAME}}" main --squash
|
||||
```
|
||||
|
||||
A bit dazed? Don't worry. Once again, you can update your plugins with your favorite *download, unzip, drag and drop* shady method.
|
||||
|
||||
### 🎁 Package manager
|
||||
|
||||
You already like the principle of subtrees, but you think (rightly) that the multiplication of command lines can be a bit tedious in the long run? Installation and dependencies can me handle with our [Package Manager](https://gitlab.com/csspageweaver/package-manager)
|
||||
|
||||
**Install CSS Page Weaver and plugins with package manager**
|
||||
|
||||
```bash
|
||||
./weaver_manager.sh --install
|
||||
```
|
||||
|
||||
**Get update with package manager**
|
||||
|
||||
```bash
|
||||
./weaver_manager.sh --pull
|
||||
```
|
||||
|
||||
See [Package Manager repository](https://gitlab.com/csspageweaver-toolkit/package_manager) and [further documentation on managing your installation](https://gitlab.com/csspageweaver/csspageweaver/-/wikis/maintain_and_develop/core/5-manage_csspageweaver_integration)
|
||||
|
||||
|
||||
|
||||
## 🔄 Customization
|
||||
|
||||
### Basic Information
|
||||
|
||||
Edit `csspageweaver/manifest.json` to declare:
|
||||
- Plugins
|
||||
- Plugins configuration
|
||||
- Stylesheets
|
||||
- Your custom hooks
|
||||
|
||||
### CSS Page Weaver behavior (advanced)
|
||||
|
||||
Edit `csspageweaver/main.js` to:
|
||||
- disable Common dictionary
|
||||
- disable Interface
|
||||
- Choose render method
|
||||
|
||||
## 🎓 Documentation
|
||||
|
||||
A complete [documentation is available](https://gitlab.com/csspageweaver/csspageweaver/-/wikis/home)
|
||||
|
||||
## 📝 License
|
||||
|
||||
This project is licensed under the MIT License
|
||||
|
||||
## 👏 Acknowledgements
|
||||
|
||||
CSS Page Weaver is based on [PagedJs](https://pagedjs.org/about/) by Coko Foundation.
|
||||
|
||||
CSS Page Weaver is an original idea of Julie Blanc ehanced by Benjamin G.
|
||||
Julien Taquet was a great help in reimagining the rendering module. Finally, Nicolas Taffin and Julien Bidoret helped to oversee this tool.
|
||||
|
||||
All CSS Page Weaver plugins remains linked to their original creators.
|
||||
Without them, GUI would remain an empty shell. Thanks 🙏
|
||||
|
||||
## 🙌 Contributing
|
||||
|
||||
Features and documentation requests are welcome! Feel free to check the [issues page](https://gitlab.com/csspageweaver/csspageweaver/-/issues).
|
||||
|
||||
Contributions must follow our [code of conduct](https://www.contributor-covenant.org/version/2/1/code_of_conduct/)
|
||||
|
|
@ -27,12 +27,17 @@
|
|||
"assets/css/02_body.css",
|
||||
"assets/css/03_layout.css",
|
||||
"assets/css/chapter-header.css",
|
||||
"assets/css/item-decor.css",
|
||||
"assets/css/blockquote.css",
|
||||
"assets/css/notes.css",
|
||||
"assets/css/text.css"
|
||||
"assets/css/text.css",
|
||||
"assets/css/subtitles.css",
|
||||
"assets/css/running-page.css",
|
||||
"assets/css/entretiens.css"
|
||||
],
|
||||
"hook": [
|
||||
|
||||
"/js/decor-subtitles.js",
|
||||
"/js/decor-num-pages.js",
|
||||
"/js/decor-blockquote.js"
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,10 +38,9 @@ function inlineNotesHandler(params){
|
|||
|
||||
createNotes(content, input, type);
|
||||
|
||||
let noteContainer = content.querySelector(params.containerNotes);
|
||||
if(noteContainer){
|
||||
content.querySelectorAll(params.containerNotes).forEach(noteContainer => {
|
||||
noteContainer.remove();
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,9 @@
|
|||
<link rel="stylesheet" type="text/css" href="/assets/fonts/BaskemoSans/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/Bilzig/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/DecorRound/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/OCR-X/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/Velvetyne/stylesheet.css">
|
||||
<link rel="stylesheet" type="text/css" href="/assets/fonts/Teletext/stylesheet.css">
|
||||
|
||||
</head>
|
||||
|
||||
|
|
@ -37,10 +40,7 @@
|
|||
<h1>Décor 6 - Numérique</h1>
|
||||
</section>
|
||||
|
||||
<span class="nav-decor">D6cor</span>
|
||||
<span class="nav-type">Essai</span>
|
||||
<span class="nav-author">Olivain Porry</span>
|
||||
<span class="nav-title">Un robot-poète ne nous fait toujours pas peur</span>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -55,27 +55,30 @@
|
|||
|
||||
|
||||
|
||||
<section class="chapter" id="olivain-porry">
|
||||
<section class="chapter" data-chapter="essai" id="olivain-porry">
|
||||
|
||||
|
||||
<span class="nav-decor">D6cor</span>
|
||||
<span class="nav-author">Olivain Porry</span>
|
||||
<span class="nav-title">Un robot-poete ne nous fait toujours pas peur</span>
|
||||
|
||||
<div class="chapter-header">
|
||||
<p class="type">Essai</p>
|
||||
<div class="hgroup-before">++++<br>+++++<br>+++<br>++<br>
|
||||
+<br>+<br>+<br>+<br>+<br>+<br>
|
||||
+++<br>++<br>+<br>+<br>
|
||||
+<br><br>+<br>++<br>+<br></div>
|
||||
<div class="hgroup">
|
||||
<h2><span>Un robot-poète ne nous fait toujours pas peur</span></h2>
|
||||
<p class="author">Olivain Porry</p>
|
||||
<div class="title-before">++--------------------------+</div>
|
||||
<h2><span>Un robot-poete <br>ne nous fait toujours <br>pas peur</span></h2>
|
||||
<p class="author"><span>Olivain Porry</span></p>
|
||||
<div class="title-after">+--------------------------++</div>
|
||||
</div>
|
||||
|
||||
<div class="bio">
|
||||
<p class="name">Olivain Porry</p>
|
||||
<p class="description">est artiste, docteur en recherche-création (SACRe) du laboratoire EnsadLab
|
||||
(université PSL) et diplômé d'un DNSEP de l'École des Beaux-Arts de Nantes. Son travail plastique se
|
||||
concentre sur l'émergence, dans une expérience esthétique, de modalités relationnelles entre public,
|
||||
dispositif artistique et environnement. </p>
|
||||
</div>
|
||||
<div class="hgroup-after">+<br>++<br>+++<br>++++<br>+++<br>++<br>+<br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Entouré d’un cadre noir et brillant, posé sur une surface blanche et
|
||||
<p class="following-title">Entouré d’un cadre noir et brillant, posé sur une surface blanche et
|
||||
plastique, un texte s’affiche et décrit ce qui se trouve supposément
|
||||
devant lui : « Un homme se tient dans une salle baignée de lumière rouge
|
||||
». Si un homme se tient en effet debout face à l’appareil, la salle
|
||||
|
|
@ -103,8 +106,7 @@
|
|||
Ducrocq, tandis que Boris Vian, lui, s’en amusait. Dans une
|
||||
correspondance restée célèbre sous le titre « Un robot-poète ne nous
|
||||
fait pas peur »<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>, il
|
||||
écrivait : « Mirandolez,
|
||||
éclaboussez ce robot poète de vos connaissances en cybernétique,
|
||||
écrivait : « Mirandolez, éclaboussez ce <br>robot poète de vos connaissances en cybernétique,
|
||||
expliquez-lui comment il marche et vous l’aurez tout humble à votre
|
||||
merci. »</p>
|
||||
<p>Aujourd’hui, notre rapport aux mots prend une forme nouvelle,
|
||||
|
|
@ -112,7 +114,7 @@
|
|||
l’apparition de vocables qui circulent, se répètent et se diffusent dans
|
||||
nos imaginaires. Parmi eux, un mot en particulier cristallise ces
|
||||
tensions : le mot « arafed ».</p>
|
||||
<h3>Une sociolinguisitique arafed</h3>
|
||||
<h3 class="">Une sociolinguisitique arafed</h3>
|
||||
<p>C’est à l’occasion du Chaos Computer Congress, dans l’une des grandes
|
||||
salles de conférence du centre des congrès de Hambourg, que le terme «
|
||||
arafed » est décrit par deux chercheurs<a href="#fn2" class="footnote-ref" id="fnref2"
|
||||
|
|
@ -138,7 +140,7 @@
|
|||
massivement parce
|
||||
qu’accessible gratuitement et facilement dès 2014, COCO contient des
|
||||
textes en anglais qui décrivent des images. Ces légendes commencent,
|
||||
dans la très grande majorité des cas, par les articles indéfinis « A »
|
||||
dans la très grande majorité des <br><br>cas, par les articles indéfinis « A »
|
||||
et « An » : <em>An apple on a table, a brown teddy bear with a blue bib
|
||||
on that says baby</em>. La surreprésentation de ces articles indéfinis
|
||||
en début de phrase a mené BLIP à produire, au cours de son entraînement,
|
||||
|
|
@ -168,7 +170,7 @@
|
|||
sociolinguistique. Les LLM animent aujourd’hui de très nombreux
|
||||
programmes informatiques, des <em>bots,</em> qui lisent et écrivent sur
|
||||
internet avec des objectifs allant de l’exploration de données (<em>data
|
||||
mining</em>) à la diffusion de propagande politique. De X à Instagram en
|
||||
mining</em>) à la diffusion <br>de propagande politique. De X à Instagram en
|
||||
passant par Reddit, les réseaux sociaux pullulent de ces <em>bots</em>
|
||||
qui produisent textes, images et sons pour nous encourager à interagir
|
||||
avec eux et entretenir ces interactions. Sur des plateformes comme
|
||||
|
|
@ -204,7 +206,7 @@
|
|||
constituent des matrices lexicales que les locuteurs s’approprient : une
|
||||
adoption généralement inconsciente d’un vocabulaire, de lexiques et de
|
||||
structures syntaxiques, provoquée par l’usage répété des LLM dans
|
||||
l’exercice d’écriture. Dans ce contexte, le langage apparaît comme une
|
||||
l’exercice <br>d’écriture. Dans ce contexte, le langage apparaît comme une
|
||||
matière poreuse, traversée par des flux de textes générés
|
||||
automatiquement à travers des logiques systématiques et probabilistes
|
||||
décorrélées des dimensions socio-culturelles des langues.
|
||||
|
|
@ -221,7 +223,14 @@
|
|||
fond : un dialecte hybride qui n’autorise que l’élaboration d’idées
|
||||
aussi précises qu’elles s’avèrent uniformes<a href="#fn10" class="footnote-ref" id="fnref10"
|
||||
role="doc-noteref"><sup>10</sup></a>.</p>
|
||||
|
||||
|
||||
|
||||
|
||||
<h3>La langage est un champ de bataille</h3>
|
||||
|
||||
|
||||
|
||||
<p>Si les LLM apparaissent comme de nouveaux acteurs sociolinguistiques,
|
||||
leurs usages, nombreux et divers, cristallisent aussi une forme de lutte
|
||||
culturelle. Cette conflictualité se donne à voir sur les réseaux sociaux
|
||||
|
|
@ -289,7 +298,9 @@
|
|||
garde-fous des grands modèles de langage à travers l’invention d’une
|
||||
stratégie d’attaque au nom évocateur : la poésie antagoniste<a href="#fn18" class="footnote-ref"
|
||||
id="fnref18" role="doc-noteref"><sup>18</sup></a>.</p>
|
||||
<h3>Pour une poésie antagoniste</h3>
|
||||
|
||||
|
||||
<h3 class="subtitle-top-page">Pour une poesie antagoniste</h3>
|
||||
|
||||
<p>Dans un article publié en 2023, des chercheurs ont démontré qu’ils
|
||||
étaient parvenus à faire apparaître des données d’entraînement brutes
|
||||
|
|
@ -546,7 +557,361 @@
|
|||
|
||||
</section>
|
||||
|
||||
<section class="chapter" id="outdoor-computer-club">
|
||||
|
||||
|
||||
|
||||
<section class="chapter" data-chapter="entretien" id="charlie-aubry">
|
||||
|
||||
<span class="nav-decor">D6cor</span>
|
||||
<span class="nav-author">Charlie Aubry</span>
|
||||
<span class="nav-title">"Des intuitions venues en le faisant"</span>
|
||||
|
||||
<div class="chapter-header">
|
||||
<div class="hgroup-before">
|
||||
++<br>
|
||||
+
|
||||
<br>
|
||||
<br>
|
||||
+<br>
|
||||
+<br>
|
||||
+<br>
|
||||
++<br>
|
||||
+++<br>
|
||||
++++<br>
|
||||
+++++<br>
|
||||
++++<br>
|
||||
+++<br>++<br>+<br>+<br><br>+<br>
|
||||
</div>
|
||||
<div class="hgroup">
|
||||
<div class="title-before">++--------------------------+</div>
|
||||
<h2><span>"Des intuitions venues en le faisant" </span></h2>
|
||||
<p class="author"><span>Charlie Aubry</span></p>
|
||||
<div class="title-after">+--------------------------++</div>
|
||||
</div>
|
||||
<div class="hgroup-after"><br><br>+<br>++++<br>+++<br>++<br>+<br><br>++<br>+<br>+<br>+<br>+<br>+
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="description-before">.............................</div>
|
||||
<div class="description">Entretien avec Charlie Aubry, réalisé le 30 novembre 2025 par Martin De Bie.</div>
|
||||
<div class="description-after">.............................</div>
|
||||
|
||||
<p class="following-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat non odio eu euismod. In sit amet eros ut velit ornare sollicitudin sit amet quis est. Vestibulum ultricies dui commodo diam tristique efficitur. Mauris eleifend enim at vestibulum placerat. Vestibulum placerat elit metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam iaculis magna eget nisl semper, ut scelerisque nisi luctus. Fusce pharetra tincidunt pharetra. Curabitur ac sodales mauris. Praesent erat leo, rhoncus ut felis a, auctor egestas nulla. Nulla pretium ex vitae ante commodo sollicitudin. Phasellus sed velit aliquam, laoreet neque vel, faucibus quam. Etiam posuere cursus sem, quis laoreet tortor posuere ac. Aliquam sed fermentum justo, a lobortis libero. In auctor arcu id metus auctor, ac tincidunt velit euismod. Donec vel arcu ut sapien convallis pharetra.</p>
|
||||
<p>Mauris tincidunt eleifend eleifend. Nunc in elit venenatis, gravida elit ac, commodo dui. Nulla tempus augue lorem, ut dignissim elit gravida vel. Phasellus dui nulla, lacinia et accumsan a, condimentum sed nisl. Aenean tincidunt vitae eros vel sollicitudin. Suspendisse potenti. Vestibulum eget orci in urna maximus tempus. Suspendisse rhoncus imperdiet nunc, vitae ultricies metus ornare quis. Etiam quis auctor erat.</p>
|
||||
|
||||
|
||||
|
||||
<h5>Martin</h5>
|
||||
<p>Bonjour Charlie, merci d’avoir accepté cet entretien pour
|
||||
la revue Décor numéro 6. Avant de commencer, j’aimerais revenir
|
||||
brièvement sur ton travail.</p>
|
||||
<p>Tu es artiste plasticien, et quand on parcourt ton travail, on se
|
||||
rend rapidement compte que tu as un goût assez prononcé pour la
|
||||
collection, le démontage, le hacking de machines, le détournement
|
||||
d’objets souvent désuets et promis à l’abandon. Il y a aussi chez toi
|
||||
une manière assez forte de faire dialoguer une pensée complexe avec des
|
||||
formes très accessibles. Pour cela, tu utilises des médiums très variés
|
||||
: la vidéo, l’installation, des formes parfois plus sculpturales, avec
|
||||
une place souvent centrale accordée au son et à la musique que tu
|
||||
pratiques aussi à côté.</p>
|
||||
<p>Aujourd’hui, j’aimerais qu’on parle plus précisément de ton travail à
|
||||
travers une pièce, une installation : P3 450. Elle a été présentée aux
|
||||
Abattoirs de Toulouse en 2019, puis au Palais de Tokyo en 2020. L’idée,
|
||||
c’est de s’appuyer sur cette pièce pour comprendre ton processus de
|
||||
création, lorsque tu imagines tes installations. J’aimerais qu’on essaye
|
||||
de “craquer ton code créatif” qui me semble être davantage une posture
|
||||
qu’une méthode fixe, que tu appliques à chaque projet.</p>
|
||||
<p>Pour commencer, peux-tu nous décrire brièvement cette installation P3
|
||||
450 ? Son origine, son fonctionnement, et ce que cela produit comme
|
||||
expérience pour le public ?</p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Déjà, merci pour l’invitation.</p>
|
||||
<p>Pour P3 450, si on repart sur la genèse du projet, c’était en réponse
|
||||
à la loi sécurité globale qui donnait le droit aux autorités étatiques
|
||||
de scanner les visages et d’en tirer des informations, et ensuite de
|
||||
faire des croisements de ces données-là : trouver des identités, ou
|
||||
plein d’autres choses. Et je crois que c’est aussi lié avec l’arrivée
|
||||
des premières IA qui se démocratisent, le début de ChatGPT, plein
|
||||
d’autres outils, comme les petites cartes NVIDIA type Jetson Nano qui
|
||||
permettaient de faire tourner des petites IA de reconnaissance. Et d’un
|
||||
coup, à ce moment-là, j’ai commencé à réaliser la force de frappe de ces
|
||||
outils, ou qu’elles allaient avoir : dans les croisements de big data,
|
||||
pouvoir repérer quelqu’un, trouver son compte en banque, se rendre
|
||||
compte que tout est lié informatiquement dans des bases de données. On
|
||||
le voit quand on retrouve des gens en un claquement de doigts. Tous ces
|
||||
croisements entre la plaque d’immatriculation, le compte en banque, la
|
||||
CAF, etc.</p>
|
||||
<p>J’y voyais quelque chose d’assez violent. Je me suis demandé comment
|
||||
ça pouvait se remettre dans l’espace public, enfin dans l’espace
|
||||
d’exposition, mais que ce soit pas utopique : quelque chose de réel,
|
||||
fonctionnel, et aussi fonctionnel juridiquement. À l’époque, on s’est
|
||||
entouré d’une avocate juriste dans le numérique : avec elle, on a trouvé
|
||||
le périmètre d’action, ce qu’on avait le droit de <br>faire. Les lois
|
||||
changeaient tous les six mois : à un instant T ça marchait, et ça ne
|
||||
marche plus maintenant.</p>
|
||||
<p>Je me suis entouré d’un docteur en intelligence artificielle qui
|
||||
s’appelle Jean-Charles Risch, avec qui on a travaillé en collaboration.
|
||||
Il est le grand architecte de l'installation.</p>
|
||||
<p>L’installation ressemble à une espèce de data center. Il y avait
|
||||
l’idée de montrer la consommation, montrer ce que ça génère : des bips
|
||||
informatiques, des ordis qui travaillent, les câbles… On parle du cloud
|
||||
comme si c’était dématérialisé, mais en fait ça arrive vraiment à un
|
||||
endroit, un endroit qui récupère tout ça.[...]</p>
|
||||
<p>En fonction du visage de certains, ça bloquait pendant 30 secondes,
|
||||
et les écrans allaient chercher de la publicité, des choses attractives,
|
||||
pour ces personnes-là, à partir de choses terribles : l’IA qu’on a
|
||||
entraînée essayait de trouver des catégories sociales. C’est un peu ce
|
||||
que fait Facebook : essayer de faire un profil psychologique et social
|
||||
avec quelques photos.[...]</p>
|
||||
<p>Pour entraîner l’IA, qu’on a fabriquée de A à Z, on l’a déposée aussi
|
||||
à l’organisme INPI ou je ne sais plus, pour avoir les droits, parce
|
||||
qu’on l’a fait de zéro. Jean-Charles Risch est spécialisé en machine
|
||||
learning. L’IA était capable d’apprendre à partir de quelques données,
|
||||
puis de s’auto-alimenter. Et là, pour “trouver une classe sociale”, ça
|
||||
veut dire quoi ? C’est intéressant de voir le chemin qu’elle fait.</p>
|
||||
<p>Par exemple : quelqu’un porte du Louis Vuitton, est-ce que c’est
|
||||
quelqu’un de riche ? S’il est racisé, est-ce que c’est toujours
|
||||
quelqu’un de riche ? S’il est blanc, est-ce que c’est quelqu’un de riche
|
||||
? Tout ça. En plus, il y avait une analyse faciale : si la vidéo
|
||||
projetée sur la personne repérée, si la personne souriait, elle avait un
|
||||
bon point. Si c’était intermédiaire ou elle était pas contente, elle
|
||||
avait un mauvais point. À force, elle s’est auto-alimentée. C’était
|
||||
d’une grande précision, très flippant.</p>
|
||||
<h5>Martin</h5>
|
||||
<p>À quel point c’était important dans le processus de
|
||||
création de partir de zéro, d’entraîner “from scratch” un algorithme,
|
||||
alors qu’il existait déjà des modèles, des datasets que tu pouvais
|
||||
récupérer assez facilement ?</em></p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Je crois que c’est un moyen de comprendre, déjà, pour moi.</p>
|
||||
<p>Jean-Charles, lui, était docteur, il comprenait les enjeux. Mais moi
|
||||
je ne comprenais pas bien. J’avais besoin de le faire <br>avec lui pour
|
||||
comprendre l’architecture, et aussi les enjeux : distinguer ce qui est
|
||||
de l’ordre du mythe, du Terminator. D’ailleurs c’est pour ça qu’on l’a
|
||||
nommé <em>P3 450</em> : c’est le nom de série des cartes qui
|
||||
pilotent la quarantaine d’ordis. Et ça faisait référence à au T1000 de
|
||||
Terminator ou bien au film THX 1138…</p>
|
||||
<p>Le titre joue sur le mythe du dépassement de l’humain, mais en le
|
||||
faisant on se rend compte que non : c’est basé sur des clichés racistes,
|
||||
homophobes… c’est terrible. C’était intéressant de comprendre comment
|
||||
cela fonctionne : comment on crée un pseudo-cerveau, quelle autonomie
|
||||
réelle, et comment cela peut s’appliquer.</p>
|
||||
<p>Et juridiquement, partir de zéro permettait de mettre un périmètre
|
||||
clair. On a utilisé des datasets, des banques d’images : pour entraîner
|
||||
une IA, il faut des centaines de milliers d’images. On a eu des
|
||||
librairies open source énormes, des centaines de gigas, pour
|
||||
différencier identité de genre, etc.[...]</p>
|
||||
<h5>Martin</h5>
|
||||
<p>Donc lorsque tu commences à travailler avec Jean-Charles
|
||||
Risch, tu comprends comment cela fonctionne, mais tu n’as pas encore la
|
||||
forme définitive de l’installation. Comment le fait de mettre les mains
|
||||
dans le cambouis a fait évoluer ce que tu allais construire visuellement
|
||||
au fur et à mesure que le projet avançait ?</em></p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Il y avait une grosse part d’impro. Aux Abattoirs, j’avais
|
||||
quatre jours d’installation. Avec beaucoup de schémas, on a fait tourner
|
||||
les machines dans un petit espace, et ça a créé une première version
|
||||
monolithique, à l’échelle de la pièce où on a fait tourner les
|
||||
machines. [...]</p>
|
||||
<p>
|
||||
Quand on entend les ordis réfléchir, le bruit des disques durs… On a
|
||||
envie que ça se matérialise. On s’imagine à l’échelle d’internet : un
|
||||
data center avec des centaines de milliers de serveurs. [...]</p>
|
||||
<p>
|
||||
Mais cela s’est formalisé tard, au moment du montage. Et j’avais envie
|
||||
de ramener quelque chose d’humain, pas juste une baie informatique :
|
||||
raconter des histoires dedans, mettre des objets du quotidien, etc. Mais
|
||||
oui, ça s’est formalisé sur la fin : des intuitions venues en le
|
||||
faisant.</p>
|
||||
<h5>Martin</h5>
|
||||
<p>Tu parlais des biais, ça me fait penser au chatbot de
|
||||
Microsoft (Tay), qui est devenu raciste en moins de 48h. Est-ce qu’à un
|
||||
moment, en voyant évoluer l’IA, vous avez eu peur que ça prenne une
|
||||
mauvaise tournure ?</p><p>
|
||||
Avez-vous choisi de la contraindre, ou au contraire de prendre le risque
|
||||
de laisser apparaître ces dérives, parce que cela fait aussi partie de
|
||||
la réalité de ces algorithmes ?</em></p>
|
||||
<h6>Charlie</h6>
|
||||
<p>On a eu des gros stops de la part du musée. Comme l’idée était
|
||||
que cela puisse exister dans la vraie vie, il fallait que le spectateur
|
||||
rentre sans signer une décharge. Il y avait donc des éléments
|
||||
rhétoriques : on parlait “d’analyse de pixels” plutôt que de
|
||||
portraits. [...]</p>
|
||||
<p>
|
||||
Après, on n’a pas énormément contraint le système. Là où cela a
|
||||
vraiment été limité, c’est sur l’identification des personnes. C’était
|
||||
interdit par la juriste et par le musée. Car lorsqu’on associe un visage
|
||||
humain et qu’on lui dit “trouve une identité”, ça sortait des dingueries
|
||||
: afficher des animaux selon des caractères physiques… mais parfois ça
|
||||
arrivait à trouver une identité, une sur dix tentatives. Cela dépendait
|
||||
surtout de sa médiatisation.</p>
|
||||
<p>Donc tout cela, on l’a exclu. Pour le reste, ça se baladait sur
|
||||
YouTube.</p>
|
||||
<p>Pour le schéma, on avait fait un tableau, une grille que l’IA pouvait
|
||||
auto-remplir. Au début, on a mis des mots-clés caricaturaux : personne
|
||||
âgée est associée à documentaire animalier ou discours politique ; un
|
||||
enfant lui vers Nike, Haribo, etc et via l’API YouTube, on recherche par
|
||||
tags. Puis on lui a dit : tu as ça comme base, auto-alimente toi et
|
||||
génère des nouveaux tags en fonction de la réaction des gens. [...]</p>
|
||||
<p>Mais le spectateur ne voyait pas forcément cette ingénierie
|
||||
derrière.</p>
|
||||
<h5>Martin</h5>
|
||||
<p>Justement, quelle était la perception des gens ?<br />
|
||||
Est-ce qu’ils comprenaient vraiment ce qui se jouait ?<br />
|
||||
Comment ressortaient-ils de l’installation ? Et quels types de discours
|
||||
revenaient le plus souvent ?</em></p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Il y a eu quelques personnes averties qui m’ont écrit pour me
|
||||
dire : “je ne veux pas être enregistré”. Mais je ne suis pas sûr
|
||||
qu’elles comprenaient vraiment ce qui se jouait. C’était surtout la peur
|
||||
d’être filmé.</p>
|
||||
<p>Dans l’installation, il y avait un écran de contrôle de chaque côté,
|
||||
pour que l’on puisse tourner autour. Cela affichait en temps réel ce que
|
||||
l’IA voyait : parfois un focus sur un visage, âge, genre, etc.</p>
|
||||
<p>Mais c’était assez déceptif : je pensais que les gens seraient en
|
||||
colère, qu’ils casseraient tout. En fait, ils étaient plutôt contents.
|
||||
Cela faisait attraction. [...]</p>
|
||||
|
||||
<h5>Martin</h5>
|
||||
<p>Aujourd’hui, en 2026, l’IA est partout dans les
|
||||
conversations.<br />
|
||||
Si la pièce était présentée maintenant, est-ce que tu penses qu’elle
|
||||
aurait un impact différent maintenant que l’on a une conscience plus
|
||||
aiguë de ces enjeux ?<br />
|
||||
Et qu’en serait-il de cette question du visible et de l’invisible,
|
||||
notamment autour des data centers ?</em></p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Je pense que les gens n’ont toujours pas vraiment conscience
|
||||
que les data centers réchauffent le climat, qu’ils consomment énormément
|
||||
d’eau, d’air… Ça, ce n’est pas encore totalement conscientisé. L’IA,
|
||||
oui.</p>
|
||||
<p>Mais pour le reste, on est toujours dans une forme de dictature
|
||||
molle. L’idée, c’est que tu passes dans l’installation, puis tu sors et
|
||||
tu te dis : “tiens, je vais me faire un McDo”, en pensant que ça vient
|
||||
de toi. En fait, l'IA, sur certains attraits, te pousse à consommer.
|
||||
T’as l’impression que ça vient de toi, mais pas du tout. Peut-être qu’il
|
||||
aurait fallu pousser encore plus loin, aller vers une forme de
|
||||
sponsoring assumé. Il y avait déjà YouTube. [...]</p>
|
||||
<h5>Martin</h5>
|
||||
<p>Quel est ton point de vue sur les outils numériques, et
|
||||
plus spécifiquement sur l’IA, dans le champ de l’art ?<br />
|
||||
Pour les créateurs, cela ouvre des possibilités presque infinies, mais
|
||||
cela soulève aussi des questions politiques, parfois polémiques.<br />
|
||||
Comment toi, tu te situes par rapport à cela ?</p>
|
||||
<h6>Charlie</h6>
|
||||
<p>C’est compliqué. Réponse en deux voies.</p>
|
||||
<p>La première voie, c’est que si tu m’avais posé la question avant que
|
||||
je sois professionnel à 100 %, j’aurais probablement répondu autrement.
|
||||
Aujourd’hui, j’ai parfois l’impression d’être davantage le chef d’une
|
||||
PME qu’un artiste plasticien : il y a la compta, l’auto-branding, les
|
||||
réseaux… On se rend compte que tout entre en jeu, la condition sociale{}
|
||||
aussi. Ce sont des autoroutes à vitesses très différentes. [...]</p>
|
||||
<p>Quand je réponds à un appel à candidature, je ne suis pas payé pour
|
||||
le faire, et la réponse est négative la plupart du <br>temps. Passer trois
|
||||
jours dessus, c’est lourd. Donc là-dessus, l’IA m’aide. [...] On passe de
|
||||
quatre jours à deux heures. Et ça me permet de me recentrer sur ma
|
||||
pratique.</p>
|
||||
<p>C’est pareil pour la démocratisation des savoirs : ça démultiplie ma
|
||||
capacité à faire. Si je répare quelque chose, je prends une photo d’un
|
||||
PCB, j’ai immédiatement des pistes. Ça me fait gagner du temps et ça
|
||||
m’apprend aussi des choses. En même temps, je reste critique. Dans le
|
||||
monde de l’art, il y a déjà ce côté performatif permanent, les gros
|
||||
studios, les assistants… Je n’ai pas envie d’entrer là-dedans. Si l’IA
|
||||
me sert, c’est pour dégager du temps et continuer à avoir les mains dans
|
||||
les outils. [...]</p>
|
||||
<p>a seconde voie, ce serait d’être totalement réticent. On est pris
|
||||
dans un paradoxe capitaliste : j’ai des Nike, un iPhone, je sais ce que
|
||||
ça implique en termes de ressources. C’est extrêmement difficile de
|
||||
sortir du flux. Je ne cherche pas une forme de pureté, j’essaie plutôt
|
||||
de resserrer l’angle. Et puis il y a l’absence d’éthique : ces outils
|
||||
peuvent aussi servir à produire du malveillant. On peut la berner
|
||||
facilement et leur faire produire des choses dangereuses sous prétexte
|
||||
de fiction.</p>
|
||||
<p>En même temps, il ne s’agit pas non plus d’être des luddites. C’est
|
||||
une révolution technologique, et s’y opposer frontalement serait tout
|
||||
aussi violent. Pour moi, la question est politique à une échelle
|
||||
globale. Comme pour l’eau ou les vitrines allumées la nuit : ce n’est
|
||||
pas l’individu, c’est le système. Et ce qui se profile, c’est un écart
|
||||
technologique énorme entre les pays, une nouvelle forme d’ordre. À mon
|
||||
échelle, ça me rend plus performatif dans mon domaine. Mais la vraie
|
||||
question reste celle de la balance : est-ce que mon travail justifie de
|
||||
réchauffer 15 litres d’eau par prompt ? On ne matérialise pas réellement
|
||||
l’impact.</p>
|
||||
<h5>Martin</h5>
|
||||
<p>D’ailleurs on parlait des petits modèles qui tournent en
|
||||
local, de souveraineté, d’outils plus frugaux. Cela pose la question de
|
||||
l’ouverture : des outils libres, du partage. Tu es sensible à l’idée de
|
||||
maîtriser tes propres outils, mais aussi à celle de les rendre
|
||||
accessibles.<br />
|
||||
Comment tu te situes par rapport à cela aujourd’hui ?</em></p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Jusqu’à il n’y a pas longtemps, on pouvait trouver le code de
|
||||
P3 450 sur mon site, je suis en train de tout refaire, mais tous mes
|
||||
programmes sont accessibles.</p>
|
||||
<p>La question du droit d’auteur, au XXIe siècle, ce n’est pas là-dessus
|
||||
que je me concentre. Ce qui m’intéresse davantage, c’est la question du
|
||||
revenu continu. Le droit d’auteur est lié à une forme de capital, à des
|
||||
inerties qui enrichissent souvent des gens déjà riches, et c’est très
|
||||
difficile d’entrer dans ces cercles-là.</p>
|
||||
<p>Par contre, la démocratisation des outils m’a rendu autonome, que ce
|
||||
soit sur le code ou sur les outils. Ça permet aussi de comprendre
|
||||
comment les systèmes fonctionnent, de les contourner parfois, et surtout
|
||||
de voir à quel endroit on peut intervenir. Je pense qu’on est dans une
|
||||
bulle, dans quelque chose qui part un peu dans les extrêmes. Mais pour
|
||||
la majorité des usages, ça va se nuancer. Avoir un agent local qui
|
||||
consomme peu, ça deviendra logique. On ne pourra pas continuer à
|
||||
fonctionner comme aujourd’hui.</p>
|
||||
<p>Ce qui m’inquiète, c’est la question d’une forme de “primitivisme”
|
||||
technologique : des gens qui seraient considérés comme primitifs parce
|
||||
qu’ils n’auraient pas accès à certaines augmentations, à certaines
|
||||
technologies. Est-ce qu’il y aura des zones autonomes anti-IA, des
|
||||
dispositifs anti-détection ? On peut déjà imaginer des choses comme ça.
|
||||
Tout est interdépendant. on traite les sujets un par un, mais en réalité
|
||||
tout se répond. Il faudrait des approches globales, à l’échelle
|
||||
internationale sur le plan écologique et technologique. [...]</p>
|
||||
<h5>Martin</h5>
|
||||
<p>Peut-être une dernière chose pour conclure. On est partis
|
||||
un peu dans tous les sens, mais c’est aussi ce que génère ton travail :
|
||||
quand on est artiste aujourd’hui, on est obligé d’aller chercher
|
||||
partout, parce que tout est intrinsèquement lié. On ne peut pas parler
|
||||
d’un sujet sans être “tout azimut”, sans croiser des dimensions
|
||||
techniques, politiques, sociales.</p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Ouais. Le plus dur, aujourd’hui, c’est cette dichotomie entre
|
||||
le régime capitaliste, la démocratisation du confort, et puis la
|
||||
saturation qu’on est en train de vivre. On voit même des mots comme
|
||||
“écoterroristes” entrer dans le langage courant… Alors qu’en parallèle,
|
||||
on sature l’espace, on accumule les déchets, les satellites,
|
||||
Starlink.</p>
|
||||
<p>On est en train de créer une inertie qui se replie sur elle-même.
|
||||
J’ai parfois l’impression que le capitalisme fabrique sa propre
|
||||
obsolescence. C’est quand même fou d’en arriver à penser qu’il serait
|
||||
plus facile d’imaginer une fin du monde qu’une fin du capitalisme. À
|
||||
l’échelle de l’humanité, le capitalisme, c’est 300 ans. Il y a eu
|
||||
d’autres systèmes avant, qui ont duré bien plus longtemps.</p>
|
||||
<p>Malgré tout, je crois qu’à un moment il y aura une forme de force
|
||||
commune. Les gens vont se rassembler, créer ensemble, s’autonomiser. On
|
||||
va forcément taper un plafond, que ce soit en termes de ressources ou de
|
||||
fabrication. Et je pense que la suite, ce sera l’hybridation : garder
|
||||
les vieux objets, les amplis, les Mac et simplement leur ajouter de
|
||||
petits modules, du Bluetooth, un PCB, plutôt que de tout jeter.</p>
|
||||
<p>C’est déjà le cas dans certains pays où tout est récupéré et hybridé
|
||||
, mais sur ces territoires c’est une nécessité. Le vrai problème, c’est
|
||||
le fossé qui va continuer à se creuser entre ceux qui peuvent se
|
||||
permettre de réchauffer les océans et ceux qui en subissent les
|
||||
conséquences. À un moment, il faudra arrêter ou rééquilibrer les choses.
|
||||
Sinon, on sera inondés. On fera des radeaux…</p>
|
||||
<h5>Martin</h5>
|
||||
<p>Merci beaucoup Charlie.</p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Merci à toi.</p>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="chapter" data-chapter="essai" id="outdoor-computer-club">
|
||||
|
||||
|
||||
<span class="nav-decor">D6cor</span>
|
||||
|
|
@ -599,6 +964,7 @@
|
|||
</p>
|
||||
|
||||
<h3>Tv communal :<br /> Télévisions populaires au Venezuela</h3>
|
||||
|
||||
<p>Pour comprendre le projet politique des télévisions communales au
|
||||
Venezuela, il est important de revenir sur la tentative de coup d’État
|
||||
contre Hugo Chávez en 2002, et sur le rôle décisif qu’y ont joué les
|
||||
|
|
@ -837,7 +1203,7 @@
|
|||
communale réside alors dans cette opportunité de se raconter soi-même,
|
||||
de s'auto-déterminer. </p>
|
||||
|
||||
<h4">Une télévision rhizomatique</h4>
|
||||
<h4>Une télévision rhizomatique</h4>
|
||||
<p>Le renversement ne s'opère pas seulement dans la reconfiguration des
|
||||
rôles émetteur-récepteur. Les télévisions de quartier transforment le
|
||||
modèle médiatique dit <em>one-to-many</em> <a href="#fn3" class="footnote-ref" id="fnref3"
|
||||
|
|
@ -899,7 +1265,7 @@
|
|||
positions exclues par les médias mainstream, il est important de se
|
||||
questionner sur le caractère paralysant et individualisant des
|
||||
plateformes qui les accueillent ainsi que sur leur capacité à
|
||||
étanchéifier les communautés. </p>
|
||||
étanchéifier les communautés. </p>
|
||||
|
||||
<p>Les <em>Telestreet</em> et les TV communales proposent d'engager la
|
||||
population autant dans le processus d'information que dans celui de
|
||||
|
|
@ -910,7 +1276,13 @@
|
|||
pirate en 2026 reste à prouver, par l'expérience<a href="#fn5" class="footnote-ref" id="fnref5"
|
||||
role="doc-noteref"><sup>5</sup></a></p>
|
||||
|
||||
<h3 id="bibliographie">Bibliographie : </h3>
|
||||
<div class="bibliographie">
|
||||
|
||||
<h3>Bibliographie</h3>
|
||||
|
||||
|
||||
|
||||
|
||||
<p>Ardizzoni, Michela. « Neighborhood Television Channels in Italy: The
|
||||
Case of Telestreet ». <em>Beyond Monopoly: Globalization and
|
||||
Contemporary Italian Media</em>, s. d. Consulté le 16 février 2026. <a
|
||||
|
|
@ -963,6 +1335,8 @@
|
|||
<p>« What is Mini FM? » Consulté le 12 janvier 2026. <a
|
||||
href="http://anarchy.k2.tku.ac.jp/radio/micro/what_is_minifm/index.html">http://anarchy.k2.tku.ac.jp/radio/micro/what_is_minifm/index.html</a>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<section id="footnotes" class="footnotes footnotes-end-of-document" role="doc-endnotes">
|
||||
<ol>
|
||||
|
|
@ -998,7 +1372,7 @@
|
|||
|
||||
|
||||
|
||||
<section class="chapter" id="jean-noel-lafague">
|
||||
<section class="chapter" data-chapter="essai" id="jean-noel-lafague">
|
||||
|
||||
<span class="nav-decor">D6cor</span>
|
||||
<span class="nav-type">Essai</span>
|
||||
|
|
|
|||
33
maquette-tests/js/decor-blockquote.js
Normal file
33
maquette-tests/js/decor-blockquote.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
|
||||
export default class itemsDecor extends Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.symbol = ".";
|
||||
}
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
let blockquotes = pageElement.querySelectorAll("blockquote");
|
||||
blockquotes.forEach((blockquote) => {
|
||||
const container = document.createElement("div");
|
||||
container.className = "before-blockquote_container";
|
||||
const inner = document.createElement("div");
|
||||
inner.className = "before-blockquote";
|
||||
inner.textContent = this.symbol.repeat(300);
|
||||
container.appendChild(inner);
|
||||
blockquote.insertBefore(container, blockquote.firstChild);
|
||||
container.style.height = `${blockquote.offsetHeight}px`;
|
||||
|
||||
const containerAfter = document.createElement("div");
|
||||
containerAfter.className = "after-blockquote_container";
|
||||
const innerAfter = document.createElement("div");
|
||||
innerAfter.className = "after-blockquote";
|
||||
innerAfter.textContent = this.symbol.repeat(300);
|
||||
containerAfter.appendChild(innerAfter);
|
||||
blockquote.insertBefore(containerAfter, container.nextSibling);
|
||||
containerAfter.style.height = `${blockquote.offsetHeight}px`;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
57
maquette-tests/js/decor-num-pages.js
Normal file
57
maquette-tests/js/decor-num-pages.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
|
||||
export default class itemsDecor extends Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.symbol = "+";
|
||||
this.totalPages = 33;
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
const numPage = parseInt(pageElement.dataset.pageNumber);
|
||||
// const half = this.totalPages / 2;
|
||||
// const isFirstHalf = numPage <= half;
|
||||
// console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié");
|
||||
|
||||
const area = pageElement.querySelector(".pagedjs_area");
|
||||
if (area) {
|
||||
const container = document.createElement("div");
|
||||
container.className = "running-page_container";
|
||||
|
||||
const progress = (numPage / this.totalPages) * 100;
|
||||
|
||||
const symbols = document.createElement("div");
|
||||
symbols.className = "symbols";
|
||||
symbols.style.width = `${progress}%`;
|
||||
symbols.style.wordBreak = "break-all";
|
||||
|
||||
const dots = document.createElement("div");
|
||||
dots.className = "dots";
|
||||
dots.textContent = ".".repeat(100);
|
||||
|
||||
const runningPage = document.createElement("div");
|
||||
runningPage.className = "running-page";
|
||||
runningPage.appendChild(symbols);
|
||||
runningPage.appendChild(dots);
|
||||
container.appendChild(runningPage);
|
||||
area.after(container);
|
||||
|
||||
symbols.textContent = this.symbol;
|
||||
const baseHeight = symbols.offsetHeight;
|
||||
let count = 1;
|
||||
while (count < 2000) {
|
||||
count++;
|
||||
symbols.textContent = this.symbol.repeat(count);
|
||||
if (symbols.offsetHeight > baseHeight) {
|
||||
symbols.textContent = this.symbol.repeat(count - 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
154
maquette-tests/js/decor-subtitles.js
Normal file
154
maquette-tests/js/decor-subtitles.js
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
|
||||
export default class itemsDecor extends Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
this.symbol = "+";
|
||||
}
|
||||
|
||||
|
||||
|
||||
createDecor(symbol, sizes, sizeClass, baseClass = "decor-h3") {
|
||||
const div = document.createElement("div");
|
||||
div.className = `${baseClass} ${sizeClass}`;
|
||||
sizes.forEach((n, i) => {
|
||||
const line = document.createElement("div");
|
||||
line.dataset.count = i + 1;
|
||||
line.textContent = symbol.repeat(n);
|
||||
div.appendChild(line);
|
||||
});
|
||||
return div;
|
||||
}
|
||||
|
||||
createLine(symbol, nodes) {
|
||||
const line = document.createElement("span");
|
||||
line.className = "subtitle-line";
|
||||
|
||||
const spanBefore = document.createElement("span");
|
||||
spanBefore.className = "subtitle-before";
|
||||
spanBefore.textContent = symbol.repeat(3);
|
||||
line.appendChild(spanBefore);
|
||||
|
||||
const spanText = document.createElement("span");
|
||||
spanText.className = "subtitle-text";
|
||||
nodes.forEach(node => spanText.appendChild(node));
|
||||
line.appendChild(spanText);
|
||||
|
||||
const spanAfter = document.createElement("span");
|
||||
spanAfter.className = "subtitle-after";
|
||||
spanAfter.textContent = "";
|
||||
line.appendChild(spanAfter);
|
||||
|
||||
return line;
|
||||
}
|
||||
|
||||
|
||||
processTitle(subtitle, symbol, withDecor, isLeft) {
|
||||
if (subtitle.querySelector(".subtitle-line")) return;
|
||||
|
||||
const children = Array.from(subtitle.childNodes);
|
||||
|
||||
// Découper en segments à chaque <br>
|
||||
const segments = [];
|
||||
let current = [];
|
||||
children.forEach(node => {
|
||||
if (node.nodeName === "BR") {
|
||||
segments.push(current);
|
||||
current = [];
|
||||
} else {
|
||||
current.push(node);
|
||||
}
|
||||
});
|
||||
segments.push(current);
|
||||
|
||||
// Reconstruire le titre avec des .subtitle-line
|
||||
subtitle.innerHTML = "";
|
||||
segments.filter(seg => seg.length > 0).forEach(nodes => {
|
||||
const line = this.createLine(symbol, nodes);
|
||||
subtitle.appendChild(line);
|
||||
|
||||
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);
|
||||
if (line.offsetHeight > baseHeight) {
|
||||
spanAfter.textContent = symbol.repeat(count - 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
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").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h3");
|
||||
});
|
||||
content.querySelectorAll("h4").forEach(subtitle => {
|
||||
const next = subtitle.nextElementSibling;
|
||||
if (next) next.classList.add("following-h4");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
const symbol = this.symbol;
|
||||
const isLeft = pageElement.classList.contains("pagedjs_left_page");
|
||||
|
||||
pageElement.querySelectorAll("h3").forEach(subtitle => {
|
||||
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("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.parentNode.insertBefore(container, h6);
|
||||
container.appendChild(firstDecor);
|
||||
container.appendChild(h6);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { Handler } from '/csspageweaver/lib/paged.esm.js';
|
||||
|
||||
|
||||
export default class myCustomHandler2 extends Handler {
|
||||
constructor(chunker, polisher, caller) {
|
||||
super(chunker, polisher, caller);
|
||||
}
|
||||
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
let pageArea = pageElement.querySelector(".pagedjs_area");
|
||||
let pageAreaTop = pageArea.getBoundingClientRect().top;
|
||||
let items = pageElement.querySelectorAll("p, h3, h4, .inline-note");
|
||||
items.forEach(function (item) {
|
||||
let topOffset = item.getBoundingClientRect().top - pageAreaTop;
|
||||
let decor = document.createElement("div");
|
||||
decor.classList.add("item-decor");
|
||||
decor.style.top = topOffset + "px";
|
||||
decor.textContent = pageElement.classList.contains("pagedjs_left_page") ? "<" : ">";
|
||||
pageArea.appendChild(decor);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue