diff --git a/maquette-tests/assets/css/01_var.css b/maquette-tests/assets/css/01_var.css index 34eb92c..33b752c 100644 --- a/maquette-tests/assets/css/01_var.css +++ b/maquette-tests/assets/css/01_var.css @@ -1,6 +1,6 @@ :root{ - --symbol: "="; + --symbol: "+"; --unit: 70px; --sub-unit: 17.5px; @@ -71,7 +71,7 @@ --sign-spacing: 0.45rem; --sign-spacing: 7.2px; --sign-color: var(--red); - --sign-color: black; + /* --sign-color: black; */ diff --git a/maquette-tests/assets/css/02_body.css b/maquette-tests/assets/css/02_body.css index 020085c..406f213 100644 --- a/maquette-tests/assets/css/02_body.css +++ b/maquette-tests/assets/css/02_body.css @@ -20,4 +20,16 @@ body { font-size: var(--font-size); line-height: var(--baseline); -} \ No newline at end of file +} + + + +.pagedjs_left_page .pagedjs_sheet{ + --grid-position-x: 21px!important; +} + +.pagedjs_right_page .pagedjs_sheet{ + --grid-position-x: 16px!important; +} + + diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index 2d53b43..b849b6b 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -2,102 +2,118 @@ @page { size: 165mm 240mm; - margin-top: 25mm; + margin-top: 22mm; margin-bottom: 14mm; bleed: 6mm; marks: crop; --symbol-top: 1px; + --running-top: 8mm; } @page:left { margin-left: 18mm; margin-right: 26mm; - @top-left { - content: element(decor); - vertical-align: top; - padding-top: calc(8mm - var(--symbol-top)); - width: calc(var(--unit)*2); - font-size: var(--fs-subtitle); - color: var(--sign-color); - } - - @top-center{ - content: element(author); - vertical-align: top; - padding-top: calc(8mm - var(--symbol-top)); - text-align: left; - white-space: nowrap; - padding-right: 1.5ch; - padding-left: 0.5ch; - font-size: var(--fs-subtitle); - color: var(--sign-color); - - } - - - @top-right { - content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; - font-size: var(--sign-size); - color: var(--sign-color); - letter-spacing: var(--sign-spacing); - line-height: var(--sign-baseline); - vertical-align: top; - padding-top: 8mm; - width: 100%; - - } - - - @top-left-corner { content: var(--symbol) var(--symbol) var(--symbol); font-size: var(--sign-size); color: var(--sign-color); letter-spacing: var(--sign-spacing); line-height: var(--sign-baseline); - - vertical-align: top; - padding-top: 8mm; + padding-top: var(--running-top); text-align: left; margin-left: 3mm; } + @top-left { + content: element(decor); + vertical-align: top; + padding-top: calc(var(--running-top) - var(--symbol-top)); + width: calc(var(--unit)*2); + font-size: var(--font-size); + color: var(--sign-color); + } + + + + @top-center{ + content: element(author); + vertical-align: top; + 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); + + } + + + @top-right { + content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; + font-size: var(--sign-size); + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + line-height: var(--sign-baseline); + vertical-align: top; + padding-top: var(--running-top); + width: 100%; + white-space: nowrap; + + } + + + + + + } @page:right { margin-left: 26mm; margin-right: 18mm; - @top-left { - content: element(type); - width: 0px; + @top-left-corner { + content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol); + font-size: var(--sign-size); + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + line-height: var(--sign-baseline); vertical-align: top; - padding-top: 8mm; + padding-top: var(--running-top); + text-align: left; + margin-left: 3mm; + + } + + @top-left { + content: element(title); + vertical-align: top; + padding-top: var(--running-top); + white-space: nowrap; + padding-right: 1.5ch; + font-size: var(--font-size); + color: var(--sign-color); } @top-right { - content: element(title); + content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; + font-size: var(--sign-size); + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + line-height: var(--sign-baseline); vertical-align: top; - padding-top: calc(8mm + 20px); - /* padding-right: 11mm; */ - text-align: left; - position: relative; - left: -11mm; + padding-top: var(--running-top); width: 100%; + white-space: nowrap; } @top-right-corner { - content: counter(page); - width: 40px; - position: relative; - left: -40px; - text-align: right; - vertical-align: top; - padding-top: 8mm; + } } @@ -159,7 +175,7 @@ .pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{ - content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; + content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; font-size: var(--sign-size); color: var(--sign-color); letter-spacing: var(--sign-spacing); @@ -170,12 +186,22 @@ top: var(--symbol-top); } + .pagedjs_left_page .pagedjs_margin-top{ + width: calc(100% + var(--pagedjs-margin-right)); + overflow: hidden; + } /* DELETE BEFORE PRINT */ -.pagedjs_margin-top-right-corner-holder{ +/* .pagedjs_margin-top-right-corner-holder{ background-color: white; width: 40px; position: absolute; right: -41px; -} \ No newline at end of file +} */ + + + +/* DELETE BEFORE PRINT */ + + diff --git a/maquette-tests/assets/css/subtitles.css b/maquette-tests/assets/css/subtitles.css index 430732b..5363a94 100644 --- a/maquette-tests/assets/css/subtitles.css +++ b/maquette-tests/assets/css/subtitles.css @@ -6,10 +6,15 @@ h3, h4{ margin-top: calc(var(--baseline)*1); margin-bottom: calc(var(--baseline)*1); position: relative; - font-size: var(--fs-subtitle); + font-size: var(--font-size); color: var(--sign-color); } +.h3_container, +.h4_container{ + position: relative; + +} .h3-before, .h3-after{ @@ -50,24 +55,53 @@ h3, h4{ +/* LEFT PAGE */ + .decor-h3_small{ left: -13.5mm; - padding-top: 9px; + top: calc(var(--baseline)*-2.5 + 9px); } - .decor-h3_small div{ - position: relative; - top: calc(var(--baseline)*-1.5); -} + .decor-h3_big{ - right: -93px; + right: -92px; text-align: right; + top: calc(var(--baseline) * -3.5 - 9px); } - .decor-h3_big div{ - position: relative; - top: calc(var(--baseline) * -2.5 - 9px); -} \ No newline at end of file + + + +/* RIGHT PAGE */ + + +.pagedjs_right_page .decor-h3_small{ + left: auto; + right: -62px; + top: calc(var(--baseline)*-2.5 + 9px); + text-align: right; +} + + + + +.pagedjs_right_page .decor-h3_big{ + right: 0; + left: -87px; + text-align: left; + top: calc(var(--baseline) * -3.5 - 9px); +} + + + +.pagedjs_right_page .chapter > .h3_container h3 { + margin-top: 0px; +} + + +.pagedjs_right_page .chapter > .h3_container .decor-h3_big [data-count="2"]{ + color: transparent +} diff --git a/maquette-tests/csspageweaver/manifest.json b/maquette-tests/csspageweaver/manifest.json index 8636b8d..d9ec262 100644 --- a/maquette-tests/csspageweaver/manifest.json +++ b/maquette-tests/csspageweaver/manifest.json @@ -33,7 +33,7 @@ "assets/css/subtitles.css" ], "hook": [ - "/js/items-decor.js" + "/js/decor-subtitles.js" ] } diff --git a/maquette-tests/js/items-decor.js b/maquette-tests/js/decor-subtitles.js similarity index 77% rename from maquette-tests/js/items-decor.js rename to maquette-tests/js/decor-subtitles.js index a3f9c22..bfc77ed 100644 --- a/maquette-tests/js/items-decor.js +++ b/maquette-tests/js/decor-subtitles.js @@ -4,14 +4,17 @@ import { Handler } from '/csspageweaver/lib/paged.esm.js'; export default class itemsDecor extends Handler { constructor(chunker, polisher, caller) { super(chunker, polisher, caller); - this.symbol = "="; + this.symbol = "+"; } + + createDecor(symbol, sizes, sizeClass) { const div = document.createElement("div"); div.className = `decor-h3 ${sizeClass}`; - sizes.forEach(n => { + sizes.forEach((n, i) => { const line = document.createElement("div"); + line.dataset.count = i + 1; line.textContent = symbol.repeat(n); div.appendChild(line); }); @@ -89,25 +92,46 @@ export default class itemsDecor extends Handler { firstDecor = this.createDecor(symbol, bigSizes, "decor-h3_big"); secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small"); } - subtitle.parentNode.insertBefore(firstDecor, subtitle); - subtitle.parentNode.insertBefore(secondDecor, subtitle); + const container = document.createElement("div"); + container.className = "h3_container"; + subtitle.parentNode.insertBefore(container, subtitle); + container.appendChild(firstDecor); + container.appendChild(secondDecor); + container.appendChild(subtitle); } } + + + beforeParsed(content){ + content.querySelectorAll("h3").forEach(subtitle => { + const next = subtitle.nextElementSibling; + if (next) next.classList.add("following-h3"); + }); + content.querySelectorAll("h4").forEach(subtitle => { + const next = subtitle.nextElementSibling; + if (next) next.classList.add("following-h4"); + }); + } + + + afterPageLayout(pageElement, page, breakToken) { const symbol = this.symbol; const isLeft = pageElement.classList.contains("pagedjs_left_page"); pageElement.querySelectorAll("h3").forEach(subtitle => { this.processTitle(subtitle, symbol, true, isLeft); - const next = subtitle.nextElementSibling; - if (next) next.classList.add("following-h3"); }); pageElement.querySelectorAll("h4").forEach(subtitle => { this.processTitle(subtitle, symbol, false, isLeft); - const next = subtitle.nextElementSibling; - if (next) next.classList.add("following-h4"); + const container = document.createElement("div"); + container.className = "h4_container"; + subtitle.parentNode.insertBefore(container, subtitle); + container.appendChild(subtitle); }); } + + }