From 738d47008772c6a412e497a3c47a3e411ec3d423 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Mon, 16 Mar 2026 23:29:25 +0100 Subject: [PATCH] all on grid --- maquette-tests/assets/css/01_var.css | 5 +- maquette-tests/assets/css/03_layout.css | 6 +- maquette-tests/assets/css/chapter-header.css | 229 +++++++++---------- maquette-tests/assets/css/notes.css | 1 + maquette-tests/assets/css/text.css | 15 +- maquette-tests/index.html | 36 +-- 6 files changed, 146 insertions(+), 146 deletions(-) diff --git a/maquette-tests/assets/css/01_var.css b/maquette-tests/assets/css/01_var.css index c6f639b..33a17c3 100644 --- a/maquette-tests/assets/css/01_var.css +++ b/maquette-tests/assets/css/01_var.css @@ -67,10 +67,11 @@ --sign-family: 'Teletext'; - --sign-size: 16px; + --sign-size: 14px; --sign-baseline: 18px; - --sign-spacing: 0.45rem; + /* --sign-spacing: 0.45rem; */ --sign-spacing: 7.5px; + --sign-spacing-dots: 7px; --sign-color: var(--blue); /* --sign-color: black; */ diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index d42cf9b..a11585d 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -3,7 +3,7 @@ @page { size: 165mm 240mm; margin-top: 22mm; - margin-bottom: 22mm; + margin-bottom: 24mm; bleed: 6mm; marks: crop; --symbol-top: 1px; @@ -25,7 +25,7 @@ vertical-align: top; padding-top: var(--running-top); text-align: left; - margin-left: 3mm; + padding-left: 19px; } @@ -103,7 +103,7 @@ vertical-align: top; padding-top: var(--running-top); text-align: left; - margin-left: 3mm; + padding-left: 19px; } diff --git a/maquette-tests/assets/css/chapter-header.css b/maquette-tests/assets/css/chapter-header.css index 4dcb0f0..4fa5441 100644 --- a/maquette-tests/assets/css/chapter-header.css +++ b/maquette-tests/assets/css/chapter-header.css @@ -1,29 +1,29 @@ +.chapter { + break-before: right; + page: chapter; +} - .chapter { - break-before: right; - page: chapter; + +@page chapter: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) var(--symbol) var(--symbol); } - - @page chapter:first { - /* background-color: var(--blue); */ - /* color: white!important; */ - @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) var(--symbol) var(--symbol) ; - /* color: white; */ - } - @top-left { - content: none; - } - @top-center { - content: none; - } - @top-right { - content: none; - } - + @top-left { + content: none; } + @top-center { + content: none; + } + + @top-right { + content: none; + } + +} + .chapter-header { position: relative; @@ -31,140 +31,137 @@ /* break-after: page; */ - + } -.chapter-header .hgroup{ - /* font-family: 'Routed Gothic Wide'; */ +.chapter-header .hgroup { font-size: 22px; line-height: 1; font-weight: normal; - /* text-align: center; */ - margin-top: calc(var(--baseline)*2); - margin-bottom: calc(var(--baseline)*4); - margin-right: calc(var(--unit)*2); + /* margin-top: calc(var(--baseline)*2);*/ + position: relative; + top: calc(var(--baseline)*0.25); + margin-bottom: calc(var(--baseline)*3 + 11px); + padding-right: calc(var(--unit)*2); + position: relative; + padding-left: 15px; } -.chapter-header .type{ - color: var(--blue); - font-family: 'Teletext'; - font-weight: 200; - /* font-size: 22px; */ - line-height: 1; - font-weight: normal; - text-transform: uppercase; - /* text-decoration: underline; - text-underline-offset: 2px; */ +.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::before{ +.chapter-header .type { display: none; + + } -.chapter-header .hgroup h2{ - font-weight: normal; - font-size: 1em; - display: inline; - line-height: 1.3; - box-sizing: border-box; - font-family: 'Teletext'; - font-weight: 200; - text-align: center; - +.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; - /* text-transform: uppercase; */ } -.chapter-header .hgroup h2 span{ +.chapter-header .hgroup h2 span { color: white; padding-left: 0.25ch; padding-right: 0.25ch; box-decoration-break: clone; background-color: var(--blue); - padding: 2px 0.25ch; - /* background: linear-gradient(var(--blue), var(--blue)) center / 100% 70% no-repeat; */ - text-transform: uppercase; + padding: 1px 0.25ch; + text-transform: uppercase; } -.chapter-header .author{ - font-family: 'Teletext'; - font-weight: 200; - color: var(--blue); - margin-top: calc(var(--baseline)*1); - text-transform: uppercase; +.chapter-header .author span { + font-family: 'Teletext'; + color: var(--blue); + margin-top: calc(var(--baseline)*1.5); + text-transform: uppercase; + background-color: white; + display: inline-block; } -.chapter-header .hgroup h2::after{ - /* content: "| | | | | "; + + + +.chapter-header .author::before { + display: none; +} + + +.chapter-header .bio { + display: none; +} + +.hgroup-before, +.hgroup-after, +.chapter-header .title-before, +.chapter-header .title-after { font-size: var(--sign-size); - color: var(--blue); - letter-spacing: var(--sign-spacing); - line-height: var(--sign-baseline); - display: block; - width: 1ch; - text-align: center; - margin-left: calc(var(--unit)*0.5); */ + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + font-family: var(--sign-family); + line-height: calc(var(--sign-baseline)*1); + } -.chapter-header .author::before{ - display: none; -} - - -.chapter-header .bio{ - display: none; -} - - -/* .chapter-header p { - text-indent: 0px !important; -} - -.chapter-header .type, -.chapter-header .h2-pattern { - display: none; -} - - - - - -.chapter-header .hgroup{ - - margin-left: 15%; +.chapter-header .title-before, +.chapter-header .title-after{ + white-space: nowrap; + position: absolute; + left: 0px; } -.chapter-header h2 { - font-family: 'Routed Gothic Wide'; - line-height: 1.1; - font-size: 36px; - font-weight: normal; - +.chapter-header .title-before { + top: calc(var(--baseline)*-1.25); +} - +.chapter-header .title-after { + bottom: calc(var(--baseline)*-1.5); } -.chapter-header .author { - font-family: 'Routed Gothic Wide'; - font-size: 36px; - margin-top: calc(var(--baseline)*6); - margin-bottom: calc(var(--baseline)*2); - - - +.hgroup-before{ + position: absolute; + left: calc(var(--pagedjs-margin-left)*-1); + padding-left: 19px; + top: -36px; } -.chapter-header .bio{ - display: none; -} +.hgroup-after{ + position: absolute; + bottom: calc(var(--baseline)*-5 + 4px); + right: calc(var(--pagedjs-margin-right)*-1); -.chapter-header{ - margin-bottom: calc(var(--baseline)*1); -} */ + text-align: right; + /* left: calc(var(--pagedjs-margin-left)*-1); + padding-left: 19px; + top: -36px; */ +} \ No newline at end of file diff --git a/maquette-tests/assets/css/notes.css b/maquette-tests/assets/css/notes.css index ec43341..aee7dc9 100644 --- a/maquette-tests/assets/css/notes.css +++ b/maquette-tests/assets/css/notes.css @@ -41,6 +41,7 @@ padding-left: 0.25ch; position: relative; top: -3px; + line-height: 0; } diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css index e8b33d9..9f5f62c 100644 --- a/maquette-tests/assets/css/text.css +++ b/maquette-tests/assets/css/text.css @@ -1,8 +1,8 @@ .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; @@ -10,21 +10,20 @@ } - - - p::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); + line-height: 0px; position: relative; top: -3px; - padding-right: 8px; + padding-left: 2px; + padding-right: 0px; } +.following-title::before, .following-h3::before { display: none !important; } @@ -48,7 +47,7 @@ p::before { .bibliographie p::before { content: "......"; position: absolute; - left: calc(var(--unit)*0.75); + /* left: calc(var(--unit)*0.75); */ left: calc(var(--unit)*0.75 + 16px); top: -6px; display: block !important; diff --git a/maquette-tests/index.html b/maquette-tests/index.html index 7e0ef29..3a6ebae 100644 --- a/maquette-tests/index.html +++ b/maquette-tests/index.html @@ -40,10 +40,7 @@

Décor 6 - Numérique

- D6cor - Essai - Olivain Porry - Un robot-poète ne nous fait toujours pas peur + @@ -61,24 +58,30 @@
+ D6cor + Essai + Olivain Porry + Un robot-poete ne nous fait toujours pas peur

Essai

+
++++
+++++
+++
++
+ +
+
+
+
+
+
+ +++
++
+
+
+ +

+
++
+
-

Un robot-poète ne nous fait toujours pas peur

-

Olivain Porry

+
++--------------------------+
+

Un robot-poete
ne nous fait toujours
pas peur

+

Olivain Porry

+
+--------------------------++
+
+
++
+++
++++
+++
++
+
+
+ -
-

Olivain Porry

-

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.

-
-

Entouré d’un cadre noir et brillant, posé sur une surface blanche et +

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 @@ -106,8 +109,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, @@ -140,7 +142,7 @@ 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, + 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