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

layout terminal

Browse source
This commit is contained in:
Julie Blanc 2026-03-04 08:33:34 +01:00
parent aed4b9eb92
commit 68a0dcb88b
80 changed files with 2234 additions and 349 deletions
Download patch file Download diff file Expand all files Collapse all files

8
maquette-tests/assets/css/base/_layout.scss
View file

@ -30,8 +30,8 @@
}
@page:left{
margin-left: 18mm;
margin-right: 26mm;
margin-left: 26mm;
margin-right: 18mm;
@bottom-center{
content: counter(page);
@include numPage();
@ -51,8 +51,8 @@
}
@page:right{
margin-left: 26mm;
margin-right: 18mm;
margin-left: 18mm;
margin-right: 26mm;
@bottom-center{
content: counter(page);
@include numPage();

3
maquette-tests/assets/css/base/_type-specimen.scss
View file

@ -131,4 +131,5 @@
}
}
}

12
maquette-tests/assets/css/base/_type.scss
View file

@ -135,4 +135,16 @@
font-family: 'Baskemo Sans', serif;
}
[data-type="Velvetyne"]{
font-family: 'Velvetyne';
}
[data-type="Garabosse Perle"]{
font-family: 'Garabosse Perle';
}
[data-type="Adelphe Trouble Germinal"]{
font-family: 'Adelphe Trouble Germinal';;
}
[data-type="Bilzig"]{
font-family: 'Bilzig';
}

11
maquette-tests/assets/css/base/_var.scss
View file

@ -2,13 +2,18 @@
--font: 'Routed Gothic', sans-serif;
--font: 'Wagram Slab', serif;
--font: 'Bilzig', serif;
// --font: 'HAL Timezone', serif;
--mono: 'Selectric Mono', monospace;
--mono: 'Ivory Mono', monospace;
--mono: 'Baskemo Sans', monospace;
--font-decor: 'Decor Round Random';
// --mono: 'HAL Timezone Mono', monospace;
--sans: 'Routed Gothic', serif;
--font-sans: 'Routed Gothic', serif;
// --font-sans: 'Routed Gothic Wide', serif;
// --note: 'Wagram Slab', serif;
--title: 'HNoailles Times Triplex', sans-serif;
@ -21,7 +26,7 @@
--indent: 7mm;
--font-size: 12px;
--baseline: 18px;
--font-size: 18px;
--baseline: 24px;
}

87
maquette-tests/assets/css/modules/_chapter-header.scss
View file

@ -1,8 +1,11 @@
.chapter-header{
// break-after: page;
position: relative;
margin-top: calc(var(--baseline)*2);
margin-bottom: calc(var(--baseline)*3);
--color: black;
p{ text-indent: 0px!important; }
}
.chapter-header h2 {
@ -18,11 +21,11 @@
}
.chapter-header h2{
font-size: 46px;
line-height: 1.1;
font-family: var(--font);
font-family: var(--mono);
.chapter-header .h2-pattern{
font-size: 58px;
line-height: 0.8;
// font-family: var(--font);
// font-family: var(--mono);
color: var(--blue);
margin-bottom: calc(var(--baseline)*1);
text-align: left;
@ -30,7 +33,36 @@
color: var(--color);
text-align: center;
font-family: var(--font-decor);
transform: scale(2);
z-index: 0;
position: absolute;
top: 0;
}
.chapter-header h2{
font-family: 'Routed Gothic Wide';
margin-top: calc(var(--baseline)*4);
text-align: center;
line-height: 1.2;
font-size: 36px;
font-weight: normal;
span{
background-color: white;
border: 1px solid red;
box-shadow: 0px 1px 23px 8px rgba(255,0,0,1);
border-radius:10px;
padding-inline: 0.5ch;
box-decoration-break: clone;
-webkit-box-decoration-break: clone; /* pour Safari */
}
z-index: 10;
}
@ -43,47 +75,14 @@
.chapter-header .type{
}
.chapter-header .bio{
margin-top: calc(var(--baseline)*3);
font-family: var(--sans);
hyphens: none;
line-height: 1.3;
font-size: 12px;
// left: 0px!important;
.name{
text-indent: 0;
text-align: left;
font-weight: normal;
color: var(--color);
}
.description{
text-indent: -14mm;
padding-left: 14mm;
text-align: left;
font-weight: normal;
color: var(--color);
hyphens: none;
}
}
.chapter-header .author{
left: 0px!important;
font-size: 26px;
line-height: 0.9;
font-weight: normal;
line-height: 1;
font-family: var(--mono);
// font-weight: bold;
text-align: center;
text-indent: 0;
color: var(--color);
margin-top: calc(var(--baseline)*3);
text-decoration: underline 1px;
text-underline-offset: 2px;
font-family: 'Routed Gothic Wide';
margin-top: calc(var(--baseline)*1);
text-align: center;
font-size: 28px;
font-weight: normal;
// margin-top: calc(var(--baseline)*2)
}

82
maquette-tests/assets/css/modules/_footnotes.scss
View file

@ -1,82 +0,0 @@
.pagedjs_footnote{
font-family: var(--sans);
// font-size: 10px;
line-height: 1.3;
font-size: 12px;
font-weight: 200;
text-indent: -14mm;
padding-left: 14mm;
}
.pagedjs_floatnote_marker,
.pagedjs_floatnote_call{
}
.pagedjs_floatnote_marker{
}
.note-container{
grid-column: center;
grid-row: footer;
width: 100%;
height: calc(100% - 12mm);
// outline: 1px solid red;
columns: 2;
column-fill: auto;
padding-top: 20px;
}
.pagedjs_footnote_content{
// padding-top: var(--baseline);
// columns: 2;
}
// .pagedjs_footnote_inner_content{
// columns: 2;
// }
.pagedjs_footnotes::marker{
color: red;
}
.pagedjs_footnote[data-footnote-call]{
// font-family: sans-serif;
font-size: 12px;
font-family: var(--sans);
text-indent: 0px;
// position: relative;
// top: -2px;
margin-left: 2px;
&::after{
font-variant-position: normal;
content: attr(data-counter-footnote-increment) "}"
}
&::before{
content: "{"
}
}
[data-footnote-marker]::marker {
content: "{" counter(footnote-marker) "} ";
}

90
maquette-tests/assets/css/modules/_notes.scss
View file

@ -1,61 +1,57 @@
.inline-note{
color: var(--green);
float: left;
clear: both;
width: 46mm;
text-align: left;
hyphens: none;
margin-right: 1ch;
margin-right: -20mm;
position: relative;
left: -25mm;
text-align: right;
font-family: var(--note);
font-size: 9.5px;
line-height: 1.2;
.body_note{
padding-top: 5px;
}
.following-note{
font-family: var(--font-sans);
font-size: 12px;
line-height: 14px;
font-weight: 500;
display: block;
// position: relative;
margin-top: calc(var(--baseline)*0.5);
margin-bottom: calc(var(--baseline)*0.5);
}
.pagedjs_floatnote_marker,
.pagedjs_floatnote_call{
color: var(--green);
// font-weight: bold;
.container-following-note{
margin-left: 30%;
// margin-top: calc(var(--baseline)*0.5);
// margin-bottom: calc(var(--baseline)*0.5);
}
.wrapper__note-call{
break-inside: avoid;
}
.following-note_call,
.following-note_marker{
&::before{
content: "{"
}
&::after{
content: "}"
}
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
}
.following-note_call{
padding-left: 0.25ch;
line-height: 0;
font-size: 9px;
font-family: var(--mono);
position: relative;
top: -1px;
margin-left: 2px;
top: -4px;
border: 0.5px solid currentColor;
width: 14px;
height: 14px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.pagedjs_floatnote_marker{
// float: left;
// position: absolute;
// left: 0px;
// display: block;
text-align: left;
.following-note_marker{
position: absolute;
left: 0;
}

25
maquette-tests/assets/css/modules/_text.scss
View file

@ -7,8 +7,10 @@
hyphenate-limit-chars: 8 3;
position: relative;
// color: var(--blue);
orphans: 2;
hyphens: 2;
letter-spacing: 0.01rem;
// letter-spacing: 0.01rem;
// &::before{
@ -22,29 +24,32 @@
// }
}
.container-following-note + p,
p + p{
text-indent: var(--indent);
text-indent: 30%;
}
h3, h4{
break-after: avoid;
}
h3{
margin-top: calc(var(--baseline)*1.5);
margin-bottom: calc(var(--baseline)*0.5);
text-align: center;
font-weight: normal;
// text-decoration: underline;
font-family: var(--mono);
text-transform: uppercase;
font-family: var(--font-sans);
// text-transform: lowercase;
color: var(--blue);
max-width: 18ch;
// margin-inline: auto;
letter-spacing: 0.05rem;
color: black;
text-decoration: underline 1px;
text-underline-offset: 2px;
// text-decoration: underline 1px;
// text-underline-offset: 2px;
// &::before{
@ -66,7 +71,9 @@ blockquote p{
}
blockquote{
font-family: var(--mono);
font-family: 'Routed Gothic Wide';
font-size: 14px;
line-height: 17px;
// position: relative;
// left: 14mm;
// p{
@ -77,7 +84,7 @@ blockquote{
// }
padding-left: var(--indent);
padding-left: 15%;
margin-top: calc(var(--baseline)*1);
margin-bottom: calc(var(--baseline)*1);

210
maquette-tests/assets/css/style.css
View file

@ -1,21 +1,24 @@
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Ovo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap");
:root {
--font: 'Routed Gothic', sans-serif;
--font: 'Wagram Slab', serif;
--font: 'Bilzig', serif;
--mono: 'Selectric Mono', monospace;
--mono: 'Ivory Mono', monospace;
--mono: 'Baskemo Sans', monospace;
--sans: 'Routed Gothic', serif;
--font-decor: 'Decor Round Random';
--font-sans: 'Routed Gothic', serif;
--title: 'HNoailles Times Triplex', sans-serif;
--red: #9B0000;
--green:#009B00;
--green-light:#009b0025;
--blue: #00009B;
--indent: 7mm;
--font-size: 12px;
--baseline: 18px;
--font-size: 18px;
--baseline: 24px;
}
* {
@ -46,8 +49,8 @@ body {
marks: crop;
}
@page :left {
margin-left: 18mm;
margin-right: 26mm;
margin-left: 26mm;
margin-right: 18mm;
@bottom-center {
content: counter(page);
font-family: var(--sans);
@ -68,8 +71,8 @@ body {
}
}
@page :right {
margin-left: 26mm;
margin-right: 18mm;
margin-left: 18mm;
margin-right: 26mm;
@bottom-center {
content: counter(page);
font-family: var(--sans);
@ -228,6 +231,22 @@ body {
font-family: "Baskemo Sans", serif;
}
[data-type=Velvetyne] {
font-family: "Velvetyne";
}
[data-type="Garabosse Perle"] {
font-family: "Garabosse Perle";
}
[data-type="Adelphe Trouble Germinal"] {
font-family: "Adelphe Trouble Germinal";
}
[data-type=Bilzig] {
font-family: "Bilzig";
}
#type-specimen {
background-color: #cfcfcf;
}
@ -328,29 +347,33 @@ body {
hyphens: auto;
hyphenate-limit-chars: 8 3;
position: relative;
letter-spacing: 0.01rem;
orphans: 2;
hyphens: 2;
}
.chapter .container-following-note + p,
.chapter p + p {
text-indent: var(--indent);
text-indent: 30%;
}
.chapter h3, .chapter h4 {
-moz-column-break-after: avoid;
break-after: avoid;
}
.chapter h3 {
margin-top: calc(var(--baseline) * 1.5);
margin-bottom: calc(var(--baseline) * 0.5);
text-align: center;
font-weight: normal;
font-family: var(--mono);
text-transform: uppercase;
font-family: var(--font-sans);
color: var(--blue);
max-width: 18ch;
letter-spacing: 0.05rem;
color: black;
-webkit-text-decoration: underline 1px;
text-decoration: underline 1px;
text-underline-offset: 2px;
}
.chapter blockquote {
font-family: var(--mono);
padding-left: var(--indent);
font-family: "Routed Gothic Wide";
font-size: 14px;
line-height: 17px;
padding-left: 15%;
margin-top: calc(var(--baseline) * 1);
margin-bottom: calc(var(--baseline) * 1);
}
@ -362,54 +385,60 @@ body {
position: relative;
}
.pagedjs_footnote {
font-family: var(--sans);
line-height: 1.3;
.following-note {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 200;
text-indent: -14mm;
padding-left: 14mm;
line-height: 14px;
font-weight: 500;
display: block;
margin-top: calc(var(--baseline) * 0.5);
margin-bottom: calc(var(--baseline) * 0.5);
}
.note-container {
grid-column: center;
grid-row: footer;
width: 100%;
height: calc(100% - 12mm);
-moz-columns: 2;
columns: 2;
-moz-column-fill: auto;
column-fill: auto;
padding-top: 20px;
.container-following-note {
margin-left: 30%;
}
.pagedjs_footnotes::marker {
color: red;
.wrapper__note-call {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.pagedjs_footnote[data-footnote-call] {
font-size: 12px;
font-family: var(--sans);
text-indent: 0px;
margin-left: 2px;
}
.pagedjs_footnote[data-footnote-call]::after {
font-variant-position: normal;
content: attr(data-counter-footnote-increment) "}";
}
.pagedjs_footnote[data-footnote-call]::before {
.following-note_call::before,
.following-note_marker::before {
content: "{";
}
.following-note_call::after,
.following-note_marker::after {
content: "}";
}
.following-note_call,
.following-note_marker {
font-family: var(--font-sans);
font-weight: 500;
font-size: 12px;
}
[data-footnote-marker]::marker {
content: "{" counter(footnote-marker) "} ";
.following-note_call {
padding-left: 0.25ch;
position: relative;
top: -4px;
}
.following-note_marker {
position: absolute;
left: 0;
}
.chapter-header {
position:  relative;
margin-top: calc(var(--baseline) * 2);
margin-bottom: calc(var(--baseline) * 3);
--color: black;
}
.chapter-header p {
text-indent: 0px !important;
}
.chapter-header h2 {
string-set: title content(text);
@ -423,17 +452,41 @@ body {
string-set: type content(text);
}
.chapter-header h2 {
font-size: 46px;
line-height: 1.1;
font-family: var(--font);
font-family: var(--mono);
.chapter-header .h2-pattern {
font-size: 58px;
line-height: 0.8;
color: var(--blue);
margin-bottom: calc(var(--baseline) * 1);
text-align: left;
font-weight: normal;
color: var(--color);
text-align: center;
font-family: var(--font-decor);
transform: scale(2);
z-index: 0;
position: absolute;
top: 0;
}
.chapter-header h2 {
font-family: "Routed Gothic Wide";
margin-top: calc(var(--baseline) * 4);
text-align: center;
line-height: 1.2;
font-size: 36px;
font-weight: normal;
}
.chapter-header h2 span {
background-color: white;
border: 1px solid red;
box-shadow: 0px 1px 23px 8px rgb(255, 0, 0);
border-radius: 10px;
padding-inline: 0.5ch;
box-decoration-break: clone;
-webkit-box-decoration-break: clone; /* pour Safari */
}
.chapter-header h2 {
z-index: 10;
}
.chapter-header .type {
@ -441,55 +494,10 @@ body {
display: none;
}
.chapter-header .bio {
margin-top: calc(var(--baseline) * 3);
font-family: var(--sans);
hyphens: none;
line-height: 1.3;
font-size: 12px;
}
.chapter-header .bio .name {
text-indent: 0;
text-align: left;
font-weight: normal;
color: var(--color);
}
.chapter-header .bio .description {
text-indent: -14mm;
padding-left: 14mm;
text-align: left;
font-weight: normal;
color: var(--color);
hyphens: none;
}
.chapter-header .author {
left: 0px !important;
font-size: 26px;
line-height: 0.9;
font-weight: normal;
line-height: 1;
font-family: var(--mono);
font-family: "Routed Gothic Wide";
margin-top: calc(var(--baseline) * 1);
text-align: center;
text-indent: 0;
color: var(--color);
margin-top: calc(var(--baseline) * 3);
-webkit-text-decoration: underline 1px;
text-decoration: underline 1px;
text-underline-offset: 2px;
}
.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;
font-size: 28px;
font-weight: normal;
}/*# sourceMappingURL=style.css.map */

2
maquette-tests/assets/css/style.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["base/_type.scss","base/_var.scss","style.css","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_footnotes.scss","modules/_chapter-header.scss","modules/_item-decor.scss"],"names":[],"mappings":"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","file":"style.css"}
{"version":3,"sources":["style.css","base/_type.scss","base/_var.scss","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_notes.scss","modules/_chapter-header.scss"],"names":[],"mappings":"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","file":"style.css"}

6
maquette-tests/assets/css/style.scss
View file

@ -6,7 +6,7 @@
@use "base/type-specimen";
@use "modules/text";
// @use "modules/notes";
@use "modules/footnotes";
@use "modules/notes";
// @use "modules/footnotes";
@use "modules/chapter-header";
@use "modules/item-decor";
// @use "modules/item-decor";

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff2 Normal file
View file

Binary file not shown.

54
maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/stylesheet.css Normal file
View file

@ -0,0 +1,54 @@
@font-face {
font-family: 'Adelphe Trouble Germinal';
src: url('Adelphe-Trouble-GerminalRegular.woff2') format('woff2'),
url('Adelphe-Trouble-GerminalRegular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Adelphe Trouble Germinal';
src: url('Adelphe-Trouble-GerminalItalic.woff2') format('woff2'),
url('Adelphe-Trouble-GerminalItalic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Adelphe Trouble Germinal';
src: url('Adelphe-Trouble-GerminalSemiBold.woff2') format('woff2'),
url('Adelphe-Trouble-GerminalSemiBold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Adelphe Trouble Germinal';
src: url('Adelphe-Trouble-GerminalSemiBoldItalic.woff2') format('woff2'),
url('Adelphe-Trouble-GerminalSemiBoldItalic.woff') format('woff');
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Adelphe Trouble Germinal';
src: url('Adelphe-Trouble-GerminalBold.woff2') format('woff2'),
url('Adelphe-Trouble-GerminalBold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Adelphe Trouble Germinal';
src: url('Adelphe-Trouble-GerminalBoldItalic.woff2') format('woff2'),
url('Adelphe-Trouble-GerminalBoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff2 Normal file
View file

Binary file not shown.

72
maquette-tests/assets/fonts/Bilzig/stylesheet.css Normal file
View file

@ -0,0 +1,72 @@
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-Black.woff2') format('woff2'),
url('Bilzig-Black.woff') format('woff');
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-BlackItalic.woff2') format('woff2'),
url('Bilzig-BlackItalic.woff') format('woff');
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-Bold.woff2') format('woff2'),
url('Bilzig-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-Italic.woff2') format('woff2'),
url('Bilzig-Italic.woff') format('woff');
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-BoldItalic.woff2') format('woff2'),
url('Bilzig-BoldItalic.woff') format('woff');
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-Medium.woff2') format('woff2'),
url('Bilzig-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-MediumItalic.woff2') format('woff2'),
url('Bilzig-MediumItalic.woff') format('woff');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'Bilzig';
src: url('Bilzig-Regular.woff2') format('woff2'),
url('Bilzig-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

BIN
maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff2 Normal file
View file

Binary file not shown.

45
maquette-tests/assets/fonts/DecorRound/stylesheet.css Normal file
View file

@ -0,0 +1,45 @@
@font-face {
font-family: 'Decor Pixel Round';
src: url('DecorPixelRound-Bold.woff2') format('woff2'),
url('DecorPixelRound-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Decor Pixel Round';
src: url('DecorPixelRound-Regular.woff2') format('woff2'),
url('DecorPixelRound-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Decor Pixel Round';
src: url('DecorPixelRound-Medium.woff2') format('woff2'),
url('DecorPixelRound-Medium.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Decor Round Random';
src: url('DecorRoundRandom-Regular.woff2') format('woff2'),
url('DecorRoundRandom-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Decor Round Random Random';
src: url('DecorRoundRandomRandom-Regular.woff2') format('woff2'),
url('DecorRoundRandomRandom-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}

BIN
maquette-tests/assets/fonts/Garabosse/Garabosse-Perle.ttf Normal file
View file

Binary file not shown.

8
maquette-tests/assets/fonts/Garabosse/stylesheet.css Normal file
View file

@ -0,0 +1,8 @@
@font-face {
font-family: 'Garabosse Perle';
src: url('Garabosse-Perle.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

BIN
maquette-tests/assets/fonts/Velvetyne/Velvelyne-Bold.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Velvetyne/Velvelyne-Book.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Velvetyne/Velvelyne-Light.woff Normal file
View file

Binary file not shown.

BIN
maquette-tests/assets/fonts/Velvetyne/Velvelyne-Regular.woff Normal file
View file

Binary file not shown.

32
maquette-tests/assets/fonts/Velvetyne/stylesheet.css Normal file
View file

@ -0,0 +1,32 @@
@font-face {
font-family: 'Velvetyne';
src: url('Velvelyne-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Velvetyne';
src: url('Velvelyne-Book.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Velvetyne';
src: url('Velvelyne-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Velvetyne';
src: url('Velvelyne-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}

BIN
maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.30.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 303 KiB

BIN
maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.36.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 614 KiB

24
maquette-tests/assets/layout-4/base/_body.scss Normal file
View file

@ -0,0 +1,24 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased
}
a {
color: currentColor;
}
// .inline-note{
// color: red;
// }
body {
font-family: var(--font);
font-size: var(--font-size);
line-height: var(--baseline);
}

95
maquette-tests/assets/layout-4/base/_layout.scss Normal file
View file

@ -0,0 +1,95 @@
@mixin running(){
font-family: var(--mono);
font-size: 12px;
// vertical-align: bottom;
// padding-bottom: 5mm;
}
@mixin numPage(){
font-family: var(--sans);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 5mm;
width: 10mm;
}
@media print{
@page {
size: 165mm 240mm;
margin-top: 16mm;
margin-bottom: 20mm;
bleed: 6mm;
marks: crop;
}
@page:left{
margin-left: 18mm;
margin-right: 26mm;
@bottom-center{
content: counter(page);
@include numPage();
}
@top-left {
content: string(author);
@include running();
// text-align: left;
// padding-left: 3ch;
}
@top-center {
content: string(type);
@include running();
}
}
@page:right{
margin-left: 26mm;
margin-right: 18mm;
@bottom-center{
content: counter(page);
@include numPage();
text-align: right;
}
@top-left {
content: string(title);
@include running();
}
}
/*p{
background: salmon;
}*/
.chapter{
break-before: right;
page: chapter;
}
@page chapter:first{
@top-left{ content: none; }
}
}
// .pagedjs_left_page .pagedjs_pagebox{
// background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
// }
// .pagedjs_right_page .pagedjs_pagebox{
// background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
// }

134
maquette-tests/assets/layout-4/base/_type-specimen.scss Normal file
View file

@ -0,0 +1,134 @@
#type-specimen{
background-color: #cfcfcf;
.type{
font-family: sans-serif;
grid-column: span 2;
font-weight: bold;
}
.specimen{
width: 1200px;
height: 680px;
border: 1px solid #999;
background-color: white;
margin: 30px;
padding: 30px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
p:first-of-type{
text-align: justify;
hyphens: auto;
margin-bottom: 1em;
}
p{
font-size: 16px;
}
.title{
font-size: 32px;
line-height: 1.1;
max-width: 22ch;
margin-bottom: 30px;
}
.content{
line-height: 1.3;
}
.title-bold{
font-weight: bold;
}
.title-normal{
font-weight: normal;
}
.title-italic{
font-weight: normal;
font-style: italic;
}
.title-light{
font-weight: 300!important;
font-style: normal;
}
.title-uppercase{
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.01rem;
}
}
[data-type="ovo"]{
.title{
font-weight: normal;
line-height: 1.1;
}
}
[data-type="literata"]{
p{
// line-height: 1.2;
}
}
[data-type="selectric"],
[data-type="selectric-mono"],
[data-type="timezone"],
[data-type="timezone-mono"]{
.title-bold{
font-weight: normal!important;
}
}
[data-type="selectric-mono"] .content p{
letter-spacing: -0.01
rem;
white-space: 0.2ch;
}
[data-type="es-face"]{
.title-bold{
font-weight: normal!important;
font-style: italic;
}
}
[data-type="redaction"]{
.title-bold{
font-family: 'Redaction 50';
font-weight: normal!important;
font-style: italic;
}
}
[data-type="routed-gothic"],
[data-type="routed-gothic-narrow"],
[data-type="routed-gothic-wide"]{
.title-bold{
font-weight: normal!important;
}
}
[data-type="cheltenham-light"]{
.title, p{
font-weight: 200!important;
}
}

138
maquette-tests/assets/layout-4/base/_type.scss Normal file
View file

@ -0,0 +1,138 @@
@import url('https://fonts.googleapis.com/css2?family=Ovo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap');
[data-type="ovo"]{
font-family: "Ovo", serif;
}
[data-type="literata"]{
font-family: "Literata", serif;
}
[data-type="vollkorn"]{
font-family: "Vollkorn", serif;
}
[data-type="timezone"]{
font-family: 'HAL Timezone', serif;
}
[data-type="timezone-mono"]{
font-family: 'HAL Timezone Mono', monospace;
}
[data-type="selectric"]{
font-family: 'Selectric', serif;
}
[data-type="selectric-mono"]{
font-family: 'Selectric Mono', monospace;
}
[data-type="es-face"]{
font-family: 'ESFace', serif;
}
[data-type="ivory"]{
font-family: 'Ivory', serif;
}
[data-type="ivory-mono"]{
font-family: 'Ivory Mono', serif;
}
[data-type="necto-mono"]{
font-family: 'NectoMono', monospace;
}
[data-type="old-round"]{
font-family: 'OldRound', serif;
}
[data-type="old-round-hover"]{
font-family: 'OldRound Hover', serif;
}
[data-type="satoshi"]{
font-family: 'Satoshi', sans-serif;
}
[data-type="redaction"]{
font-family: 'Redaction', monospace;
}
[data-type="h-noailles-futura-simplex"]{
font-family: 'HNoailles Futura Simplex', sans-serif;
}
[data-type="h-noailles-futura-duplex"]{
font-family: 'HNoailles Futura Duplex', sans-serif;
}
[data-type="h-noailles-futura-triplex"]{
font-family: 'HNoailles Futura Triplex', sans-serif;
}
[data-type="h-noailles-times-simplex"]{
font-family: 'HNoailles Times Simplex', serif;
}
[data-type="h-noailles-times-duplex"]{
font-family: 'HNoailles Times Duplex', serif;
}
[data-type="h-noailles-times-triplex"]{
font-family: 'HNoailles Times Triplex', serif;
}
[data-type="adelphe-floreal"]{
font-family: 'Adelphe Floreal', serif;
}
[data-type="Adelphe-fructidor"]{
font-family: 'Adelphe Fructidor', serif;
}
[data-type="wagram"]{
font-family: 'Wagram', serif;
}
[data-type="wagram-slab"]{
font-family: 'Wagram Slab', serif;
}
[data-type="wagram-mono-slab"]{
font-family: 'Wagram Mono Slab', monospace;
}
[data-type="routed-gothic-wide"]{
font-family: 'Routed Gothic Wide', sans-serif;
}
[data-type="routed-gothic"]{
font-family: 'Routed Gothic', sans-serif;
}
[data-type="routed-gothic-narrow"]{
font-family: 'Routed Gothic Narrow', sans-serif;
}
[data-type="cheltenham"]{
font-family: 'ITC Cheltenham', serif;
}
[data-type="cheltenham-light"]{
font-family: 'ITC Cheltenham', serif;
font-weight: 200;
}
[data-type="baskemo-sans"]{
font-family: 'Baskemo Sans', serif;
}

27
maquette-tests/assets/layout-4/base/_var.scss Normal file
View file

@ -0,0 +1,27 @@
:root{
--font: 'Routed Gothic', sans-serif;
--font: 'Wagram Slab', serif;
// --font: 'HAL Timezone', serif;
--mono: 'Selectric Mono', monospace;
--mono: 'Ivory Mono', monospace;
--mono: 'Baskemo Sans', monospace;
// --mono: 'HAL Timezone Mono', monospace;
--sans: 'Routed Gothic', serif;
// --note: 'Wagram Slab', serif;
--title: 'HNoailles Times Triplex', sans-serif;
--red: #9B0000;
--green:#009B00;
--green-light:#009b0025;
--blue: #00009B;
--indent: 7mm;
--font-size: 12px;
--baseline: 18px;
}

89
maquette-tests/assets/layout-4/modules/_chapter-header.scss Normal file
View file

@ -0,0 +1,89 @@
.chapter-header{
// break-after: page;
margin-top: calc(var(--baseline)*2);
margin-bottom: calc(var(--baseline)*3);
--color: black;
}
.chapter-header h2 {
string-set: title content(text);
}
.chapter-header .author {
string-set: author content(text);
}
.chapter-header .type {
string-set: type content(text);
}
.chapter-header h2{
font-size: 46px;
line-height: 1.1;
font-family: var(--font);
font-family: var(--mono);
color: var(--blue);
margin-bottom: calc(var(--baseline)*1);
text-align: left;
font-weight: normal;
color: var(--color);
text-align: center;
}
.chapter-header .type{
margin-bottom: calc(var(--baseline)*1);
display: none;
// text-align: center;
}
.chapter-header .type{
}
.chapter-header .bio{
margin-top: calc(var(--baseline)*3);
font-family: var(--sans);
hyphens: none;
line-height: 1.3;
font-size: 12px;
// left: 0px!important;
.name{
text-indent: 0;
text-align: left;
font-weight: normal;
color: var(--color);
}
.description{
text-indent: -14mm;
padding-left: 14mm;
text-align: left;
font-weight: normal;
color: var(--color);
hyphens: none;
}
}
.chapter-header .author{
left: 0px!important;
font-size: 26px;
line-height: 0.9;
font-weight: normal;
line-height: 1;
font-family: var(--mono);
// font-weight: bold;
text-align: center;
text-indent: 0;
color: var(--color);
margin-top: calc(var(--baseline)*3);
text-decoration: underline 1px;
text-underline-offset: 2px;
}

82
maquette-tests/assets/layout-4/modules/_footnotes.scss Normal file
View file

@ -0,0 +1,82 @@
.pagedjs_footnote{
font-family: var(--sans);
// font-size: 10px;
line-height: 1.3;
font-size: 12px;
font-weight: 200;
text-indent: -14mm;
padding-left: 14mm;
}
.pagedjs_floatnote_marker,
.pagedjs_floatnote_call{
}
.pagedjs_floatnote_marker{
}
.note-container{
grid-column: center;
grid-row: footer;
width: 100%;
height: calc(100% - 12mm);
// outline: 1px solid red;
columns: 2;
column-fill: auto;
padding-top: 20px;
}
.pagedjs_footnote_content{
// padding-top: var(--baseline);
// columns: 2;
}
// .pagedjs_footnote_inner_content{
// columns: 2;
// }
.pagedjs_footnotes::marker{
color: red;
}
.pagedjs_footnote[data-footnote-call]{
// font-family: sans-serif;
font-size: 12px;
font-family: var(--sans);
text-indent: 0px;
// position: relative;
// top: -2px;
margin-left: 2px;
&::after{
font-variant-position: normal;
content: attr(data-counter-footnote-increment) "}"
}
&::before{
content: "{"
}
}
[data-footnote-marker]::marker {
content: "{" counter(footnote-marker) "} ";
}

17
maquette-tests/assets/layout-4/modules/_item-decor.scss Normal file
View file

@ -0,0 +1,17 @@
.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;
}

61
maquette-tests/assets/layout-4/modules/_notes.scss Normal file
View file

@ -0,0 +1,61 @@
.inline-note{
color: var(--green);
float: left;
clear: both;
width: 46mm;
text-align: left;
hyphens: none;
margin-right: 1ch;
margin-right: -20mm;
position: relative;
left: -25mm;
text-align: right;
font-family: var(--note);
font-size: 9.5px;
line-height: 1.2;
.body_note{
padding-top: 5px;
}
}
.pagedjs_floatnote_marker,
.pagedjs_floatnote_call{
color: var(--green);
// font-weight: bold;
padding-left: 0.25ch;
line-height: 0;
font-size: 9px;
font-family: var(--mono);
position: relative;
top: -1px;
margin-left: 2px;
border: 0.5px solid currentColor;
width: 14px;
height: 14px;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 4px;
}
.pagedjs_floatnote_marker{
// float: left;
// position: absolute;
// left: 0px;
// display: block;
text-align: left;
}

131
maquette-tests/assets/layout-4/modules/_text.scss Normal file
View file

@ -0,0 +1,131 @@
.chapter{
p{
text-align: justify;
hyphens: auto;
hyphenate-limit-chars: 8 3;
position: relative;
// color: var(--blue);
letter-spacing: 0.01rem;
// &::before{
// content: '';
// display: inline-block;
// width: 8px;
// height: 8px;
// background-color: var(--blue);
// border-radius: 50%;
// margin-right: 1ch;
// }
}
p + p{
text-indent: var(--indent);
}
h3{
margin-top: calc(var(--baseline)*1.5);
margin-bottom: calc(var(--baseline)*0.5);
text-align: center;
font-weight: normal;
// text-decoration: underline;
font-family: var(--mono);
text-transform: uppercase;
color: var(--blue);
max-width: 18ch;
// margin-inline: auto;
letter-spacing: 0.05rem;
color: black;
text-decoration: underline 1px;
text-underline-offset: 2px;
// &::before{
// content: '';
// display: block;
// width: 8px;
// height: 8px;
// border: 1px solid var(--blue);
// border-radius: 50%;
// margin-right: 1ch;
// position: relative;
// left: -2ch;
// }
}
blockquote p{
// font-family: var(--mono);
}
blockquote{
font-family: var(--mono);
// position: relative;
// left: 14mm;
// p{
// font-size: 16px;
// line-height: calc(var(--baseline)*1.25);
// font-weight: 300;
// }
padding-left: var(--indent);
margin-top: calc(var(--baseline)*1);
margin-bottom: calc(var(--baseline)*1);
}
& > :first-child{
// background-color: red;
margin-top: 0px;
}
}
// .inline-note{
// background-color: #e5e5f7;
// opacity: 0.8;
// background-image: linear-gradient(0deg, white 50%, var(--green-light) 50%);
// background-size: 16px 16px;
// .body_note{
// display: inline;
// padding-right: 1ch;
// background-color: white;
// -webkit-box-decoration-break: clone;
// box-decoration-break: clone;
// position: relative;
// top: -4px;
// }
// }
// p + p .inline-note::after{
// left: -19mm!important;
// }
// p + p + p .inline-note::after{
// left: -12mm!important;
// }
.pagedjs_area{
position: relative;
}

495
maquette-tests/assets/layout-4/style.css Normal file
View file

@ -0,0 +1,495 @@
@import url("https://fonts.googleapis.com/css2?family=Ovo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap");
:root {
--font: 'Routed Gothic', sans-serif;
--font: 'Wagram Slab', serif;
--mono: 'Selectric Mono', monospace;
--mono: 'Ivory Mono', monospace;
--mono: 'Baskemo Sans', monospace;
--sans: 'Routed Gothic', serif;
--title: 'HNoailles Times Triplex', sans-serif;
--red: #9B0000;
--green:#009B00;
--green-light:#009b0025;
--blue: #00009B;
--indent: 7mm;
--font-size: 12px;
--baseline: 18px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
a {
color: currentColor;
}
body {
font-family: var(--font);
font-size: var(--font-size);
line-height: var(--baseline);
}
@media print {
@page {
size: 165mm 240mm;
margin-top: 16mm;
margin-bottom: 20mm;
bleed: 6mm;
marks: crop;
}
@page :left {
margin-left: 18mm;
margin-right: 26mm;
@bottom-center {
content: counter(page);
font-family: var(--sans);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 5mm;
width: 10mm;
}
@top-left {
content: string(author);
font-family: var(--mono);
font-size: 12px;
}
@top-center {
content: string(type);
font-family: var(--mono);
font-size: 12px;
}
}
@page :right {
margin-left: 26mm;
margin-right: 18mm;
@bottom-center {
content: counter(page);
font-family: var(--sans);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 5mm;
width: 10mm;
text-align: right;
}
@top-left {
content: string(title);
font-family: var(--mono);
font-size: 12px;
}
}
/*p{
background: salmon;
}*/
.chapter {
-moz-column-break-before: right;
break-before: right;
page: chapter;
}
@page chapter:first {
@top-left {
content: none;
}
}
}
[data-type=ovo] {
font-family: "Ovo", serif;
}
[data-type=literata] {
font-family: "Literata", serif;
}
[data-type=vollkorn] {
font-family: "Vollkorn", serif;
}
[data-type=timezone] {
font-family: "HAL Timezone", serif;
}
[data-type=timezone-mono] {
font-family: "HAL Timezone Mono", monospace;
}
[data-type=selectric] {
font-family: "Selectric", serif;
}
[data-type=selectric-mono] {
font-family: "Selectric Mono", monospace;
}
[data-type=es-face] {
font-family: "ESFace", serif;
}
[data-type=ivory] {
font-family: "Ivory", serif;
}
[data-type=ivory-mono] {
font-family: "Ivory Mono", serif;
}
[data-type=necto-mono] {
font-family: "NectoMono", monospace;
}
[data-type=old-round] {
font-family: "OldRound", serif;
}
[data-type=old-round-hover] {
font-family: "OldRound Hover", serif;
}
[data-type=satoshi] {
font-family: "Satoshi", sans-serif;
}
[data-type=redaction] {
font-family: "Redaction", monospace;
}
[data-type=h-noailles-futura-simplex] {
font-family: "HNoailles Futura Simplex", sans-serif;
}
[data-type=h-noailles-futura-duplex] {
font-family: "HNoailles Futura Duplex", sans-serif;
}
[data-type=h-noailles-futura-triplex] {
font-family: "HNoailles Futura Triplex", sans-serif;
}
[data-type=h-noailles-times-simplex] {
font-family: "HNoailles Times Simplex", serif;
}
[data-type=h-noailles-times-duplex] {
font-family: "HNoailles Times Duplex", serif;
}
[data-type=h-noailles-times-triplex] {
font-family: "HNoailles Times Triplex", serif;
}
[data-type=adelphe-floreal] {
font-family: "Adelphe Floreal", serif;
}
[data-type=Adelphe-fructidor] {
font-family: "Adelphe Fructidor", serif;
}
[data-type=wagram] {
font-family: "Wagram", serif;
}
[data-type=wagram-slab] {
font-family: "Wagram Slab", serif;
}
[data-type=wagram-mono-slab] {
font-family: "Wagram Mono Slab", monospace;
}
[data-type=routed-gothic-wide] {
font-family: "Routed Gothic Wide", sans-serif;
}
[data-type=routed-gothic] {
font-family: "Routed Gothic", sans-serif;
}
[data-type=routed-gothic-narrow] {
font-family: "Routed Gothic Narrow", sans-serif;
}
[data-type=cheltenham] {
font-family: "ITC Cheltenham", serif;
}
[data-type=cheltenham-light] {
font-family: "ITC Cheltenham", serif;
font-weight: 200;
}
[data-type=baskemo-sans] {
font-family: "Baskemo Sans", serif;
}
#type-specimen {
background-color: #cfcfcf;
}
#type-specimen .type {
font-family: sans-serif;
grid-column: span 2;
font-weight: bold;
}
#type-specimen .specimen {
width: 1200px;
height: 680px;
border: 1px solid #999;
background-color: white;
margin: 30px;
padding: 30px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
#type-specimen p:first-of-type {
text-align: justify;
hyphens: auto;
margin-bottom: 1em;
}
#type-specimen p {
font-size: 16px;
}
#type-specimen .title {
font-size: 32px;
line-height: 1.1;
max-width: 22ch;
margin-bottom: 30px;
}
#type-specimen .content {
line-height: 1.3;
}
#type-specimen .title-bold {
font-weight: bold;
}
#type-specimen .title-normal {
font-weight: normal;
}
#type-specimen .title-italic {
font-weight: normal;
font-style: italic;
}
#type-specimen .title-light {
font-weight: 300 !important;
font-style: normal;
}
#type-specimen .title-uppercase {
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.01rem;
}
[data-type=ovo] .title {
font-weight: normal;
line-height: 1.1;
}
[data-type=selectric] .title-bold,
[data-type=selectric-mono] .title-bold,
[data-type=timezone] .title-bold,
[data-type=timezone-mono] .title-bold {
font-weight: normal !important;
}
[data-type=selectric-mono] .content p {
letter-spacing: -0.01 rem;
white-space: 0.2ch;
}
[data-type=es-face] .title-bold {
font-weight: normal !important;
font-style: italic;
}
[data-type=redaction] .title-bold {
font-family: "Redaction 50";
font-weight: normal !important;
font-style: italic;
}
[data-type=routed-gothic] .title-bold,
[data-type=routed-gothic-narrow] .title-bold,
[data-type=routed-gothic-wide] .title-bold {
font-weight: normal !important;
}
[data-type=cheltenham-light] .title, [data-type=cheltenham-light] p {
font-weight: 200 !important;
}
.chapter p {
text-align: justify;
hyphens: auto;
hyphenate-limit-chars: 8 3;
position: relative;
letter-spacing: 0.01rem;
}
.chapter p + p {
text-indent: var(--indent);
}
.chapter h3 {
margin-top: calc(var(--baseline) * 1.5);
margin-bottom: calc(var(--baseline) * 0.5);
text-align: center;
font-weight: normal;
font-family: var(--mono);
text-transform: uppercase;
color: var(--blue);
max-width: 18ch;
letter-spacing: 0.05rem;
color: black;
-webkit-text-decoration: underline 1px;
text-decoration: underline 1px;
text-underline-offset: 2px;
}
.chapter blockquote {
font-family: var(--mono);
padding-left: var(--indent);
margin-top: calc(var(--baseline) * 1);
margin-bottom: calc(var(--baseline) * 1);
}
.chapter > :first-child {
margin-top: 0px;
}
.pagedjs_area {
position: relative;
}
.pagedjs_footnote {
font-family: var(--sans);
line-height: 1.3;
font-size: 12px;
font-weight: 200;
text-indent: -14mm;
padding-left: 14mm;
}
.note-container {
grid-column: center;
grid-row: footer;
width: 100%;
height: calc(100% - 12mm);
-moz-columns: 2;
columns: 2;
-moz-column-fill: auto;
column-fill: auto;
padding-top: 20px;
}
.pagedjs_footnotes::marker {
color: red;
}
.pagedjs_footnote[data-footnote-call] {
font-size: 12px;
font-family: var(--sans);
text-indent: 0px;
margin-left: 2px;
}
.pagedjs_footnote[data-footnote-call]::after {
font-variant-position: normal;
content: attr(data-counter-footnote-increment) "}";
}
.pagedjs_footnote[data-footnote-call]::before {
content: "{";
}
[data-footnote-marker]::marker {
content: "{" counter(footnote-marker) "} ";
}
.chapter-header {
margin-top: calc(var(--baseline) * 2);
margin-bottom: calc(var(--baseline) * 3);
--color: black;
}
.chapter-header h2 {
string-set: title content(text);
}
.chapter-header .author {
string-set: author content(text);
}
.chapter-header .type {
string-set: type content(text);
}
.chapter-header h2 {
font-size: 46px;
line-height: 1.1;
font-family: var(--font);
font-family: var(--mono);
color: var(--blue);
margin-bottom: calc(var(--baseline) * 1);
text-align: left;
font-weight: normal;
color: var(--color);
text-align: center;
}
.chapter-header .type {
margin-bottom: calc(var(--baseline) * 1);
display: none;
}
.chapter-header .bio {
margin-top: calc(var(--baseline) * 3);
font-family: var(--sans);
hyphens: none;
line-height: 1.3;
font-size: 12px;
}
.chapter-header .bio .name {
text-indent: 0;
text-align: left;
font-weight: normal;
color: var(--color);
}
.chapter-header .bio .description {
text-indent: -14mm;
padding-left: 14mm;
text-align: left;
font-weight: normal;
color: var(--color);
hyphens: none;
}
.chapter-header .author {
left: 0px !important;
font-size: 26px;
line-height: 0.9;
font-weight: normal;
line-height: 1;
font-family: var(--mono);
text-align: center;
text-indent: 0;
color: var(--color);
margin-top: calc(var(--baseline) * 3);
-webkit-text-decoration: underline 1px;
text-decoration: underline 1px;
text-underline-offset: 2px;
}
.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;
}/*# sourceMappingURL=style.css.map */

1
maquette-tests/assets/layout-4/style.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["base/_type.scss","base/_var.scss","style.css","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_footnotes.scss","modules/_chapter-header.scss","modules/_item-decor.scss"],"names":[],"mappings":"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","file":"style.css"}

12
maquette-tests/assets/layout-4/style.scss Normal file
View file

@ -0,0 +1,12 @@
@use "base/var";
@use "base/body";
@use "base/layout";
@use "base/type";
@use "base/type-specimen";
@use "modules/text";
// @use "modules/notes";
@use "modules/footnotes";
@use "modules/chapter-header";
@use "modules/item-decor";

10
maquette-tests/csspageweaver/manifest.json
View file

@ -8,16 +8,16 @@
"reloadInPlace",
"fullPage",
"inlineNotes",
"footnotesFix"
"followingNotes"
],
"pluginsParameters":{
"inlineNotes": {
"input": ".footnote-ref",
"containerNotes": "#footnotes",
"newClass": "footnotes"
"newClass": "inline-note"
},
"footnotesFix": {
"selector": ".footnotes",
"followingNotes": {
"selector": ".inline-note",
"reset": ".chapter"
}
@ -26,7 +26,7 @@
"assets/css/style.css"
],
"hook": [
"/js/items-decor.js"
]
}

1
maquette-tests/csspageweaver/plugins/followingNotes/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
.DS_Store

8
maquette-tests/csspageweaver/plugins/followingNotes/config.json Normal file
View file

@ -0,0 +1,8 @@
{
"name": "FollowingNotes",
"description": "Create followingNotes with call & markers",
"author": ["Julie Blanc"],
"licence": "MIT",
"version": "1.0",
"hook": "followingNotes.js"
}

220
maquette-tests/csspageweaver/plugins/followingNotes/followingNotes.js Normal file
View file

@ -0,0 +1,220 @@
/**
* @name FollowingNotes
* @author Julie Blanc <contact@julie-blanc.fr>
* @see { @link https://gitlab.com/csspageweaver/plugins/followingNotes/ }
*/
import { Handler } from '/csspageweaver/lib/paged.esm.js';
export default class followingNotes extends Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
this.parameters = cssPageWeaver.features.followingNotes.parameters;
this.notesClass = this.parameters?.selector || ".inline-note";
this.newNotesClass = this.parameters?.newNotesClass || "following-note";
this.reset = this.parameters?.reset;
this.align = this.parameters?.align;
this.followingNoteOverflow = new Set();
}
beforeParsed(content) {
console.log("floatnotes");
let newNotesClass = this.newNotesClass;
resetCounter(content, this.reset, this.notesClass);
createCallandMarker(content, this.notesClass, newNotesClass);
let notes = content.querySelectorAll(this.notesClass);
notes.forEach(function (note) {
let paragraph = note.closest("p");
if (!paragraph) return;
let container = paragraph.nextElementSibling;
if (!container || !container.classList.contains("container-following-note")) {
container = document.createElement("div");
container.classList.add("container-following-note");
paragraph.after(container);
}
container.appendChild(note);
});
}
}
/// FUNCTIONS -----------------------------------------------------
// RESET COUNTER
function resetCounter(content, reset, notesClass){
if(reset && reset != ""){
const elements = content.querySelectorAll(reset + ", " + notesClass);
let resetEligible = false;
elements.forEach(element => {
if (element.matches(reset)) {
resetEligible = true;
} else if (resetEligible && element.matches(notesClass)) {
element.dataset.resetCounterFollowingNote = true;
resetEligible = false;
}
});
}
}
// CALL & MARKER
function createCallandMarker(content, notesClass, newNotesClass){
let notes = content.querySelectorAll(notesClass);
let resetNum = 0;
notes.forEach(function (note, index) {
if (note.dataset.resetCounterFollowingNote === "true") {
resetNum = index;
}
let num = index + 1 - resetNum;
note.classList.add(newNotesClass);
note.dataset.counterNote = num;
// call
let ref_note = document.createElement('span');
ref_note.className = newNotesClass + "_call";
ref_note.dataset.counterNote = num;
ref_note.innerHTML = num;
// wrap preceding word + call in .wrapper__note-call
let wrapper = document.createElement('span');
wrapper.className = 'wrapper__note-call';
let prevSibling = note.previousSibling;
if (prevSibling && prevSibling.nodeType === Node.TEXT_NODE) {
let text = prevSibling.textContent;
let m = text.match(/^([\s\S]*\s)(\S+\s*)$/);
if (m) {
let before = m[1];
let extracted = m[2];
// Si le dernier mot extrait est uniquement », prendre aussi le mot d'avant
if (/^»\s*$/.test(extracted)) {
let m2 = before.trimEnd().match(/^([\s\S]*\s|)(\S+)$/);
if (m2) {
let spaceBetween = before.slice(m2[1].length + m2[2].length);
before = m2[1];
extracted = m2[2] + spaceBetween + extracted;
}
}
prevSibling.textContent = before;
wrapper.appendChild(document.createTextNode(extracted));
} else {
prevSibling.textContent = '';
wrapper.appendChild(document.createTextNode(text));
}
}
wrapper.appendChild(ref_note);
note.after(wrapper);
// marker + content note wrapped in body_note
let marker_note = document.createElement('span');
marker_note.className = newNotesClass + "_marker";
//marker_note.innerHTML = num + ". ";
marker_note.innerHTML = num;
let body_note = document.createElement('div');
body_note.className = 'body_note';
while (note.firstChild) {
body_note.appendChild(note.firstChild);
}
body_note.prepend(marker_note);
note.appendChild(body_note);
});
}
// MARGINS
function marginNoteTop(elem) {
let marginTop = parseInt(window.getComputedStyle(elem).marginTop, 10)
return marginTop;
}
function marginNoteBottom(elem) {
let marginBottom = parseInt(window.getComputedStyle(elem).marginBottom, 10)
return marginBottom;
}
function biggestMargin(a, b) {
let margin;
let marginBottom = marginNoteBottom(a);
let marginTop = marginNoteTop(b);
if (marginBottom > marginTop) {
margin = marginBottom;
} else {
margin = marginTop;
}
return margin;
}
function checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container) {
let notes = pageElement.querySelectorAll(notesClass);
let notesHeightAll = [];
for (let n = 0; n < notes.length; ++n) {
// Add height of the notes to array notesHeightAll
let noteHeight = notes[n].offsetHeight;
notesHeightAll.push(noteHeight);
// Add margins of the notes to array notesHeightAll
if (n >= 1) {
let margins = biggestMargin(notes[n - 1], notes[n]);
notesHeightAll.push(margins);
}
}
// If notes on page
if (notesHeightAll.length > 0) {
// Calculate if all notes fit on the page;
let reducer = (accumulator, currentValue) => accumulator + currentValue;
let allHeight = notesHeightAll.reduce(reducer);
let paddingTop = getComputedStyle(container).paddingTop;
let paddingContainer = parseInt(paddingTop);
let totalHeight = allHeight + paddingContainer;
if (totalHeight > maxHeight) {
let lastNote = notes[notes.length - 1];
arrayOverflow.add(lastNote);
lastNote.remove();
checkOverflownote(notesClass, pageElement, maxHeight, arrayOverflow, container);
}
}
}

20
maquette-tests/index.html
View file

@ -25,7 +25,8 @@
<link rel="stylesheet" type="text/css" href="/assets/fonts/RoutedGothic/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/ITCCheltenham/style.css">
<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">
</head>
@ -39,17 +40,17 @@
<section class="chapter" id="olivain-porry">
<div class="chapter-header">
<h2>Un robot-poète ne&nbsp;nous fait toujours pas peur</h2>
<p class="h2-pattern">olivainporry</p>
<h2><span>Un robot-poète ne&nbsp;nous fait toujours pas peur</span></h2>
<p class="type">Essai</p>
<p class="author">Olivain Porry</p>
<div class="bio">
<!-- <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
@ -320,6 +321,7 @@
technologies de langage, mais s’affirment comme des espaces
d’expérimentation critique, capables d’agir directement sur les régimes
linguistiques et algorithmiques contemporains.</p>
<h3>Toujours pas peur</h3>
<p>Pris dans des boucles de production automatisées et soumis à des
logiques d’optimisation, de standardisation et de rendement, le langage
@ -525,12 +527,14 @@
<div class="chapter-header">
<h2>E l’aria diventa più respirabile per tutti: Une télévision pirate pour le quartier</h2>
<p class="h2-pattern">Outdoor computer club</p>
<h2><span>E l’aria diventa più respirabile per&nbsp;tutti: une&nbsp;télévision pirate pour le&nbsp;quartier</span></h2>
<p class="type">Essai</p>
<p class="author">Outdoor computer club</p>
<p class="bio">Le Outdoor Computer Club est un collectif qui explore des manières de démystifier et de se
<!-- <p class="bio">Le Outdoor Computer Club est un collectif qui explore des manières de démystifier et de se
réapproprier collectivement les technologies de réseau et de l'information. Le OCC crée des espaces de
bricolage et de réflexion collectifs ainsi que des interventions dans l’espace public.</p>
bricolage et de réflexion collectifs ainsi que des interventions dans l’espace public.</p> -->
</div>
<p>Le 4 mars 2022, dos arc-bouté dans nos doudounes et narines pleines

271
maquette-tests/type.html
View file

@ -24,12 +24,242 @@
<link rel="stylesheet" type="text/css" href="/assets/fonts/RoutedGothic/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/ITCCheltenham/style.css">
<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/Adelphe-Trouble-Germinal/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Garabosse/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Velvetyne/stylesheet.css">
</head>
<body id="type-specimen">
<section class="specimen" data-type="Adelphe Trouble Germinal">
<p class="type">'Adelphe Trouble Germinal'</p>
<div class="col-left" >
<h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
<h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
</div>
<div class="content">
<p>
En réponse à cet appel, des dizaines de télévisions de rue se
constituent dans tout le Pays : C'est le début du mouvement
<em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
chaînes de télévision pirate qui apparaissent sur le réseau
<em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
autogérés créés pour l'occasion mais aussi d'associations existantes ou
de groupes étudiants. Elles suivent chacune les principes du mouvement
mais leur situation géographique et sociale teinte les contenus
produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
reportages à propos des dynamiques sociales sur place. Dans la ville
balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
construit par un groupe de personnes handicapées et traite des questions
locales à travers leur prisme tandis qu'à Florence Gli Anelli
<em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
informe sur les politiques migratoires et les conditions de vie des sans
papiers. 
</p>
<p>
Au fil des années, la précarité financière et légale des
<em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
télévisions de quartier chercheront alors à régulariser leur activité,
sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
sur le paysage médiatique et la plupart des chaînes arrêteront leur
activité à l'aube des années 2010. Telestreet aura cependant participé à
la construction d'une approche participative de la télévision que l'on
retrouve aujourd'hui dans l'ADN de certains médias comme
<em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
</p>
</div>
</section>
<section class="specimen" data-type="Garabosse Perle">
<p class="type">Garabosse Perle</p>
<div class="col-left" >
<h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
<h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
</div>
<div class="content">
<p>
En réponse à cet appel, des dizaines de télévisions de rue se
constituent dans tout le Pays : C'est le début du mouvement
<em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
chaînes de télévision pirate qui apparaissent sur le réseau
<em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
autogérés créés pour l'occasion mais aussi d'associations existantes ou
de groupes étudiants. Elles suivent chacune les principes du mouvement
mais leur situation géographique et sociale teinte les contenus
produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
reportages à propos des dynamiques sociales sur place. Dans la ville
balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
construit par un groupe de personnes handicapées et traite des questions
locales à travers leur prisme tandis qu'à Florence Gli Anelli
<em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
informe sur les politiques migratoires et les conditions de vie des sans
papiers. 
</p>
<p>
Au fil des années, la précarité financière et légale des
<em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
télévisions de quartier chercheront alors à régulariser leur activité,
sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
sur le paysage médiatique et la plupart des chaînes arrêteront leur
activité à l'aube des années 2010. Telestreet aura cependant participé à
la construction d'une approche participative de la télévision que l'on
retrouve aujourd'hui dans l'ADN de certains médias comme
<em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
</p>
</div>
</section>
<section class="specimen" data-type="Velvetyne">
<p class="type">Velvetyne</p>
<div class="col-left" >
<h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
<h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
</div>
<div class="content">
<p>
En réponse à cet appel, des dizaines de télévisions de rue se
constituent dans tout le Pays : C'est le début du mouvement
<em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
chaînes de télévision pirate qui apparaissent sur le réseau
<em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
autogérés créés pour l'occasion mais aussi d'associations existantes ou
de groupes étudiants. Elles suivent chacune les principes du mouvement
mais leur situation géographique et sociale teinte les contenus
produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
reportages à propos des dynamiques sociales sur place. Dans la ville
balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
construit par un groupe de personnes handicapées et traite des questions
locales à travers leur prisme tandis qu'à Florence Gli Anelli
<em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
informe sur les politiques migratoires et les conditions de vie des sans
papiers. 
</p>
<p>
Au fil des années, la précarité financière et légale des
<em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
télévisions de quartier chercheront alors à régulariser leur activité,
sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
sur le paysage médiatique et la plupart des chaînes arrêteront leur
activité à l'aube des années 2010. Telestreet aura cependant participé à
la construction d'une approche participative de la télévision que l'on
retrouve aujourd'hui dans l'ADN de certains médias comme
<em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
</p>
</div>
</section>
<section class="specimen" data-type="bilzig">
<p class="type">Bilzig</p>
<div class="col-left" >
<h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
<h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-uppercase" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
</div>
<div class="content">
<p>
En réponse à cet appel, des dizaines de télévisions de rue se
constituent dans tout le Pays : C'est le début du mouvement
<em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
chaînes de télévision pirate qui apparaissent sur le réseau
<em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
autogérés créés pour l'occasion mais aussi d'associations existantes ou
de groupes étudiants. Elles suivent chacune les principes du mouvement
mais leur situation géographique et sociale teinte les contenus
produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
reportages à propos des dynamiques sociales sur place. Dans la ville
balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
construit par un groupe de personnes handicapées et traite des questions
locales à travers leur prisme tandis qu'à Florence Gli Anelli
<em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
informe sur les politiques migratoires et les conditions de vie des sans
papiers. 
</p>
<p>
Au fil des années, la précarité financière et légale des
<em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
télévisions de quartier chercheront alors à régulariser leur activité,
sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
sur le paysage médiatique et la plupart des chaînes arrêteront leur
activité à l'aube des années 2010. Telestreet aura cependant participé à
la construction d'une approche participative de la télévision que l'on
retrouve aujourd'hui dans l'ADN de certains médias comme
<em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
</p>
</div>
</section>
<section class="specimen" data-type="wagram-slab">
<p class="type">Wagram Slab (super variable)</p>
<div class="col-left" >
<h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
<h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
</div>
<div class="content">
<p>
En réponse à cet appel, des dizaines de télévisions de rue se
constituent dans tout le Pays : C'est le début du mouvement
<em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
chaînes de télévision pirate qui apparaissent sur le réseau
<em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
autogérés créés pour l'occasion mais aussi d'associations existantes ou
de groupes étudiants. Elles suivent chacune les principes du mouvement
mais leur situation géographique et sociale teinte les contenus
produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
reportages à propos des dynamiques sociales sur place. Dans la ville
balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
construit par un groupe de personnes handicapées et traite des questions
locales à travers leur prisme tandis qu'à Florence Gli Anelli
<em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
informe sur les politiques migratoires et les conditions de vie des sans
papiers. 
</p>
<p>
Au fil des années, la précarité financière et légale des
<em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
télévisions de quartier chercheront alors à régulariser leur activité,
sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
sur le paysage médiatique et la plupart des chaînes arrêteront leur
activité à l'aube des années 2010. Telestreet aura cependant participé à
la construction d'une approche participative de la télévision que l'on
retrouve aujourd'hui dans l'ADN de certains médias comme
<em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
</p>
</div>
</section>
<section class="specimen" data-type="baskemo-sans">
@ -301,48 +531,7 @@
</section>
<section class="specimen" data-type="wagram-slab">
<p class="type">Wagram Slab (super variable)</p>
<div class="col-left" >
<h1 class="title title-normal" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
<h1 class="title title-bold">Une télévision pirate pour le&nbsp;quartier</h1>
<h1 class="title title-italic" >Un robot-poète ne&nbsp;nous fait toujours pas&nbsp;peur</h1>
</div>
<div class="content">
<p>
En réponse à cet appel, des dizaines de télévisions de rue se
constituent dans tout le Pays : C'est le début du mouvement
<em>Telestreet</em>. Dans les années qui suivent, ce sont à peu près 150
chaînes de télévision pirate qui apparaissent sur le réseau
<em>Telestreet</em>, partout dans le pays. Elles émanent de groupes
autogérés créés pour l'occasion mais aussi d'associations existantes ou
de groupes étudiants. Elles suivent chacune les principes du mouvement
mais leur situation géographique et sociale teinte les contenus
produits. A Naples, <em>InsuTV</em> diffuse des documentaires et des
reportages à propos des dynamiques sociales sur place. Dans la ville
balnéaire de Senigallia, le programme de <em>DiscoVolante</em> TV est
construit par un groupe de personnes handicapées et traite des questions
locales à travers leur prisme tandis qu'à Florence Gli Anelli
<em>MancantiTV</em> diffuse dans la zone de la Piazza Santa Maria et
informe sur les politiques migratoires et les conditions de vie des sans
papiers. 
</p>
<p>
Au fil des années, la précarité financière et légale des
<em>Telestreets</em> commencera à peser sur ses acteur·ices. Certaines
télévisions de quartier chercheront alors à régulariser leur activité,
sans succès. Le mouvement ne parviendra donc pas à pérenniser son impact
sur le paysage médiatique et la plupart des chaînes arrêteront leur
activité à l'aube des années 2010. Telestreet aura cependant participé à
la construction d'une approche participative de la télévision que l'on
retrouve aujourd'hui dans l'ADN de certains médias comme
<em>Primitivi</em> à Marseille ou <em>ZinTV</em> à Bruxelles. 
</p>
</div>
</section>
<section class="specimen" data-type="wagram-mono-slab">