diff --git a/maquette-tests/assets/css/01_var.css b/maquette-tests/assets/css/01_var.css new file mode 100644 index 0000000..bd756cf --- /dev/null +++ b/maquette-tests/assets/css/01_var.css @@ -0,0 +1,42 @@ +:root{ + + --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; + --mono: 'HAL Timezone Mono', monospace; + --mono: 'Routed Gothic Wide', sans-serif; + + --font-decor: 'Decor Round Random'; + + /* --mono: 'HAL Timezone Mono', monospace; */ + + --font-sans: 'Routed Gothic', serif; + /* --font-sans: 'Routed Gothic Wide', serif; */ + /* --note: 'Wagram Slab', serif; */ + --title: 'HNoailles Times Triplex', sans-serif; + + --red: #9B0000; + --green:#009B00; + --green-light:#009b0025; + --blue: #00009B; + + --grey: #e4e4e4; + --border-grey: 2px solid var(--grey); + + + --indent: 7mm; + + --font-size: 18px; + --baseline: 24px; + + --fs-nav: 12px; + + --unit: 20px; + --gap: 8px; + + +} \ No newline at end of file diff --git a/maquette-tests/assets/css/02_body.css b/maquette-tests/assets/css/02_body.css new file mode 100644 index 0000000..1daac24 --- /dev/null +++ b/maquette-tests/assets/css/02_body.css @@ -0,0 +1,22 @@ +* { + 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); + +} \ No newline at end of file diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css new file mode 100644 index 0000000..aaab0e5 --- /dev/null +++ b/maquette-tests/assets/css/03_layout.css @@ -0,0 +1,175 @@ +@media print { + + @page { + size: 165mm 240mm; + margin-top: 16mm; + margin-bottom: 20mm; + bleed: 6mm; + marks: crop; + + } + + @page:left { + margin-left: 26mm; + margin-right: 18mm; + + @top-left{ + content: element(navDecor); + } + + + @bottom-center { + content: counter(page); + font-family: var(--mono); + font-size: 20px; + vertical-align: bottom; + padding-bottom: 8mm; + + } + + + } + + @page:right { + margin-left: 18mm; + margin-right: 26mm; + + @top-left{ + content: element(nav); + } + + @bottom-center { + content: counter(page); + font-family: var(--mono); + font-size: 20px; + vertical-align: bottom; + padding-bottom: 8mm; + + } + + + } + + + + .chapter { + break-before: right; + page: chapter; + } + + + @page chapter:first { + @top-left { + content: none; + } + + } + + @page:blank { + @top-left { + content: none; + } + @bottom-center { + content: none; + } + + + } +} + + + +.chapter-header h2 { + string-set: title content(text); +} + +.chapter-header .author { + string-set: author content(text); +} + +.chapter-header .type { + string-set: type content(text); +} + + +.running-nav{ + position: running(nav); + width: 100%; +} + +.running-nav-decor{ + position: running(navDecor); + width: 100%; +} + +.running-nav-decor ul, +.running-nav ul{ + + display: flex; + gap: var(--gap); + list-style: none; + +} + +.running-nav-decor li, +.running-nav li{ + font-family: var(--mono); + font-size: var(--fs-nav); + border: var(--border-grey); + font-size: var(--fs-nav); + line-height: 1; + padding: 4px 1ch; + min-height: var(--unit); + font-weight: normal; + +} + +.running-nav-decor ul li.nav-title, +.running-nav ul li.nav-title{ + flex-grow: 2; +} + +.running-nav ul li.nav-author{ + flex-shrink: 0; + +} + +.running-nav ul li.nav-title{ + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + + + +.running-nav ul li.nav-title{ + flex: 1 1 auto; + min-width: 0; +} + +.running-nav ul li.nav-author{ + flex: 0 0 auto; /* taille fixe */ +} + + + +.running-nav-decor ul li.nav-chevron{ + padding: 0; + width: var(--unit); + display: flex; + align-items: center; + justify-content: center; +} + +/* .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; + +} */ \ No newline at end of file diff --git a/maquette-tests/assets/css/base/_var.scss b/maquette-tests/assets/css/base/_var.scss deleted file mode 100644 index 07ae9c3..0000000 --- a/maquette-tests/assets/css/base/_var.scss +++ /dev/null @@ -1,18 +0,0 @@ -:root{ - - --font: 'Wagram Slab', serif; - // --font: 'HAL Timezone', serif; - --mono: 'Selectric Mono', monospace; - // --mono: 'HAL Timezone Mono', monospace; - --note: 'Routed Gothic', serif; - - --red: #9B0000; - --green:#009B00; - --green-light:#009b0025; - --blue: #00009B; - - --red: black; - --green:black; - --blue: black; - -} \ No newline at end of file diff --git a/maquette-tests/assets/css/chapter-header.css b/maquette-tests/assets/css/chapter-header.css new file mode 100644 index 0000000..270d5b6 --- /dev/null +++ b/maquette-tests/assets/css/chapter-header.css @@ -0,0 +1,156 @@ + + + +.chapter-nav ul{ + display: flex; + font-family: var(--mono); + list-style: none; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-gap: var(--gap); + margin-bottom: var(--gap); +} + +.chapter-nav ul li{ + background-color: var(--grey); + font-size: var(--fs-nav); + line-height: 1; + padding: 4px 1ch; +} +.chapter-nav ul li.selected{ + border: var(--border-grey); + background: none; +} + + +.chapter-header { + /* break-after: page; */ + position: relative; +} + + + +.chapter-header p { + text-indent: 0px !important; +} + + +.chapter-header .h2-pattern { + display: none; + /* 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 .type { + font-family: var(--mono); + font-size: var(--fs-nav); + background-color: var(--grey); + font-size: var(--fs-nav); + line-height: 1; + padding: 4px 1ch; + height: var(--unit); + margin-left: calc(var(--unit) + var(--gap)); + +} + +.chapter-header .type::before{ + content: ">"; + display: block; + width: var(--unit); + height: var(--unit); + background-color: var(--grey); + position: absolute; + top: 0; + left: calc((var(--unit) + var(--gap))*-1); + display: flex; + align-items: center; + justify-content: center; +} + + + +.chapter-header .hgroup{ + margin-top: var(--gap); + border-left: var(--unit) solid var(--grey); + border-left: var(--unit) solid var(--grey); + padding-left: var(--gap); + + + display: flex; + flex-direction: column; + +} + +.chapter-header h2 { + font-family: 'Routed Gothic Wide'; + line-height: 1.2; + font-size: 36px; + font-weight: normal; + text-align: center; + padding-top: calc(var(--baseline)*1); + padding-bottom: calc(var(--baseline)*1); + + +} + + +.chapter-header .author { + + background-color: black; + color: white; + + font-family: var(--mono); + font-size: var(--fs-nav); + text-align: center; + + font-size: var(--fs-nav); + line-height: 1; + padding: 4px 1ch; + font-weight: normal; + + height: var(--unit); + margin-bottom: 0; + + /* display: inline-block; + margin-inline: auto; + margin-top: calc(var(--baseline)*1); */ + +} + +.chapter-header .bio{ + display: none; +} + +.chapter-header{ + margin-bottom: calc(var(--baseline)*1); +} + +.chapter-header:after{ + /* content: ""; + display: block; + margin-top: var(--gap); + + + border-top: 2px dashed var(--grey); + + margin-bottom: calc(var(--baseline)*1); */ + +} \ No newline at end of file diff --git a/maquette-tests/assets/css/item-decor.css b/maquette-tests/assets/css/item-decor.css new file mode 100644 index 0000000..fe7bcf5 --- /dev/null +++ b/maquette-tests/assets/css/item-decor.css @@ -0,0 +1,16 @@ +.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; +} \ No newline at end of file diff --git a/maquette-tests/assets/css/modules/_chapter-header.scss b/maquette-tests/assets/css/modules/_chapter-header.scss deleted file mode 100644 index 2523fba..0000000 --- a/maquette-tests/assets/css/modules/_chapter-header.scss +++ /dev/null @@ -1,60 +0,0 @@ -.chapter-header{ - // break-after: page; - margin-bottom: calc(var(--baseline)*6); -} - -.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: 38px; - line-height: 1; - font-family: var(--note); - color: var(--blue); - margin-bottom: calc(var(--baseline)*1); - text-align: center; - font-weight: normal; - -} - - -.chapter-header .type{ - margin-bottom: calc(var(--baseline)*1); -} - -.chapter-header .type, -.chapter-header .bio{ - font-family: var(--mono); - // text-align: right; - hyphens: none; - font-size: 9px; - line-height: 1.2; - left: 0px!important; - -} - -.chapter-header .bio{ -margin-top: calc(var(--baseline)*1); - text-align: left; -} - -.chapter-header .author{ - left: 0px!important; - font-size: 38px; - line-height: 1; - font-family: var(--note); - font-weight: normal; - text-align: center; - // color: var(--green); -} - diff --git a/maquette-tests/assets/css/notes.css b/maquette-tests/assets/css/notes.css new file mode 100644 index 0000000..445cb20 --- /dev/null +++ b/maquette-tests/assets/css/notes.css @@ -0,0 +1,50 @@ +.following-note { + font-family: var(--font-sans); + font-size: 12px; + line-height: 14px; + font-weight: 500; + + display: block; + margin-top: calc(var(--baseline)*0.5); + margin-bottom: calc(var(--baseline)*0.5); + + +} + +.container-following-note { + margin-left: 30%; +} + + +.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; + position: relative; + top: -4px; +} + + +.following-note_marker { + position: absolute; + left: 0; +} \ No newline at end of file diff --git a/maquette-tests/assets/css/style.css.map b/maquette-tests/assets/css/style.css.map deleted file mode 100644 index 4530196..0000000 --- a/maquette-tests/assets/css/style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"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/_notes.scss","modules/_chapter-header.scss","modules/_item-decor.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css new file mode 100644 index 0000000..38bd7e6 --- /dev/null +++ b/maquette-tests/assets/css/text.css @@ -0,0 +1,99 @@ +.chapter p{ + text-align: justify; + hyphens: auto; + hyphenate-limit-chars: 8 3; + position: relative; + orphans: 2; + hyphens: 2; + + +} + +.container-following-note + p, +p + p{ + text-indent: 30%; + position: relative; + +} + +p::before{ + /* content: ">"; + position: absolute; + left: 0; + font-family: var(--mono); + font-weight: normal; + font-size: var(--fs-nav); */ + + /* display: block; + width: var(--unit); + height: var(--unit); + background-color: var(--grey); + top: 2px; + display: flex; + align-items: center; */ + /* justify-content: center; */ +} + + + + + +h3, h4{ + break-after: avoid; +} +h3, h4{ + font-family: var(--mono); + font-size: var(--fs-nav); + background-color: var(--grey); + font-size: var(--fs-nav); + line-height: 1; + padding: 4px 1ch; + min-height: var(--unit); + margin-top: calc(var(--baseline)*1.5); + margin-bottom: calc(var(--baseline)*0.5); + font-weight: normal; +} + +h4{ + border: var(--border-grey); + background: none; +} + +blockquote p{ + /* font-family: var(--mono); */ +} + +blockquote{ + padding-left: 3ch; + /* font-style: italic; */ + + margin-top: calc(var(--baseline)*0..5); + margin-bottom: calc(var(--baseline)*0.5); + + +} + +blockquote::before{ + content: "> > > > > > > > > >"; + display: block; + width: 1ch; + position: absolute; + left: 0; + font-family: var(--mono); + font-size: var(--fs-nav); + font-style: normal; +} + + + + +.chapter > :first-child{ + margin-top: 0px; +} + + + + +.pagedjs_area{ + position: relative; +} diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff new file mode 100644 index 0000000..d9b81a7 Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff2 b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff2 new file mode 100644 index 0000000..e05bc7a Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBold.woff2 differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff new file mode 100644 index 0000000..2ae5c73 Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff2 b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff2 new file mode 100644 index 0000000..fd58dbc Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalBoldItalic.woff2 differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff new file mode 100644 index 0000000..6155e8b Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff2 b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff2 new file mode 100644 index 0000000..c9011ca Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalItalic.woff2 differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff new file mode 100644 index 0000000..16c36e1 Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff2 b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff2 new file mode 100644 index 0000000..6df7fe0 Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalRegular.woff2 differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff new file mode 100644 index 0000000..64ce150 Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff2 b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff2 new file mode 100644 index 0000000..12347bc Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBold.woff2 differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff new file mode 100644 index 0000000..408ce76 Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff2 b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff2 new file mode 100644 index 0000000..4fe354d Binary files /dev/null and b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/Adelphe-Trouble-GerminalSemiBoldItalic.woff2 differ diff --git a/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/stylesheet.css b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/stylesheet.css new file mode 100644 index 0000000..cde71f4 --- /dev/null +++ b/maquette-tests/assets/fonts/Adelphe-Trouble-Germinal/stylesheet.css @@ -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; +} diff --git a/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Italic.woff2 b/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Italic.woff2 new file mode 100644 index 0000000..ff6bad4 Binary files /dev/null and b/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Italic.woff2 differ diff --git a/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Regular.woff2 b/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Regular.woff2 new file mode 100644 index 0000000..072e0f1 Binary files /dev/null and b/maquette-tests/assets/fonts/BaskemoSans/BaskemoSans-Regular.woff2 differ diff --git a/maquette-tests/assets/fonts/BaskemoSans/stylesheet.css b/maquette-tests/assets/fonts/BaskemoSans/stylesheet.css new file mode 100644 index 0000000..cf75148 --- /dev/null +++ b/maquette-tests/assets/fonts/BaskemoSans/stylesheet.css @@ -0,0 +1,15 @@ + +@font-face { + font-family: 'Baskemo Sans'; + src: url('BaskemoSans-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; +} + + +@font-face { + font-family: 'Baskemo Sans'; + src: url('BaskemoSans-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; +} \ No newline at end of file diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff new file mode 100644 index 0000000..5fd4409 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff2 new file mode 100644 index 0000000..9614c31 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Black.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff new file mode 100644 index 0000000..ff97854 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff2 new file mode 100644 index 0000000..0b78763 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-BlackItalic.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff new file mode 100644 index 0000000..31d2090 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff2 new file mode 100644 index 0000000..f730359 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Bold.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff new file mode 100644 index 0000000..7209325 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff2 new file mode 100644 index 0000000..512d513 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-BoldItalic.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff new file mode 100644 index 0000000..226d835 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff2 new file mode 100644 index 0000000..e67ab08 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Italic.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff new file mode 100644 index 0000000..81f9752 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff2 new file mode 100644 index 0000000..3af15a2 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Medium.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff new file mode 100644 index 0000000..1fa9f36 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff2 new file mode 100644 index 0000000..0888aed Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-MediumItalic.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff b/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff new file mode 100644 index 0000000..8697205 Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff differ diff --git a/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff2 b/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff2 new file mode 100644 index 0000000..718ddbd Binary files /dev/null and b/maquette-tests/assets/fonts/Bilzig/Bilzig-Regular.woff2 differ diff --git a/maquette-tests/assets/fonts/Bilzig/stylesheet.css b/maquette-tests/assets/fonts/Bilzig/stylesheet.css new file mode 100644 index 0000000..699f972 --- /dev/null +++ b/maquette-tests/assets/fonts/Bilzig/stylesheet.css @@ -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; +} + diff --git a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff new file mode 100644 index 0000000..827bf29 Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff2 b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff2 new file mode 100644 index 0000000..3f9b97e Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Bold.woff2 differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff new file mode 100644 index 0000000..1b3487d Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff2 b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff2 new file mode 100644 index 0000000..6977fe4 Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Medium.woff2 differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff new file mode 100644 index 0000000..ebfb024 Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff2 b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff2 new file mode 100644 index 0000000..fcb7653 Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorPixelRound-Regular.woff2 differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff new file mode 100644 index 0000000..387959e Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff2 b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff2 new file mode 100644 index 0000000..8a423f7 Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandom-Regular.woff2 differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff new file mode 100644 index 0000000..27fd6a9 Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff differ diff --git a/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff2 b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff2 new file mode 100644 index 0000000..98fd2e3 Binary files /dev/null and b/maquette-tests/assets/fonts/DecorRound/DecorRoundRandomRandom-Regular.woff2 differ diff --git a/maquette-tests/assets/fonts/DecorRound/stylesheet.css b/maquette-tests/assets/fonts/DecorRound/stylesheet.css new file mode 100644 index 0000000..a4360f0 --- /dev/null +++ b/maquette-tests/assets/fonts/DecorRound/stylesheet.css @@ -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; +} + diff --git a/maquette-tests/assets/fonts/Garabosse/Garabosse-Perle.ttf b/maquette-tests/assets/fonts/Garabosse/Garabosse-Perle.ttf new file mode 100644 index 0000000..4b2ff5a Binary files /dev/null and b/maquette-tests/assets/fonts/Garabosse/Garabosse-Perle.ttf differ diff --git a/maquette-tests/assets/fonts/Garabosse/stylesheet.css b/maquette-tests/assets/fonts/Garabosse/stylesheet.css new file mode 100644 index 0000000..5cfec7c --- /dev/null +++ b/maquette-tests/assets/fonts/Garabosse/stylesheet.css @@ -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; +} diff --git a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Bold.woff b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Bold.woff new file mode 100644 index 0000000..2f29ce4 Binary files /dev/null and b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Bold.woff differ diff --git a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Book.woff b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Book.woff new file mode 100644 index 0000000..bfc454b Binary files /dev/null and b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Book.woff differ diff --git a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Light.woff b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Light.woff new file mode 100644 index 0000000..6aebd26 Binary files /dev/null and b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Light.woff differ diff --git a/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Regular.woff b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Regular.woff new file mode 100644 index 0000000..1a4899f Binary files /dev/null and b/maquette-tests/assets/fonts/Velvetyne/Velvelyne-Regular.woff differ diff --git a/maquette-tests/assets/fonts/Velvetyne/stylesheet.css b/maquette-tests/assets/fonts/Velvetyne/stylesheet.css new file mode 100644 index 0000000..6b97f2a --- /dev/null +++ b/maquette-tests/assets/fonts/Velvetyne/stylesheet.css @@ -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; +} diff --git a/maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.30.png b/maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.30.png new file mode 100644 index 0000000..dd676b0 Binary files /dev/null and b/maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.30.png differ diff --git a/maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.36.png b/maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.36.png new file mode 100644 index 0000000..01d1596 Binary files /dev/null and b/maquette-tests/assets/layout-4/Screenshot 2026-03-03 at 14.20.36.png differ diff --git a/maquette-tests/assets/css/base/_body.scss b/maquette-tests/assets/layout-4/base/_body.scss similarity index 88% rename from maquette-tests/assets/css/base/_body.scss rename to maquette-tests/assets/layout-4/base/_body.scss index 07aa304..e274210 100644 --- a/maquette-tests/assets/css/base/_body.scss +++ b/maquette-tests/assets/layout-4/base/_body.scss @@ -16,8 +16,7 @@ a { // } body { - --font-size: 12px; - --baseline: 17px; + font-family: var(--font); font-size: var(--font-size); line-height: var(--baseline); diff --git a/maquette-tests/assets/css/base/_layout.scss b/maquette-tests/assets/layout-4/base/_layout.scss similarity index 57% rename from maquette-tests/assets/css/base/_layout.scss rename to maquette-tests/assets/layout-4/base/_layout.scss index a99b44d..6e78618 100644 --- a/maquette-tests/assets/css/base/_layout.scss +++ b/maquette-tests/assets/layout-4/base/_layout.scss @@ -1,6 +1,18 @@ @mixin running(){ font-family: var(--mono); - font-size: 10px; + 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; + } @@ -10,7 +22,7 @@ @page { size: 165mm 240mm; - margin-top: 10mm; + margin-top: 16mm; margin-bottom: 20mm; bleed: 6mm; marks: crop; @@ -18,35 +30,36 @@ } @page:left{ - margin-left: 35mm; - margin-right: 30mm; - @bottom-left-corner{ + margin-left: 18mm; + margin-right: 26mm; + @bottom-center{ content: counter(page); - @include running(); + @include numPage(); - text-align: left; - padding-left: 10mm; + } - @bottom-left { + @top-left { content: string(author); @include running(); + // text-align: left; + // padding-left: 3ch; } - @bottom-center { + @top-center { content: string(type); @include running(); } } @page:right{ - margin-left: 30mm; - margin-right: 35mm; - @bottom-right-corner{ + margin-left: 26mm; + margin-right: 18mm; + @bottom-center{ content: counter(page); - @include running(); + @include numPage(); text-align: right; - padding-right: 10mm; + } - @bottom-left { + @top-left { content: string(title); @include running(); } @@ -58,6 +71,13 @@ .chapter{ break-before: right; + page: chapter; + } + + + @page chapter:first{ + @top-left{ content: none; } + } } diff --git a/maquette-tests/assets/css/base/_type-specimen.scss b/maquette-tests/assets/layout-4/base/_type-specimen.scss similarity index 100% rename from maquette-tests/assets/css/base/_type-specimen.scss rename to maquette-tests/assets/layout-4/base/_type-specimen.scss diff --git a/maquette-tests/assets/css/base/_type.scss b/maquette-tests/assets/layout-4/base/_type.scss similarity index 96% rename from maquette-tests/assets/css/base/_type.scss rename to maquette-tests/assets/layout-4/base/_type.scss index 3b3f01a..85f6ae5 100644 --- a/maquette-tests/assets/css/base/_type.scss +++ b/maquette-tests/assets/layout-4/base/_type.scss @@ -13,7 +13,7 @@ } [data-type="vollkorn"]{ - font-family: "Literata", serif; + font-family: "Vollkorn", serif; } @@ -130,3 +130,9 @@ } + +[data-type="baskemo-sans"]{ + font-family: 'Baskemo Sans', serif; +} + + diff --git a/maquette-tests/assets/layout-4/base/_var.scss b/maquette-tests/assets/layout-4/base/_var.scss new file mode 100644 index 0000000..9dc401f --- /dev/null +++ b/maquette-tests/assets/layout-4/base/_var.scss @@ -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; + +} \ No newline at end of file diff --git a/maquette-tests/assets/layout-4/modules/_chapter-header.scss b/maquette-tests/assets/layout-4/modules/_chapter-header.scss new file mode 100644 index 0000000..7a2636f --- /dev/null +++ b/maquette-tests/assets/layout-4/modules/_chapter-header.scss @@ -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; +} + diff --git a/maquette-tests/assets/layout-4/modules/_footnotes.scss b/maquette-tests/assets/layout-4/modules/_footnotes.scss new file mode 100644 index 0000000..892efc1 --- /dev/null +++ b/maquette-tests/assets/layout-4/modules/_footnotes.scss @@ -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) "} "; +} \ No newline at end of file diff --git a/maquette-tests/assets/css/modules/_item-decor.scss b/maquette-tests/assets/layout-4/modules/_item-decor.scss similarity index 62% rename from maquette-tests/assets/css/modules/_item-decor.scss rename to maquette-tests/assets/layout-4/modules/_item-decor.scss index baf20b5..398ec63 100644 --- a/maquette-tests/assets/css/modules/_item-decor.scss +++ b/maquette-tests/assets/layout-4/modules/_item-decor.scss @@ -1,16 +1,17 @@ .item-decor{ - font-family: var(--font); + font-family: var(--sans); font-weight: 400; font-size: 12px; position: absolute; - color: var(--green); + + } .pagedjs_left_page .item-decor{ - left: -26mm; + left: -12mm; } .pagedjs_right_page .item-decor{ - right: -26mm; + right: -12mm; } \ No newline at end of file diff --git a/maquette-tests/assets/css/modules/_notes.scss b/maquette-tests/assets/layout-4/modules/_notes.scss similarity index 71% rename from maquette-tests/assets/css/modules/_notes.scss rename to maquette-tests/assets/layout-4/modules/_notes.scss index ca5f597..8a4bb42 100644 --- a/maquette-tests/assets/css/modules/_notes.scss +++ b/maquette-tests/assets/layout-4/modules/_notes.scss @@ -1,6 +1,6 @@ .inline-note{ + color: var(--green); - // break-inside: avoid; float: left; clear: both; @@ -28,11 +28,25 @@ .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(--font); + 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; } @@ -43,3 +57,5 @@ // display: block; text-align: left; } + + diff --git a/maquette-tests/assets/css/modules/_text.scss b/maquette-tests/assets/layout-4/modules/_text.scss similarity index 73% rename from maquette-tests/assets/css/modules/_text.scss rename to maquette-tests/assets/layout-4/modules/_text.scss index f1709ff..deeaca3 100644 --- a/maquette-tests/assets/css/modules/_text.scss +++ b/maquette-tests/assets/layout-4/modules/_text.scss @@ -4,8 +4,11 @@ p{ text-align: justify; hyphens: auto; + hyphenate-limit-chars: 8 3; position: relative; - color: var(--blue); + // color: var(--blue); + + letter-spacing: 0.01rem; // &::before{ @@ -20,19 +23,10 @@ } p + p{ - left: 14mm; - text-indent: 7mm; - // &::before{ - // left: -19mm; - // } + text-indent: var(--indent); + } -p + p + p{ - left: 7mm; -// &::before{ -// left: -13mm; -// } -} @@ -41,12 +35,17 @@ h3{ margin-bottom: calc(var(--baseline)*0.5); text-align: center; font-weight: normal; - text-decoration: underline; + // text-decoration: underline; font-family: var(--mono); text-transform: uppercase; color: var(--blue); max-width: 18ch; - margin-inline: auto; + // margin-inline: auto; + letter-spacing: 0.05rem; + color: black; + text-decoration: underline 1px; + text-underline-offset: 2px; + // &::before{ // content: ''; @@ -67,18 +66,21 @@ blockquote p{ } blockquote{ - position: relative; - left: 14mm; - p{ - font-size: 16px; - line-height: calc(var(--baseline)*1.25); - font-weight: 300; + 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)*2); - // margin-bottom: calc(var(--baseline)*2); + margin-top: calc(var(--baseline)*1); + margin-bottom: calc(var(--baseline)*1); } diff --git a/maquette-tests/assets/css/style.css b/maquette-tests/assets/layout-4/style.css similarity index 68% rename from maquette-tests/assets/css/style.css rename to maquette-tests/assets/layout-4/style.css index f6cf000..17a1b63 100644 --- a/maquette-tests/assets/css/style.css +++ b/maquette-tests/assets/layout-4/style.css @@ -2,16 +2,20 @@ @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: "Wagram Slab", serif; - --mono: "Selectric Mono", monospace; - --note: "Routed Gothic", serif; + --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; - --red: black; - --green:black; - --blue: black; + --indent: 7mm; + --font-size: 12px; + --baseline: 18px; } * { @@ -28,8 +32,6 @@ a { } body { - --font-size: 12px; - --baseline: 17px; font-family: var(--font); font-size: var(--font-size); line-height: var(--baseline); @@ -38,46 +40,49 @@ body { @media print { @page { size: 165mm 240mm; - margin-top: 10mm; + margin-top: 16mm; margin-bottom: 20mm; bleed: 6mm; marks: crop; } @page :left { - margin-left: 35mm; - margin-right: 30mm; - @bottom-left-corner { + margin-left: 18mm; + margin-right: 26mm; + @bottom-center { content: counter(page); - font-family: var(--mono); - font-size: 10px; - text-align: left; - padding-left: 10mm; + font-family: var(--sans); + font-size: 20px; + vertical-align: bottom; + padding-bottom: 5mm; + width: 10mm; } - @bottom-left { + @top-left { content: string(author); font-family: var(--mono); - font-size: 10px; + font-size: 12px; } - @bottom-center { + @top-center { content: string(type); font-family: var(--mono); - font-size: 10px; + font-size: 12px; } } @page :right { - margin-left: 30mm; - margin-right: 35mm; - @bottom-right-corner { + margin-left: 26mm; + margin-right: 18mm; + @bottom-center { content: counter(page); - font-family: var(--mono); - font-size: 10px; + font-family: var(--sans); + font-size: 20px; + vertical-align: bottom; + padding-bottom: 5mm; + width: 10mm; text-align: right; - padding-right: 10mm; } - @bottom-left { + @top-left { content: string(title); font-family: var(--mono); - font-size: 10px; + font-size: 12px; } } /*p{ @@ -86,6 +91,12 @@ body { .chapter { -moz-column-break-before: right; break-before: right; + page: chapter; + } + @page chapter:first { + @top-left { + content: none; + } } } [data-type=ovo] { @@ -97,7 +108,7 @@ body { } [data-type=vollkorn] { - font-family: "Literata", serif; + font-family: "Vollkorn", serif; } [data-type=timezone] { @@ -213,6 +224,10 @@ body { font-weight: 200; } +[data-type=baskemo-sans] { + font-family: "Baskemo Sans", serif; +} + #type-specimen { background-color: #cfcfcf; } @@ -235,8 +250,7 @@ body { } #type-specimen p:first-of-type { text-align: justify; - -webkit-hyphens: auto; - hyphens: auto; + hyphens: auto; margin-bottom: 1em; } #type-specimen p { @@ -311,38 +325,34 @@ body { .chapter p { text-align: justify; - -webkit-hyphens: auto; - hyphens: auto; + hyphens: auto; + hyphenate-limit-chars: 8 3; position: relative; - color: var(--blue); + letter-spacing: 0.01rem; } .chapter p + p { - left: 14mm; - text-indent: 7mm; -} -.chapter p + p + p { - left: 7mm; + 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; - 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; + -webkit-text-decoration: underline 1px; + text-decoration: underline 1px; + text-underline-offset: 2px; } .chapter blockquote { - position: relative; - left: 14mm; -} -.chapter blockquote p { - font-size: 16px; - line-height: calc(var(--baseline) * 1.25); - font-weight: 300; + 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; @@ -352,41 +362,53 @@ body { position: relative; } -.inline-note { - color: var(--green); - float: left; - clear: both; - width: 46mm; - text-align: left; - -webkit-hyphens: none; - 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; -} -.inline-note .body_note { - padding-top: 5px; +.pagedjs_footnote { + font-family: var(--sans); + line-height: 1.3; + font-size: 12px; + font-weight: 200; + text-indent: -14mm; + padding-left: 14mm; } -.pagedjs_floatnote_marker, -.pagedjs_floatnote_call { - color: var(--green); - padding-left: 0.25ch; - line-height: 0; - font-size: 9px; +.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_floatnote_marker { - text-align: left; +.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-bottom: calc(var(--baseline) * 6); + margin-top: calc(var(--baseline) * 2); + margin-bottom: calc(var(--baseline) * 3); + --color: black; } .chapter-header h2 { @@ -402,55 +424,72 @@ body { } .chapter-header h2 { - font-size: 38px; - line-height: 1; - font-family: var(--note); + 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: center; + text-align: left; font-weight: normal; + color: var(--color); + text-align: center; } .chapter-header .type { margin-bottom: calc(var(--baseline) * 1); -} - -.chapter-header .type, -.chapter-header .bio { - font-family: var(--mono); - -webkit-hyphens: none; - hyphens: none; - font-size: 9px; - line-height: 1.2; - left: 0px !important; + display: none; } .chapter-header .bio { - margin-top: calc(var(--baseline) * 1); + 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: 38px; - line-height: 1; - font-family: var(--note); + 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(--font); + font-family: var(--sans); font-weight: 400; font-size: 12px; position: absolute; - color: var(--green); } .pagedjs_left_page .item-decor { - left: -26mm; + left: -12mm; } .pagedjs_right_page .item-decor { - right: -26mm; + right: -12mm; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/maquette-tests/assets/layout-4/style.css.map b/maquette-tests/assets/layout-4/style.css.map new file mode 100644 index 0000000..f90e447 --- /dev/null +++ b/maquette-tests/assets/layout-4/style.css.map @@ -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":"AAAQ,wEAAA;AACA,8HAAA;AACA,6GAAA;ACFR;EAEI,mCAAA;EACA,4BAAA;EAEA,mCAAA;EACA,+BAAA;EACA,iCAAA;EAGA,8BAAA;EAEA,8CAAA;EAEA,cAAA;EACA,eAAA;EACA,uBAAA;EACA,eAAA;EAIA,aAAA;EAEA,iBAAA;EACA,gBAAA;ACNJ;;AClBA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;EACA,mCAAA;EACA,gCAAA;EACA,8BAAA;ADqBJ;;ACnBA;EACI,mBAAA;ADsBJ;;ACdA;EAEI,wBAAA;EACA,2BAAA;EACA,4BAAA;ADgBJ;;AEjBA;EAEE;IACE,iBAAA;IACA,gBAAA;IACA,mBAAA;IACA,UAAA;IACA,WAAA;EFmBF;EEfA;IACE,iBAAA;IACA,kBAAA;IACC;MACC,sBAAA;MA1BJ,wBAAA;MACA,eAAA;MACA,sBAAA;MACA,mBAAA;MACA,WAAA;IF4CE;IEjBC;MACC,uBAAA;MAxCJ,wBAAA;MACA,eAAA;IF4DE;IEhBC;MACD,qBAAA;MA9CF,wBAAA;MACA,eAAA;IFiEE;EACF;EEhBA;IACE,iBAAA;IACA,kBAAA;IACC;MACC,sBAAA;MA/CJ,wBAAA;MACA,eAAA;MACA,sBAAA;MACA,mBAAA;MACA,WAAA;MA6CM,iBAAA;IFsBJ;IEnBC;MACC,sBAAA;MA7DJ,wBAAA;MACA,eAAA;IFmFE;EACF;EEnBA;;IAAA;EAIA;IACE,+BAAA;SAAA,mBAAA;IACA,aAAA;EFoBF;EEhBA;IACE;MAAW,aAAA;IFmBX;EACF;AACF;AF/FA;EACE,yBAAA;AEiGF;;AF7FA;EACE,8BAAA;AEgGF;;AF5FA;EACE,8BAAA;AE+FF;;AF3FA;EACE,kCAAA;AE8FF;;AF3FA;EACE,2CAAA;AE8FF;;AF1FA;EACE,+BAAA;AE6FF;;AF1FA;EACE,wCAAA;AE6FF;;AF1FA;EACE,4BAAA;AE6FF;;AF1FA;EACE,2BAAA;AE6FF;;AF3FA;EACE,gCAAA;AE8FF;;AF5FA;EACE,mCAAA;AE+FF;;AF5FA;EACE,8BAAA;AE+FF;;AF5FA;EACE,oCAAA;AE+FF;;AF5FA;EACE,kCAAA;AE+FF;;AF5FA;EACG,mCAAA;AE+FH;;AF5FA;EACG,mDAAA;AE+FH;;AF5FA;EACG,kDAAA;AE+FH;;AF5FA;EACG,mDAAA;AE+FH;;AF5FA;EACG,6CAAA;AE+FH;;AF5FA;EACG,4CAAA;AE+FH;;AF5FA;EACG,6CAAA;AE+FH;;AF5FA;EACG,qCAAA;AE+FH;;AF7FA;EACG,uCAAA;AEgGH;;AF7FA;EACG,4BAAA;AEgGH;;AF9FA;EACG,iCAAA;AEiGH;;AF/FA;EACG,0CAAA;AEkGH;;AF/FA;EACE,6CAAA;AEkGF;;AF/FA;EACE,wCAAA;AEkGF;;AF9FA;EACE,+CAAA;AEiGF;;AF9FA;EACE,oCAAA;AEiGF;;AF7FA;EACE,oCAAA;EACA,gBAAA;AEgGF;;AF1FA;EACE,kCAAA;AE6FF;;AGnOA;EACI,yBAAA;AHsOJ;AGpOI;EACI,uBAAA;EACA,mBAAA;EACA,iBAAA;AHsOR;AGnOI;EAEI,aAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;EAEA,aAAA;EACA,8BAAA;EACA,SAAA;AHmOR;AG/NI;EACI,mBAAA;EACA,aAAA;EACA,kBAAA;AHiOR;AG9NI;EACA,eAAA;AHgOJ;AG5NI;EAEI,eAAA;EACA,gBAAA;EACA,eAAA;EACA,mBAAA;AH6NR;AG1NI;EACI,gBAAA;AH4NR;AGzNI;EACI,iBAAA;AH2NR;AGxNK;EACG,mBAAA;AH0NR;AGvNK;EACG,mBAAA;EACA,kBAAA;AHyNR;AGvNM;EACE,2BAAA;EACA,kBAAA;AHyNR;AGtNI;EACE,mBAAA;EACA,yBAAA;EACA,uBAAA;AHwNN;;AGlNE;EACE,mBAAA;EACE,gBAAA;AHqNN;;AGtMI;;;;EACI,8BAAA;AH4MR;;AGxMA;EACI,yBAAA;EAEA,kBAAA;AH0MJ;;AGrME;EACE,8BAAA;EACA,kBAAA;AHwMJ;;AGnME;EACE,2BAAA;EACA,8BAAA;EACA,kBAAA;AHsMJ;;AG/LE;;;EACE,8BAAA;AHoMJ;;AG9LE;EACE,2BAAA;AHiMJ;;AI/TI;EACA,mBAAA;EACA,aAAA;EACA,0BAAA;EACA,kBAAA;EAGA,uBAAA;AJgUJ;AIlTA;EACI,0BAAA;AJoTJ;AI7SA;EACI,uCAAA;EACA,0CAAA;EACA,kBAAA;EACA,mBAAA;EAEA,wBAAA;EACA,yBAAA;EACC,kBAAA;EACC,eAAA;EAEA,uBAAA;EACF,YAAA;EACE,sCAAA;UAAA,8BAAA;EACA,0BAAA;AJ6SN;AIxRA;EACI,wBAAA;EAWA,2BAAA;EAEI,qCAAA;EACA,wCAAA;AJ+QR;AI3QA;EAEI,eAAA;AJ4QJ;;AIpOA;EACI,kBAAA;AJuOJ;;AKxWA;EACI,wBAAA;EAEA,gBAAA;EACD,eAAA;EACA,gBAAA;EACA,kBAAA;EACA,kBAAA;AL0WH;;AK1VA;EACI,mBAAA;EACA,gBAAA;EACA,WAAA;EACA,yBAAA;EAEA,eAAA;OAAA,UAAA;EACA,sBAAA;OAAA,iBAAA;EAEA,iBAAA;AL2VJ;;AKxUA;EACI,UAAA;AL2UJ;;AKtUA;EAIO,eAAA;EACF,wBAAA;EACD,gBAAA;EAGA,gBAAA;ALoUJ;AKnUI;EACI,6BAAA;EACA,kDAAA;ALqUR;AKlUI;EACI,YAAA;ALoUR;;AK9TA;EACI,0CAAA;ALiUJ;;AMjZA;EAEQ,qCAAA;EACJ,wCAAA;EACA,cAAA;ANmZJ;;AMhZA;EACE,+BAAA;ANmZF;;AMhZA;EACE,gCAAA;ANmZF;;AMhZA;EACE,8BAAA;ANmZF;;AM/YA;EACI,eAAA;EACA,gBAAA;EACA,wBAAA;EACE,wBAAA;EACF,kBAAA;EACA,wCAAA;EACA,gBAAA;EACA,mBAAA;EAEA,mBAAA;EACA,kBAAA;ANiZJ;;AM5YA;EACK,wCAAA;EACA,aAAA;AN+YL;;AMxYA;EACE,qCAAA;EACG,wBAAA;EACA,aAAA;EACC,gBAAA;EACH,eAAA;AN2YH;AMxYQ;EACE,cAAA;EACA,gBAAA;EACA,mBAAA;EACI,mBAAA;AN0Yd;AMvYQ;EACE,kBAAA;EACA,kBAAA;EACA,gBAAA;EACA,mBAAA;EACI,mBAAA;EACA,aAAA;ANyYd;;AMlYA;EACI,oBAAA;EACF,eAAA;EACE,gBAAA;EACA,mBAAA;EACA,cAAA;EACA,wBAAA;EAEA,kBAAA;EACA,cAAA;EACA,mBAAA;EACE,qCAAA;EACA,sCAAA;UAAA,8BAAA;EACA,0BAAA;ANoYN;;AOzdA;EACI,wBAAA;EACA,gBAAA;EACA,eAAA;EACA,kBAAA;AP4dJ;;AOvdA;EACK,WAAA;AP0dL;;AOvdA;EACK,YAAA;AP0dL","file":"style.css"} \ No newline at end of file diff --git a/maquette-tests/assets/css/style.scss b/maquette-tests/assets/layout-4/style.scss similarity index 77% rename from maquette-tests/assets/css/style.scss rename to maquette-tests/assets/layout-4/style.scss index 81f02e8..111aa01 100644 --- a/maquette-tests/assets/css/style.scss +++ b/maquette-tests/assets/layout-4/style.scss @@ -6,6 +6,7 @@ @use "base/type-specimen"; @use "modules/text"; -@use "modules/notes"; +// @use "modules/notes"; +@use "modules/footnotes"; @use "modules/chapter-header"; @use "modules/item-decor"; \ No newline at end of file diff --git a/maquette-tests/assets/type-specimen.css b/maquette-tests/assets/type-specimen.css new file mode 100644 index 0000000..d3c9bb2 --- /dev/null +++ b/maquette-tests/assets/type-specimen.css @@ -0,0 +1,281 @@ +@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'); + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + -webkit-font-smoothing: antialiased; + -moz-font-smoothing: antialiased; + -o-font-smoothing: antialiased; + +} +a { + color: currentColor; +} + + + + +[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; +} + +[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; + } + .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="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.01rem; + 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; +} + diff --git a/maquette-tests/csspageweaver/manifest.json b/maquette-tests/csspageweaver/manifest.json index a31784b..6b9b816 100644 --- a/maquette-tests/csspageweaver/manifest.json +++ b/maquette-tests/csspageweaver/manifest.json @@ -8,24 +8,31 @@ "reloadInPlace", "fullPage", "inlineNotes", - "sidenotes"], + "followingNotes" + ], "pluginsParameters":{ "inlineNotes": { "input": ".footnote-ref", "containerNotes": "#footnotes", - "section": ".chapter" + "newClass": "inline-note" }, - "sidenotes": { + "followingNotes": { "selector": ".inline-note", "reset": ".chapter" } }, "css": [ - "assets/css/style.css" + "assets/css/01_var.css", + "assets/css/02_body.css", + "assets/css/03_layout.css", + "assets/css/chapter-header.css", + "assets/css/item-decor.css", + "assets/css/notes.css", + "assets/css/text.css" ], "hook": [ - "/js/items-decor.js" + ] } diff --git a/maquette-tests/csspageweaver/plugins/followingNotes/.gitignore b/maquette-tests/csspageweaver/plugins/followingNotes/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/followingNotes/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/maquette-tests/csspageweaver/plugins/followingNotes/config.json b/maquette-tests/csspageweaver/plugins/followingNotes/config.json new file mode 100644 index 0000000..bc66d35 --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/followingNotes/config.json @@ -0,0 +1,8 @@ +{ + "name": "FollowingNotes", + "description": "Create followingNotes with call & markers", + "author": ["Julie Blanc"], + "licence": "MIT", + "version": "1.0", + "hook": "followingNotes.js" +} diff --git a/maquette-tests/csspageweaver/plugins/followingNotes/followingNotes.js b/maquette-tests/csspageweaver/plugins/followingNotes/followingNotes.js new file mode 100644 index 0000000..15b4c17 --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/followingNotes/followingNotes.js @@ -0,0 +1,220 @@ +/** + * @name FollowingNotes + * @author Julie Blanc + * @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); + + } + + + } +} diff --git a/maquette-tests/csspageweaver/plugins/footnotesFix/.gitignore b/maquette-tests/csspageweaver/plugins/footnotesFix/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/footnotesFix/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/maquette-tests/csspageweaver/plugins/footnotesFix/README.md b/maquette-tests/csspageweaver/plugins/footnotesFix/README.md new file mode 100644 index 0000000..b6d9540 --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/footnotesFix/README.md @@ -0,0 +1,95 @@ +# Plugin to fix footnotes reset issue + +This plugin fix the issue of footnote reset. + +You can use the current method to declare footnotes: + +```CSS +@page { + @footnote { + float: bottom; + } + } + +.pagedjs_footnote { + float: footnote; +} +``` + +This style is also added to the default stylesheet `footnotes.css` of this plugin. You can delete it if you have already declared footnotes in your own stylesheet (don't forget to remove it from the `config.json` as well). + + +## How to use the plugin + +Add this folder to `csspageweaver/plugins/`. + +Call the plugin in `csspageweaver/manifest.json`: + +```json + "plugins": [ + "footnotesFix", + // other plugins ... + ], +``` + +## Configuration + +In `manifest.json`, you can modify/add some parameters: + +```json + "plugins":{ + "footnotesFix" + }, + "pluginsParameters":{ + "footnotesFix": { + "selector": ".footnote", + "reset": ".chapter" + } + }, +``` + +All the parameters are optional. + +- `selector` → CSS selector for the note element (must be inline in the HTML), by default is `.footnote` +- `reset` → CSS selector where you want reset note counter. If you want to reset on the page: `page` + + +## Notes in HTML + +In your HTML, the note must be a `` inserted in the text, like this: + +```HTML +Donec tincidunt, odio vel vestibulum sollicitudin, nibh dolor tempor sapien, ac laoreet +sem felis ut purus. Vestibulum neque ex, ullamcorper sit +amet diam sed, pharetra laoreet sem. Morbi cursus bibendum consectetur. Nullam vel +lacus congue nibh pulvinar maximus sit amet eu risus. Curabitur semper odio mauris, nec +imperdiet velit pharetra non. Aenean accumsan nulla ac ex iaculis interdum. +``` + +You can use the [inline_notes` plugin](https://gitlab.com/csspageweaver/plugins/inline_notes) to create these span elements from listed notes, which are more common in conversion tools like Pandoc. + +The inline_notes plugin should be called before the footnotes plugin in the `manifest.json`: + + +```json + "plugins": [ + "inline_notes", + "footnotes_fix", + // other plugins ... + ], +``` + +## Styling call & footer + +It's possible to change the styles of call notes and marker notes directly in your stylesheet like in the following code: + +```CSS +::footnote-call{ + font-weight: bold; +} + +::footnote-marker{ + font-weight: bold; +} +``` + diff --git a/maquette-tests/csspageweaver/plugins/footnotesFix/config.json b/maquette-tests/csspageweaver/plugins/footnotesFix/config.json new file mode 100644 index 0000000..b25395b --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/footnotesFix/config.json @@ -0,0 +1,9 @@ +{ + "name": "Footnotes", + "description": "Fix footnote reset", + "author": ["Julie Blanc"], + "licence": "MIT", + "version": "1.0", + "hook": "footnotes.js", + "stylesheet": "footnotes.css" +} \ No newline at end of file diff --git a/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.css b/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.css new file mode 100644 index 0000000..9052428 --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.css @@ -0,0 +1,9 @@ +@page { + @footnote { + float: bottom; + } + } + +.pagedjs_footnote { + float: footnote; +} \ No newline at end of file diff --git a/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.js b/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.js new file mode 100644 index 0000000..5d56992 --- /dev/null +++ b/maquette-tests/csspageweaver/plugins/footnotesFix/footnotes.js @@ -0,0 +1,84 @@ +/** + * @name Footnotes + * @file Reset the way footnote are counted + * @author Julie Blanc + * @see { @link https://gitlab.com/csspageweaver/plugins/footnotesFix/ } + */ + +import { Handler } from '/csspageweaver/lib/paged.esm.js'; + +export default class footnotes extends Handler { + + constructor(chunker, polisher, caller) { + super(chunker, polisher, caller); + this.parameters = cssPageWeaver.features.footnotesFix.parameters; + this.reset = this.parameters?.reset ; + this.counter = 0; + this.selector = this.parameters?.selector || ".footnote"; + } + + beforeParsed(content) { + + + let notes = content.querySelectorAll(this.selector); + notes.forEach(function (note, index) { + note.classList.add("pagedjs_footnote"); + }); + + + + if(this.reset){ + let elems = content.querySelectorAll(this.reset); + elems.forEach(function (elem, index) { + var span = document.createElement('span'); + span.classList.add("reset-fix-footnote"); + span.style.position = "absolute"; + elem.insertBefore(span, elem.firstChild); + }); + }else{ + console.log("[footnotesFix] no reset") + } + + } + + + afterPageLayout(pageElement, page, breakToken){ + + if(this.reset){ + + // reset on pages + if(this.reset === "page"){ + this.counter = 0; + } + + // reset on specific element + let newchapter = pageElement.querySelector('.reset-fix-footnote'); + if(newchapter){ + this.counter = 0; + } + + let footnotes = pageElement.querySelectorAll(".pagedjs_footnote_content [data-note]"); + + let callnotes = pageElement.querySelectorAll('a.pagedjs_footnote'); + callnotes.forEach((call, index) => { + + this.counter = this.counter + 1; // increment + let num = this.counter - 1; + + // update data-counter for call + call.setAttribute('data-counter-footnote-increment', num); + call.style.counterReset = "footnote " + num; + + // update data-counter for marker + let footnote = footnotes[index]; + let dataCounter = num + 1; + footnote.setAttribute('data-counter-note', dataCounter); + footnote.style.counterReset = "footnote-marker " + num; + + }); + } + } + + + +} \ No newline at end of file diff --git a/maquette-tests/csspageweaver/plugins/inlineNotes/inlineNotes.js b/maquette-tests/csspageweaver/plugins/inlineNotes/inlineNotes.js index 840ad98..a68bbe0 100644 --- a/maquette-tests/csspageweaver/plugins/inlineNotes/inlineNotes.js +++ b/maquette-tests/csspageweaver/plugins/inlineNotes/inlineNotes.js @@ -11,7 +11,6 @@ export default class inlineNotes extends Handler { constructor(chunker, polisher, caller) { super(chunker, polisher, caller); - this.section = cssPageWeaver.features.inlineNotes.parameters?.section || false, this.input = cssPageWeaver.features.inlineNotes.parameters?.input || ".footnote-ref"; // ← CSS selector of the call element this.containerNotes = cssPageWeaver.features.inlineNotes.parameters?.containerNotes || "#footnotes"; // ← CSS selector of the container of the footnote this.newClass = cssPageWeaver.features.inlineNotes.parameters?.newClass || "inline-note"; // ← Class of the span create for the note @@ -22,7 +21,6 @@ export default class inlineNotes extends Handler { inlineNotesHandler({ content: content, input: this.input, - section: this.section, containerNotes: this.containerNotes, type: this.newClass }); @@ -37,25 +35,13 @@ function inlineNotesHandler(params){ let content = params.content; let input = params.input; let type = params.type; - let section = params.section; - let containerNotes = params.containerNotes; + + createNotes(content, input, type); - if (section) { - let sections = content.querySelectorAll(section); - sections.forEach(sectionEl => { - createNotes(sectionEl, input, type); - let noteContainer = sectionEl.querySelector(containerNotes); - if (noteContainer) { - noteContainer.remove(); - } - }); - } else { - createNotes(content, input, type); - let noteContainer = content.querySelector(containerNotes); - if (noteContainer) { + let noteContainer = content.querySelector(params.containerNotes); + if(noteContainer){ noteContainer.remove(); - } - } + } } diff --git a/maquette-tests/csspageweaver/plugins/sidenotes/sidenotes.js b/maquette-tests/csspageweaver/plugins/sidenotes/sidenotes.js index 2063589..675012e 100644 --- a/maquette-tests/csspageweaver/plugins/sidenotes/sidenotes.js +++ b/maquette-tests/csspageweaver/plugins/sidenotes/sidenotes.js @@ -33,6 +33,27 @@ export default class sidenotes extends Handler { // note.style.left = "0px"; // }); + let notes = content.querySelectorAll(this.notesClass); + notes.forEach(function (note, index) { + note.style.position = "absolute"; + note.style.top = "0px"; + note.style.left = "0px"; + }); + + + } + + afterPageLayout(pageElement, page, breakToken) { + let pageBox = pageElement.querySelector(".pagedjs_pagebox"); + var div = document.createElement('div'); + div.classList.add("note-container") + pageBox.appendChild(div) + let notes = pageElement.querySelectorAll(this.notesClass); + notes.forEach(function (note, index) { + // console.log(note); + div.appendChild(note); + note.style.position = "relative"; + }); } diff --git a/maquette-tests/index.html b/maquette-tests/index.html index 84c5d74..f1671bc 100644 --- a/maquette-tests/index.html +++ b/maquette-tests/index.html @@ -5,14 +5,28 @@ - CSS Page Weaver Example + D6cor - - + + + + + + + + + + + + + - + + + + @@ -24,16 +38,47 @@ + +
+
    + + +
+
+ + + +
+
+
    +
  • D6cor
  • +
  • Essais
  • +
  • Portfolio
  • +
  • Entretiens
  • +
+
+ +
+
    + + +
+
- -

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

-

Essai

-

Olivain Porry

-

Olivain Porry est artiste, docteur en recherche-création (SACRe) du laboratoire EnsadLab +

Essai

+
+

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

+

Olivain Porry

+
+ +
+

Olivain Porry

+

est artiste, docteur en recherche-création (SACRe) du laboratoire EnsadLab (université PSL) et diplômé d'un DNSEP de l'École des Beaux-Arts de Nantes. Son travail plastique se concentre sur l'émergence, dans une expérience esthétique, de modalités relationnelles entre public, dispositif artistique et environnement.

+

Entouré d’un cadre noir et brillant, posé sur une surface blanche et @@ -135,7 +180,7 @@ avec eux et entretenir ces interactions. Sur des plateformes comme Medium et Quora, la quantité de contenus générés par des algorithmes d’intelligence artificielle a augmenté de manière significative ces - dernières années pour atteindre jusqu’à 40 % de ce qui y est posté6. Un pourcentage qui serait équivalent à celui des productions générées par IA sur l’ensemble du réseau internet7.

@@ -251,6 +296,7 @@ stratégie d’attaque au nom évocateur : la poésie antagoniste18.

Pour une poésie antagoniste

+

Dans un article publié en 2023, des chercheurs ont démontré qu’ils étaient parvenus à faire apparaître des données d’entraînement brutes utilisées par OpenAI en instruisant ChatGPT de répéter un même mot à @@ -304,6 +350,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.

+

Toujours pas peur

Pris dans des boucles de production automatisées et soumis à des logiques d’optimisation, de standardisation et de rendement, le langage @@ -507,11 +554,29 @@

+
+
    + + +
+
+ +
+
    +
  • D6cor
  • +
  • Essais
  • +
  • Portfolio
  • +
  • Entretiens
  • +
+
-

E l’aria diventa più respirabile per tutti: Une télévision pirate pour le quartier

Essai

-

Outdoor computer club

+
+ +

E l’aria diventa più respirabile per tutti: une télévision pirate pour le quartier

+

Outdoor computer club

+

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.

@@ -656,7 +721,6 @@ favorise les échanges de savoirs, les rencontres intergénérationnelles et la circulation des luttes entre différents secteurs sociaux.

-

Pour le gouvernement Chávez, soutenir les télévisions communales permet de s’appuyer sur des acteurs disposant d’une légitimité populaire forte, souvent supérieure à celle de la télévision d’État. Plutôt que @@ -688,7 +752,6 @@

C'est en riposte à ce monopole qu'un groupe d'activistes décide en 2002 de créer un réseau national de télévision pirate. 

-

A cette époque, la télévision numérique n'est pas encore démocratisée et la télévision satellite peu accessible, la plupart des foyers italiens reçoivent l'image sur leur poste via des ondes émises par des @@ -696,7 +759,6 @@ des collines fassent obstacle à la diffusion du signal d'une chaîne de télévision et créent des zones grises où cette chaîne n'est pas recevable. On appelle ça un cône d'ombre.

-

C'est le cas à Bologne, au croisement de la via Rialto et de la via Orfeo, où l'équipe de OrfeoTV installe son studio de télévision au milieu d'un espace électromagnétique vacant : un cône d'ombre de la @@ -916,34 +978,8 @@

« What is Mini FM? » Consulté le 12 janvier 2026. http://anarchy.k2.tku.ac.jp/radio/micro/what_is_minifm/index.html.

-

Images :

-


- Les images sont dans le dossier parent de ce document
- Il s’agit d’images issues de notre expérience de construction d’une - télévision pirate, elle n’ont pas de place particulière dans le récit - donc peuvent être disposées n’importe ou
-
-
les legendes de ces images :

-

Image de l’antenne : Antenne et émetteur sur un pylône en bois, - installé au dernier étage du bâtiment Voix Machine, à Fontenay S/ Bois. - 2025

-

Image du spectateur : Réception de la première emission de OTVC.

-

Les deux autres images ne sont pas essentielles, elle peuvent être - ajoutées selon les besoins du ou de la graphiste.
-
- Zoom de l’antenne : Antenne « Loop », construite pour emettre sur la - fréquance 471.25 Mhz, la chaine 21. -

-

Zoom de l’emetteur : Emetteur constitué d’un modulateur et d’un - amplificateur achetés sur leboncoin.fr. Cables rca et coaxiaux.

-

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.

+
-
  1. Emanuelli, Massimo. « Orfeo Tv ». 2019

    @@ -979,14 +1015,35 @@
    -
    -

    Code créatif

    -

    Jean-Noël Lafargue

    -

    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.

    +
    +
      + + +
    +
    +
      +
    • D6cor
    • +
    • Essais
    • +
    • Portfolio
    • +
    • Entretiens
    • +
    +
    + +
    +

    Essai

    +
    + +

    Code créatif

    +

    Jean-Noël Lafargue

    +
    + +
    + + + +

    On peut distinguer deux types d’enseignements des pratiques numériques dans le cadre des départements d’art ou de design en école d’art ou à l’université.

    diff --git a/maquette-tests/js/items-decor.js b/maquette-tests/js/items-decor.js index 2f397fc..706c6ea 100644 --- a/maquette-tests/js/items-decor.js +++ b/maquette-tests/js/items-decor.js @@ -8,7 +8,6 @@ export default class myCustomHandler2 extends Handler { afterPageLayout(pageElement, page, breakToken) { - console.log(pageElement); let pageArea = pageElement.querySelector(".pagedjs_area"); let pageAreaTop = pageArea.getBoundingClientRect().top; let items = pageElement.querySelectorAll("p, h3, h4, .inline-note"); diff --git a/maquette-tests/type.html b/maquette-tests/type.html index 56f82bd..2f37cfe 100644 --- a/maquette-tests/type.html +++ b/maquette-tests/type.html @@ -4,11 +4,11 @@ Document - + - + @@ -23,13 +23,289 @@ + + + + + +
    +

    'Adelphe Trouble Germinal'

    +
    +

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

    +

    Une télévision pirate pour le quartier

    +

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

    +

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

    + +
    + +
    +

    + 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 + Telestreet. 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 + Telestreet, 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, InsuTV diffuse des documentaires et des + reportages à propos des dynamiques sociales sur place. Dans la ville + balnéaire de Senigallia, le programme de DiscoVolante TV est + construit par un groupe de personnes handicapées et traite des questions + locales à travers leur prisme tandis qu'à Florence Gli Anelli + MancantiTV diffuse dans la zone de la Piazza Santa Maria et + informe sur les politiques migratoires et les conditions de vie des sans + papiers.  +

    + +

    + Au fil des années, la précarité financière et légale des + Telestreets 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 + Primitivi à Marseille ou ZinTV à Bruxelles.  +

    +
    +
    + + +
    + +

    Garabosse Perle

    +
    +

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

    +

    Une télévision pirate pour le quartier

    +

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

    +

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

    + +
    + +
    +

    + 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 + Telestreet. 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 + Telestreet, 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, InsuTV diffuse des documentaires et des + reportages à propos des dynamiques sociales sur place. Dans la ville + balnéaire de Senigallia, le programme de DiscoVolante TV est + construit par un groupe de personnes handicapées et traite des questions + locales à travers leur prisme tandis qu'à Florence Gli Anelli + MancantiTV diffuse dans la zone de la Piazza Santa Maria et + informe sur les politiques migratoires et les conditions de vie des sans + papiers.  +

    + +

    + Au fil des années, la précarité financière et légale des + Telestreets 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 + Primitivi à Marseille ou ZinTV à Bruxelles.  +

    +
    +
    + + +
    + +

    Velvetyne

    +
    +

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

    +

    Une télévision pirate pour le quartier

    +

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

    +

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

    + +
    + +
    +

    + 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 + Telestreet. 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 + Telestreet, 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, InsuTV diffuse des documentaires et des + reportages à propos des dynamiques sociales sur place. Dans la ville + balnéaire de Senigallia, le programme de DiscoVolante TV est + construit par un groupe de personnes handicapées et traite des questions + locales à travers leur prisme tandis qu'à Florence Gli Anelli + MancantiTV diffuse dans la zone de la Piazza Santa Maria et + informe sur les politiques migratoires et les conditions de vie des sans + papiers.  +

    + +

    + Au fil des années, la précarité financière et légale des + Telestreets 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 + Primitivi à Marseille ou ZinTV à Bruxelles.  +

    +
    +
    + +
    + +

    Bilzig

    +
    +

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

    +

    Une télévision pirate pour le quartier

    +

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

    +

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

    + +
    + +
    +

    + 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 + Telestreet. 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 + Telestreet, 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, InsuTV diffuse des documentaires et des + reportages à propos des dynamiques sociales sur place. Dans la ville + balnéaire de Senigallia, le programme de DiscoVolante TV est + construit par un groupe de personnes handicapées et traite des questions + locales à travers leur prisme tandis qu'à Florence Gli Anelli + MancantiTV diffuse dans la zone de la Piazza Santa Maria et + informe sur les politiques migratoires et les conditions de vie des sans + papiers.  +

    + +

    + Au fil des années, la précarité financière et légale des + Telestreets 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 + Primitivi à Marseille ou ZinTV à Bruxelles.  +

    +
    +
    + + +
    + +

    Wagram Slab (super variable)

    +
    +

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

    +

    Une télévision pirate pour le quartier

    +

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

    +
    + +
    +

    + 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 + Telestreet. 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 + Telestreet, 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, InsuTV diffuse des documentaires et des + reportages à propos des dynamiques sociales sur place. Dans la ville + balnéaire de Senigallia, le programme de DiscoVolante TV est + construit par un groupe de personnes handicapées et traite des questions + locales à travers leur prisme tandis qu'à Florence Gli Anelli + MancantiTV diffuse dans la zone de la Piazza Santa Maria et + informe sur les politiques migratoires et les conditions de vie des sans + papiers.  +

    + +

    + Au fil des années, la précarité financière et légale des + Telestreets 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 + Primitivi à Marseille ou ZinTV à Bruxelles.  +

    +
    +
    + + +
    + +

    Baskemo Sans

    +
    +

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

    +

    Une télévision pirate pour le quartier

    +

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

    +

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

    + +
    + +
    +

    + 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 + Telestreet. 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 + Telestreet, 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, InsuTV diffuse des documentaires et des + reportages à propos des dynamiques sociales sur place. Dans la ville + balnéaire de Senigallia, le programme de DiscoVolante TV est + construit par un groupe de personnes handicapées et traite des questions + locales à travers leur prisme tandis qu'à Florence Gli Anelli + MancantiTV diffuse dans la zone de la Piazza Santa Maria et + informe sur les politiques migratoires et les conditions de vie des sans + papiers.  +

    + +

    + Au fil des années, la précarité financière et légale des + Telestreets 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 + Primitivi à Marseille ou ZinTV à Bruxelles.  +

    +
    +
    +

    ITC Cheltenham

    @@ -255,48 +531,7 @@
    -
    -

    Wagram Slab (super variable)

    -
    -

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

    -

    Une télévision pirate pour le quartier

    -

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

    -
    - -
    -

    - 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 - Telestreet. 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 - Telestreet, 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, InsuTV diffuse des documentaires et des - reportages à propos des dynamiques sociales sur place. Dans la ville - balnéaire de Senigallia, le programme de DiscoVolante TV est - construit par un groupe de personnes handicapées et traite des questions - locales à travers leur prisme tandis qu'à Florence Gli Anelli - MancantiTV diffuse dans la zone de la Piazza Santa Maria et - informe sur les politiques migratoires et les conditions de vie des sans - papiers.  -

    - -

    - Au fil des années, la précarité financière et légale des - Telestreets 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 - Primitivi à Marseille ou ZinTV à Bruxelles.  -

    -
    -
    diff --git a/pdf-print/WagramSlab_11-5:16.pdf b/pdf-print/WagramSlab_11-5:16.pdf deleted file mode 100644 index 3d0c3cd..0000000 Binary files a/pdf-print/WagramSlab_11-5:16.pdf and /dev/null differ diff --git a/pdf-print/WagramSlab_11:18.pdf b/pdf-print/WagramSlab_11:18.pdf deleted file mode 100644 index 9f5b3e2..0000000 Binary files a/pdf-print/WagramSlab_11:18.pdf and /dev/null differ diff --git a/pdf-print/WagramSlab_12:17.pdf b/pdf-print/WagramSlab_12:17.pdf deleted file mode 100644 index 7f3bb91..0000000 Binary files a/pdf-print/WagramSlab_12:17.pdf and /dev/null differ