From 8a33fa6ef08286678ed3971409c32d7d112f2ea2 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Mon, 16 Mar 2026 23:54:56 +0100 Subject: [PATCH] better running --- maquette-tests/assets/css/03_layout.css | 32 ++++++++++++---------- maquette-tests/assets/css/running-page.css | 18 +++++++----- maquette-tests/assets/css/subtitles.css | 10 +++---- maquette-tests/assets/css/text.css | 5 ++-- maquette-tests/js/decor-num-pages.js | 2 +- 5 files changed, 37 insertions(+), 30 deletions(-) diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index a11585d..b629265 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -3,12 +3,13 @@ @page { size: 165mm 240mm; margin-top: 22mm; - margin-bottom: 24mm; + margin-bottom: 18mm; bleed: 6mm; marks: crop; --symbol-top: 1px; --running-top: 8mm; - --running-bottom: 10mm; + --running-bottom: 6mm; + --running-left: var(--running-left); } @page:left { @@ -25,7 +26,7 @@ vertical-align: top; padding-top: var(--running-top); text-align: left; - padding-left: 19px; + padding-left: var(--running-left); } @@ -48,8 +49,6 @@ padding-top: calc(var(--running-top) - var(--symbol-top)); text-align: left; white-space: nowrap; - padding-right: 1.5ch; - padding-left: 0.5ch; font-size: var(--font-size); color: var(--sign-color); font-family: var(--sign-family); @@ -68,19 +67,21 @@ padding-top: var(--running-top); width: 100%; white-space: nowrap; + text-align: left; + padding-left: 5px; } - +/* @bottom-left { content: counter(page); - vertical-align: top; - padding-top: var(--running-bottom); + vertical-align: bottom; + padding-bottom: var(--running-bottom); white-space: nowrap; font-size: var(--font-size); color: var(--sign-color); z-index: 100; - } + } */ @@ -103,7 +104,7 @@ vertical-align: top; padding-top: var(--running-top); text-align: left; - padding-left: 19px; + padding-left: var(--running-left); } @@ -132,17 +133,17 @@ } - @bottom-right { + /* @bottom-right { content: counter(page); - vertical-align: top; - padding-top: var(--running-bottom); + vertical-align: bottom; + padding-bottom: var(--running-bottom); text-align: right; white-space: nowrap; font-size: var(--font-size); color: var(--sign-color); z-index: 100; - } + } */ @@ -207,10 +208,11 @@ letter-spacing: var(--sign-spacing); font-family: var(--sign-family); line-height: var(--sign-baseline); - padding-left: 1ch; + /* padding-left: 1ch; */ width: calc(var(--unit) + var(--sub-unit)); position: relative; top: var(--symbol-top); + padding-left: 11px; } .pagedjs_left_page .pagedjs_margin-top { diff --git a/maquette-tests/assets/css/running-page.css b/maquette-tests/assets/css/running-page.css index bfaa27b..5c4ac02 100644 --- a/maquette-tests/assets/css/running-page.css +++ b/maquette-tests/assets/css/running-page.css @@ -5,14 +5,15 @@ letter-spacing: var(--sign-spacing); font-family: var(--sign-family); line-height: var(--sign-baseline); - vertical-align: top; - padding-top: var(--running-bottom); + vertical-align: bottom; + padding-bottom: var(--running-bottom); width: 100%; position: absolute; - left: calc(var(--pagedjs-margin-top)*-1 + 0px); - left: calc(var(--pagedjs-margin-left)*-1); + left: 0px; + + bottom: 0px; width: var( --w-container); overflow: hidden; /* background-color: red; */ @@ -22,19 +23,22 @@ .running-page{ width: calc(var(--w-container)*2); - padding-left: 11px; + padding-left: 19px; padding-right: 6px; display: flex; } .running-page .symbols{ flex-shrink: 0; + /* background-color: white; */ + z-index: 20; } .running-page .dots{ - position: relative; + position: absolute; top: -5px; - left: -5px; + left: 19px; + z-index: 10; } .pagedjs_right_page .running-page_container .running-page{ diff --git a/maquette-tests/assets/css/subtitles.css b/maquette-tests/assets/css/subtitles.css index 3365c83..f519d94 100644 --- a/maquette-tests/assets/css/subtitles.css +++ b/maquette-tests/assets/css/subtitles.css @@ -58,7 +58,7 @@ h3, h4{ /* LEFT PAGE */ .decor-h3_small{ - left: -13.5mm; + left: -49px; top: calc(var(--baseline)*-2.5 + 9px); } @@ -66,7 +66,7 @@ h3, h4{ .decor-h3_big{ - right: -92px; + right: -81px; text-align: right; top: calc(var(--baseline) * -3.5 - 9px); } @@ -80,7 +80,7 @@ h3, h4{ .pagedjs_right_page .decor-h3_small{ left: auto; - right: -62px; + right: -53px; top: calc(var(--baseline)*-2.5 + 9px); text-align: right; } @@ -90,9 +90,9 @@ h3, h4{ .pagedjs_right_page .decor-h3_big{ right: 0; - left: -87px; + left: -80px; text-align: left; - top: calc(var(--baseline) * -3.5 - 9px); + top: calc(var(--baseline) * -3.5 - 9px); } diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css index 9f5f62c..faa369d 100644 --- a/maquette-tests/assets/css/text.css +++ b/maquette-tests/assets/css/text.css @@ -11,7 +11,7 @@ p::before { - content: "..........."; + content: "........."; font-size: var(--sign-size); color: var(--sign-color); letter-spacing: var(--sign-spacing); @@ -19,8 +19,9 @@ p::before { line-height: 0px; position: relative; top: -3px; - padding-left: 2px; + padding-left: 0px; padding-right: 0px; + margin-right: -4px; } .following-title::before, diff --git a/maquette-tests/js/decor-num-pages.js b/maquette-tests/js/decor-num-pages.js index 380cbd9..d097f50 100644 --- a/maquette-tests/js/decor-num-pages.js +++ b/maquette-tests/js/decor-num-pages.js @@ -35,7 +35,7 @@ export default class itemsDecor extends Handler { runningPage.appendChild(symbols); runningPage.appendChild(dots); container.appendChild(runningPage); - area.appendChild(container); + area.after(container); symbols.textContent = this.symbol; const baseHeight = symbols.offsetHeight;