From 1867e544003e24aa9a5434255b9f3fc97dfd0292 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Tue, 17 Mar 2026 15:59:47 +0100 Subject: [PATCH] details styles --- maquette-tests/assets/css/03_layout.css | 2 +- maquette-tests/assets/css/chapter-header.css | 24 +++++++++----------- maquette-tests/assets/css/entretiens.css | 15 +++++++----- maquette-tests/assets/css/subtitles.css | 18 +++++++++++++-- maquette-tests/index.html | 19 +++++++++------- maquette-tests/js/decor-subtitles.js | 6 +++-- 6 files changed, 52 insertions(+), 32 deletions(-) diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index cdd9103..0724eef 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -2,7 +2,7 @@ @page { size: 165mm 240mm; - margin-top: 22mm; + margin-top: 95px; margin-bottom: 18mm; bleed: 6mm; marks: crop; diff --git a/maquette-tests/assets/css/chapter-header.css b/maquette-tests/assets/css/chapter-header.css index 372ed70..40b4b68 100644 --- a/maquette-tests/assets/css/chapter-header.css +++ b/maquette-tests/assets/css/chapter-header.css @@ -18,8 +18,8 @@ font-weight: normal; /* margin-top: calc(var(--baseline)*2);*/ position: relative; - top: calc(var(--baseline)*0.25); - margin-bottom: calc(var(--baseline)*3 + 11px); + 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; @@ -122,7 +122,7 @@ } .chapter-header .title-after { - bottom: calc(var(--baseline)*-1.5); + bottom: calc(var(--baseline)*-1.5 + 1px); } @@ -130,18 +130,14 @@ position: absolute; left: calc(var(--pagedjs-margin-left)*-1); padding-left: 19px; - top: -36px; + top: -47px; } .hgroup-after{ position: absolute; - bottom: calc(var(--baseline)*-5 + 4px); + bottom: calc(var(--baseline)*-5 - 1px); right: calc(var(--pagedjs-margin-right)*-1); - text-align: right; - /* left: calc(var(--pagedjs-margin-left)*-1); - padding-left: 19px; - top: -36px; */ } @@ -151,17 +147,19 @@ /* SPECIFIC ----------------------------------------------- */ #charlie-aubry .hgroup{ - top: calc(var(--baseline)*0.5); + top: calc(var(--baseline)*-0.25 - 2px); + top: -2px; } #charlie-aubry .chapter-header .title-before{ - top: calc(var(--baseline) * -1.5); - + /* 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)*-12 - 4px); + bottom: calc(var(--baseline)*-11 - 10px); } \ No newline at end of file diff --git a/maquette-tests/assets/css/entretiens.css b/maquette-tests/assets/css/entretiens.css index c685bf7..fa42bc2 100644 --- a/maquette-tests/assets/css/entretiens.css +++ b/maquette-tests/assets/css/entretiens.css @@ -1,19 +1,22 @@ .description { - /* margin-bottom: calc(var(--baseline)*1); */ padding-left: calc(var(--unit)*0.75); padding-right: calc(var(--unit)*0.75); position: relative; + top: -4px; + } -.description-after { - margin-top: -2px; - margin-bottom: calc(var(--baseline)*1); -} .description-before { - margin-bottom: 2px; + position: relative; + top: -6px; } +.description-after { + margin-top: -5px; + margin-bottom: calc(var(--baseline)*1 - 3px); +} + .description-before, .description-after { diff --git a/maquette-tests/assets/css/subtitles.css b/maquette-tests/assets/css/subtitles.css index f519d94..c852a1d 100644 --- a/maquette-tests/assets/css/subtitles.css +++ b/maquette-tests/assets/css/subtitles.css @@ -97,12 +97,26 @@ h3, h4{ + + + /* if page top */ -.subtitle-top-page { +.pagedjs_right_page .subtitle-top-page h3 { margin-top: 0px; } -.subtitle-top-page [data-count="2"]{ +.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 +} diff --git a/maquette-tests/index.html b/maquette-tests/index.html index 6e97cfc..d6833da 100644 --- a/maquette-tests/index.html +++ b/maquette-tests/index.html @@ -106,7 +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 »1, il - écrivait : « Mirandolez,
éclaboussez ce robot poète de vos connaissances en cybernétique, + écrivait : « Mirandolez, éclaboussez ce
robot poète de vos connaissances en cybernétique, expliquez-lui comment il marche et vous l’aurez tout humble à votre merci. »

Aujourd’hui, notre rapport aux mots prend une forme nouvelle, @@ -139,8 +139,8 @@ qu’est COCO5. Utilisé 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 » + 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 » et « An » : An apple on a table, a brown teddy bear with a blue bib on that says baby. La surreprésentation de ces articles indéfinis en début de phrase a mené BLIP à produire, au cours de son entraînement, @@ -170,7 +170,7 @@ sociolinguistique. Les LLM animent aujourd’hui de très nombreux programmes informatiques, des bots, qui lisent et écrivent sur internet avec des objectifs allant de l’exploration de données (data - mining) à la diffusion de propagande politique. De X à Instagram en + mining) à la diffusion
de propagande politique. De X à Instagram en passant par Reddit, les réseaux sociaux pullulent de ces bots qui produisent textes, images et sons pour nous encourager à interagir avec eux et entretenir ces interactions. Sur des plateformes comme @@ -206,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
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. @@ -298,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 antagoniste18.

-

Pour une poésie antagoniste

+ + +

Pour une poesie antagoniste

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 @@ -806,7 +808,7 @@ réseaux… On se rend compte que tout entre en jeu, la condition sociale{} aussi. Ce sont des autoroutes à vitesses très différentes. [...]

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 temps. Passer trois + le faire, et la réponse est négative la plupart du
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.

@@ -875,7 +877,8 @@ 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.

-
Charlie
Ouais. Le plus dur, aujourd’hui, c’est cette dichotomie entre +
Charlie
+

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, diff --git a/maquette-tests/js/decor-subtitles.js b/maquette-tests/js/decor-subtitles.js index 23926e4..2d1b2f8 100644 --- a/maquette-tests/js/decor-subtitles.js +++ b/maquette-tests/js/decor-subtitles.js @@ -94,7 +94,8 @@ export default class itemsDecor extends Handler { secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small"); } const container = document.createElement("div"); - container.className = "h3_container"; + container.className = "h3_container " + subtitle.className; + subtitle.className = ""; subtitle.parentNode.insertBefore(container, subtitle); container.appendChild(firstDecor); container.appendChild(secondDecor); @@ -128,7 +129,8 @@ export default class itemsDecor extends Handler { pageElement.querySelectorAll("h4").forEach(subtitle => { this.processTitle(subtitle, symbol, false, isLeft); const container = document.createElement("div"); - container.className = "h4_container"; + container.className = "h4_container " + subtitle.className; + subtitle.className = ""; subtitle.parentNode.insertBefore(container, subtitle); container.appendChild(subtitle); });