Julie/decor-6-expe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

all on grid

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 23:29:25 +01:00
parent ce4d7285fe
commit 738d470087
6 changed files with 146 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

5
maquette-tests/assets/css/01_var.css
View file

@ -67,10 +67,11 @@
--sign-family: 'Teletext'; --sign-family: 'Teletext';
--sign-size: 16px; --sign-size: 14px;
--sign-baseline: 18px; --sign-baseline: 18px;
--sign-spacing: 0.45rem; /* --sign-spacing: 0.45rem; */
--sign-spacing: 7.5px; --sign-spacing: 7.5px;
--sign-spacing-dots: 7px;
--sign-color: var(--blue); --sign-color: var(--blue);
/* --sign-color: black; */ /* --sign-color: black; */

6
maquette-tests/assets/css/03_layout.css
View file

@ -3,7 +3,7 @@
@page { @page {
size: 165mm 240mm; size: 165mm 240mm;
margin-top: 22mm; margin-top: 22mm;
margin-bottom: 22mm; margin-bottom: 24mm;
bleed: 6mm; bleed: 6mm;
marks: crop; marks: crop;
--symbol-top: 1px; --symbol-top: 1px;
@ -25,7 +25,7 @@
vertical-align: top; vertical-align: top;
padding-top: var(--running-top); padding-top: var(--running-top);
text-align: left; text-align: left;
margin-left: 3mm; padding-left: 19px;
} }
@ -103,7 +103,7 @@
vertical-align: top; vertical-align: top;
padding-top: var(--running-top); padding-top: var(--running-top);
text-align: left; text-align: left;
margin-left: 3mm; padding-left: 19px;
} }

229
maquette-tests/assets/css/chapter-header.css
View file

@ -1,29 +1,29 @@
.chapter {
break-before: right;
page: chapter;
}
.chapter {
break-before: right; @page chapter:first {
page: chapter;
@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);
} }
@top-left {
@page chapter:first { content: none;
/* 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-center {
content: none;
}
@top-right {
content: none;
}
}
.chapter-header { .chapter-header {
position: relative; position: relative;
@ -31,140 +31,137 @@
/* break-after: page; */ /* break-after: page; */
} }
.chapter-header .hgroup{ .chapter-header .hgroup {
/* font-family: 'Routed Gothic Wide'; */
font-size: 22px; font-size: 22px;
line-height: 1; line-height: 1;
font-weight: normal; font-weight: normal;
/* text-align: center; */ /* margin-top: calc(var(--baseline)*2);*/
margin-top: calc(var(--baseline)*2); position: relative;
margin-bottom: calc(var(--baseline)*4); top: calc(var(--baseline)*0.25);
margin-right: calc(var(--unit)*2); margin-bottom: calc(var(--baseline)*3 + 11px);
padding-right: calc(var(--unit)*2);
position: relative;
padding-left: 15px;
} }
.chapter-header .type{ .chapter-header .hgroup::before {
color: var(--blue); content: "***************************************************************************************************************************************************************************************************************************************************************************************************************************************************";
font-family: 'Teletext'; display: block;
font-weight: 200; width: calc(100% + 1ch);
/* font-size: 22px; */ height: 100%;
line-height: 1;
font-weight: normal;
text-transform: uppercase;
/* text-decoration: underline;
text-underline-offset: 2px; */
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; 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'; .chapter-header .hgroup h2 {
font-weight: 200; font-family: 'Teletext';
text-align: center; 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; color: white;
padding-left: 0.25ch; padding-left: 0.25ch;
padding-right: 0.25ch; padding-right: 0.25ch;
box-decoration-break: clone; box-decoration-break: clone;
background-color: var(--blue); background-color: var(--blue);
padding: 2px 0.25ch; padding: 1px 0.25ch;
/* background: linear-gradient(var(--blue), var(--blue)) center / 100% 70% no-repeat; */ text-transform: uppercase;
text-transform: uppercase;
} }
.chapter-header .author{ .chapter-header .author span {
font-family: 'Teletext'; font-family: 'Teletext';
font-weight: 200; color: var(--blue);
color: var(--blue); margin-top: calc(var(--baseline)*1.5);
margin-top: calc(var(--baseline)*1); text-transform: uppercase;
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); font-size: var(--sign-size);
color: var(--blue); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline); font-family: var(--sign-family);
display: block; line-height: calc(var(--sign-baseline)*1);
width: 1ch;
text-align: center;
margin-left: calc(var(--unit)*0.5); */
} }
.chapter-header .author::before{ .chapter-header .title-before,
display: none; .chapter-header .title-after{
} white-space: nowrap;
position: absolute;
left: 0px;
.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 h2 { .chapter-header .title-before {
font-family: 'Routed Gothic Wide'; top: calc(var(--baseline)*-1.25);
line-height: 1.1; }
font-size: 36px;
font-weight: normal;
.chapter-header .title-after {
bottom: calc(var(--baseline)*-1.5);
} }
.chapter-header .author { .hgroup-before{
font-family: 'Routed Gothic Wide'; position: absolute;
font-size: 36px; left: calc(var(--pagedjs-margin-left)*-1);
margin-top: calc(var(--baseline)*6); padding-left: 19px;
margin-bottom: calc(var(--baseline)*2); top: -36px;
} }
.chapter-header .bio{ .hgroup-after{
display: none; position: absolute;
} bottom: calc(var(--baseline)*-5 + 4px);
right: calc(var(--pagedjs-margin-right)*-1);
.chapter-header{ text-align: right;
margin-bottom: calc(var(--baseline)*1); /* left: calc(var(--pagedjs-margin-left)*-1);
} */ padding-left: 19px;
top: -36px; */
}

1
maquette-tests/assets/css/notes.css
View file

@ -41,6 +41,7 @@
padding-left: 0.25ch; padding-left: 0.25ch;
position: relative; position: relative;
top: -3px; top: -3px;
line-height: 0;
} }

15
maquette-tests/assets/css/text.css
View file

@ -1,8 +1,8 @@
.chapter p { .chapter p {
text-align: justify; text-align: justify;
hyphens: auto; hyphens: auto;
hyphenate-limit-chars: 8 3; hyphenate-limit-chars: 7 3 2;
position: relative; /* position: relative; */
orphans: 2; orphans: 2;
hyphens: 2; hyphens: 2;
@ -10,21 +10,20 @@
} }
p::before { p::before {
content: "..........."; content: "...........";
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family); font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: 0px;
position: relative; position: relative;
top: -3px; top: -3px;
padding-right: 8px; padding-left: 2px;
padding-right: 0px;
} }
.following-title::before,
.following-h3::before { .following-h3::before {
display: none !important; display: none !important;
} }
@ -48,7 +47,7 @@ p::before {
.bibliographie p::before { .bibliographie p::before {
content: "......"; content: "......";
position: absolute; position: absolute;
left: calc(var(--unit)*0.75); /* left: calc(var(--unit)*0.75); */
left: calc(var(--unit)*0.75 + 16px); left: calc(var(--unit)*0.75 + 16px);
top: -6px; top: -6px;
display: block !important; display: block !important;

36
maquette-tests/index.html
View file

@ -40,10 +40,7 @@
<h1>Décor 6 - Numérique</h1> <h1>Décor 6 - Numérique</h1>
</section> </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&nbsp;nous fait toujours pas peur</span>
@ -61,24 +58,30 @@
<section class="chapter" id="olivain-porry"> <section class="chapter" id="olivain-porry">
<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-poete ne&nbsp;nous fait toujours pas peur</span>
<div class="chapter-header"> <div class="chapter-header">
<p class="type">Essai</p> <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"> <div class="hgroup">
<h2><span>Un robot-poète ne&nbsp;nous fait toujours pas peur</span></h2> <div class="title-before">++--------------------------+</div>
<p class="author">Olivain Porry</p> <h2><span>Un robot-poete <br>ne&nbsp;nous fait toujours <br>pas peur</span></h2>
<p class="author"><span>Olivain Porry</span></p>
<div class="title-after">+--------------------------++</div>
</div> </div>
<div class="hgroup-after">+<br>++<br>+++<br>++++<br>+++<br>++<br>+<br>
</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> </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 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 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 ». 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 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 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 fait pas peur »<a href="#fn1" class="footnote-ref" id="fnref1" role="doc-noteref"><sup>1</sup></a>, il
écrivait : « Mirandolez, écrivait : « Mirandolez, <br>éclaboussez ce robot poète de vos connaissances en cybernétique,
éclaboussez ce robot poète de vos connaissances en cybernétique,
expliquez-lui comment il marche et vous l’aurez tout humble à votre expliquez-lui comment il marche et vous l’aurez tout humble à votre
merci. »</p> merci. »</p>
<p>Aujourd’hui, notre rapport aux mots prend une forme nouvelle, <p>Aujourd’hui, notre rapport aux mots prend une forme nouvelle,
@ -140,7 +142,7 @@
qu’est COCO<a href="#fn5" class="footnote-ref" id="fnref5" role="doc-noteref"><sup>5</sup></a>. Utilisé qu’est COCO<a href="#fn5" class="footnote-ref" id="fnref5" role="doc-noteref"><sup>5</sup></a>. Utilisé
massivement parce massivement parce
qu’accessible gratuitement et facilement dès 2014, COCO contient des 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 <br>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 cas, par les articles indéfinis « A »
et « An » : <em>An apple on a table, a brown teddy bear with a blue bib 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 on that says baby</em>. La surreprésentation de ces articles indéfinis