diff --git a/maquette-tests/csspageweaver/README.md b/maquette-tests/README.md similarity index 64% rename from maquette-tests/csspageweaver/README.md rename to maquette-tests/README.md index 8d411c4..58f9aff 100644 --- a/maquette-tests/csspageweaver/README.md +++ b/maquette-tests/README.md @@ -14,4 +14,7 @@ Choses que je n’ai pas automatisées: **TO-DO** - Régler les hypens -- ajouter des `’aux liens \ No newline at end of file +- ajouter des `’aux liens +- ajouter des `+` devant les points dans les blockquote comme dans les bibliogaphies +- attention le «œ» de Routed Gothic Wide +- pas d’accents pour les typo Teletex \ No newline at end of file diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index 1aa5455..053c596 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -143,19 +143,8 @@ - .chapter { - break-before: right; - page: chapter; - } - @page chapter:first { - @top-right { - content: none; - } - - } - @page:blank { @top-left { content: none; diff --git a/maquette-tests/assets/css/chapter-header.css b/maquette-tests/assets/css/chapter-header.css index 7085acf..4dcb0f0 100644 --- a/maquette-tests/assets/css/chapter-header.css +++ b/maquette-tests/assets/css/chapter-header.css @@ -1,15 +1,120 @@ + .chapter { + break-before: right; + page: chapter; + } + + + @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; + } + + } + .chapter-header { position: relative; - /* font-family: var(--font-title); */ - font-size: 36px; - line-height: 1; - break-after: page; + + /* break-after: page; */ + } +.chapter-header .hgroup{ + /* font-family: 'Routed Gothic Wide'; */ + 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); + +} + +.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 .type::before{ + 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; + + + /* text-transform: uppercase; */ +} + +.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; +} + + +.chapter-header .author{ + font-family: 'Teletext'; + font-weight: 200; + color: var(--blue); + margin-top: calc(var(--baseline)*1); + text-transform: uppercase; +} + +.chapter-header .hgroup h2::after{ + /* content: "| | | | | "; + 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); */ + +} + +.chapter-header .author::before{ + display: none; +} + .chapter-header .bio{ display: none; diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css index 70f7166..95a0268 100644 --- a/maquette-tests/assets/css/text.css +++ b/maquette-tests/assets/css/text.css @@ -1,4 +1,4 @@ -.chapter p{ +.chapter p { text-align: justify; hyphens: auto; hyphenate-limit-chars: 8 3; @@ -6,62 +6,61 @@ orphans: 2; hyphens: 2; - + } -p::before{ - content: "..........."; +p::before { + content: "..........."; font-size: var(--sign-size); - color: var(--sign-color); - letter-spacing: var(--sign-spacing); - line-height: var(--sign-baseline); - position: relative; - top: -3px; - padding-right: 8px; - /* position: absolute; - left: 0; */ + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + line-height: var(--sign-baseline); + position: relative; + top: -3px; + padding-right: 8px; } -.following-h3::before{ - display: none!important; +.following-h3::before { + display: none !important; } -.bibliographie p{ - font-size: var(--fs-notes); + + +/* BILBIOGRAPHIE */ + +.bibliographie p { + font-size: var(--fs-notes); line-height: 14px; font-weight: 500; text-align: left; padding-left: calc(var(--unit)*2); text-indent: calc(var(--unit)*-0.75); - - + break-inside: avoid; } -.bibliographie p::before{ - content: "......."; +.bibliographie p::before { + content: "......"; position: absolute; left: calc(var(--unit)*0.75); + left: calc(var(--unit)*0.75 + 16px); top: -6px; - display: block!important; + display: block !important; } - - - - - -/* .chapter > :first-child{ - margin-top: 0px; -} - - - - - */ +.bibliographie p::after { + content: "+"; + position: absolute; + left: calc(var(--unit)*0.75); + top: -2px; + font-size: var(--sign-size); + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + line-height: var(--sign-baseline); +} \ No newline at end of file diff --git a/maquette-tests/assets/fonts/Teletext/MODE7GX0.TTF b/maquette-tests/assets/fonts/Teletext/MODE7GX0.TTF new file mode 100644 index 0000000..d74be41 Binary files /dev/null and b/maquette-tests/assets/fonts/Teletext/MODE7GX0.TTF differ diff --git a/maquette-tests/assets/fonts/Teletext/MODE7GX1.TTF b/maquette-tests/assets/fonts/Teletext/MODE7GX1.TTF new file mode 100644 index 0000000..b7e5905 Binary files /dev/null and b/maquette-tests/assets/fonts/Teletext/MODE7GX1.TTF differ diff --git a/maquette-tests/assets/fonts/Teletext/MODE7GX2.TTF b/maquette-tests/assets/fonts/Teletext/MODE7GX2.TTF new file mode 100644 index 0000000..96d4f7b Binary files /dev/null and b/maquette-tests/assets/fonts/Teletext/MODE7GX2.TTF differ diff --git a/maquette-tests/assets/fonts/Teletext/MODE7GX3.TTF b/maquette-tests/assets/fonts/Teletext/MODE7GX3.TTF new file mode 100644 index 0000000..c9678ae Binary files /dev/null and b/maquette-tests/assets/fonts/Teletext/MODE7GX3.TTF differ diff --git a/maquette-tests/assets/fonts/Teletext/MODE7GX4.TTF b/maquette-tests/assets/fonts/Teletext/MODE7GX4.TTF new file mode 100644 index 0000000..e8103f2 Binary files /dev/null and b/maquette-tests/assets/fonts/Teletext/MODE7GX4.TTF differ diff --git a/maquette-tests/assets/fonts/Teletext/stylesheet.css b/maquette-tests/assets/fonts/Teletext/stylesheet.css new file mode 100644 index 0000000..fea5999 --- /dev/null +++ b/maquette-tests/assets/fonts/Teletext/stylesheet.css @@ -0,0 +1,40 @@ + +@font-face { + font-family: 'Teletext'; + src: url('MODE7GX0.TTF') format('truetype'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Teletext'; + src: url('MODE7GX1.TTF') format('truetype'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Teletext'; + src: url('MODE7GX2.TTF') format('truetype'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Teletext'; + src: url('MODE7GX3.TTF') format('truetype'); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Teletext'; + src: url('MODE7GX4.TTF') format('truetype'); + font-weight: 500; + font-style: normal; + font-display: swap; +} diff --git a/maquette-tests/index.html b/maquette-tests/index.html index ac1fb78..7e0ef29 100644 --- a/maquette-tests/index.html +++ b/maquette-tests/index.html @@ -27,8 +27,9 @@ - - + + + @@ -114,7 +115,7 @@ l’apparition de vocables qui circulent, se répètent et se diffusent dans nos imaginaires. Parmi eux, un mot en particulier cristallise ces tensions : le mot « arafed ».

-

Une sociolinguisitique arafed

+

Une sociolinguisitique arafed

C’est à l’occasion du Chaos Computer Congress, dans l’une des grandes salles de conférence du centre des congrès de Hambourg, que le terme « arafed » est décrit par deux chercheurs