gaa unicode entretiens
This commit is contained in:
Julie Blanc
parent
a34e879296
commit
fe9a3228a8
3 changed files with 120 additions and 71 deletions
|
|
@ -1,53 +1,52 @@
|
|||
|
||||
.description{
|
||||
/* margin-bottom: calc(var(--baseline)*1); */
|
||||
.description {
|
||||
/* margin-bottom: calc(var(--baseline)*1); */
|
||||
padding-left: calc(var(--unit)*0.75);
|
||||
padding-right: calc(var(--unit)*0.75);
|
||||
padding-right: calc(var(--unit)*0.75);
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.description-after{
|
||||
.description-after {
|
||||
margin-top: -2px;
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
.description-before{
|
||||
.description-before {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.description-before,
|
||||
.description-after{
|
||||
|
||||
.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);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
|
||||
}
|
||||
|
||||
.description::before,
|
||||
.description::after{
|
||||
.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;
|
||||
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{
|
||||
.description::before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.description::after{
|
||||
.description::after {
|
||||
position: absolute;
|
||||
right: -13px;
|
||||
top: -3px;
|
||||
|
|
@ -58,40 +57,79 @@
|
|||
|
||||
|
||||
|
||||
h6{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
font-weight: normal;
|
||||
/* margin-bottom: calc(var(--baseline)*1);
|
||||
margin-top: calc(var(--baseline)*1); */
|
||||
position: relative;
|
||||
background-color: white;
|
||||
display: inline;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
top: calc(var(--baseline)*1);
|
||||
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;
|
||||
}
|
||||
|
||||
h6::before{
|
||||
h5::before, h6::before{
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
}
|
||||
|
||||
|
||||
.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: "++";
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
font-family: var(--sign-family);
|
||||
line-height: var(--sign-baseline);
|
||||
|
||||
}
|
||||
|
||||
|
||||
.h6-before,
|
||||
.h6-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);
|
||||
}
|
||||
|
||||
.h6-before{
|
||||
.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: -40px;
|
||||
left: -49px;
|
||||
top: calc(var(--baseline)*-2.5 + 11px);
|
||||
}
|
||||
|
||||
.pagedjs_right_page .decor-h6 {
|
||||
left: -80px;
|
||||
top: calc(var(--baseline)*-4.5 + 11px);
|
||||
}
|
||||
|
|
@ -94,12 +94,8 @@
|
|||
<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>
|
||||
|
||||
|
||||
<div class="h6-before">
|
||||
<div data-count="1">+</div>
|
||||
<div data-count="1">++</div>
|
||||
<div data-count="1">+</div>
|
||||
</div>
|
||||
<h6>Martin</h6>
|
||||
|
||||
<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>
|
||||
|
|
@ -175,7 +171,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -199,7 +195,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -221,7 +217,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -253,7 +249,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -270,7 +266,7 @@
|
|||
colère, qu’ils casseraient tout. En fait, ils étaient plutôt contents.
|
||||
Cela faisait attraction. [...]</p>
|
||||
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -290,7 +286,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -335,7 +331,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -367,7 +363,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<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
|
||||
|
|
@ -398,7 +394,7 @@
|
|||
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>
|
||||
<h6>Martin</h6>
|
||||
<h5>Martin</h5>
|
||||
<p>Merci beaucoup Charlie.</p>
|
||||
<h6>Charlie</h6>
|
||||
<p>Merci à toi.</p>
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ export default class itemsDecor extends Handler {
|
|||
|
||||
|
||||
|
||||
createDecor(symbol, sizes, sizeClass) {
|
||||
createDecor(symbol, sizes, sizeClass, baseClass = "decor-h3") {
|
||||
const div = document.createElement("div");
|
||||
div.className = `decor-h3 ${sizeClass}`;
|
||||
div.className = `${baseClass} ${sizeClass}`;
|
||||
sizes.forEach((n, i) => {
|
||||
const line = document.createElement("div");
|
||||
line.dataset.count = i + 1;
|
||||
|
|
@ -43,6 +43,7 @@ export default class itemsDecor extends Handler {
|
|||
return line;
|
||||
}
|
||||
|
||||
|
||||
processTitle(subtitle, symbol, withDecor, isLeft) {
|
||||
if (subtitle.querySelector(".subtitle-line")) return;
|
||||
|
||||
|
|
@ -131,6 +132,20 @@ export default class itemsDecor extends Handler {
|
|||
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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue