add symbol nav left page
This commit is contained in:
Julie Blanc
parent
15aaf441cd
commit
512d62e5df
6 changed files with 139 additions and 79 deletions
|
|
@ -1,5 +1,12 @@
|
|||
:root{
|
||||
|
||||
--symbol: "=";
|
||||
--unit: 70px;
|
||||
--sub-unit: 17.5px;
|
||||
|
||||
|
||||
|
||||
|
||||
--font: 'Routed Gothic', sans-serif;
|
||||
--font: 'Wagram Slab', serif;
|
||||
--font: 'Bilzig', serif;
|
||||
|
|
@ -52,16 +59,17 @@
|
|||
--baseline: 18px;
|
||||
|
||||
--fs-nav: 11px;
|
||||
--fs-subtitle: 11px;
|
||||
--fs-subtitle: 16px;
|
||||
--fs-notes: 11px;
|
||||
|
||||
--unit: 20px;
|
||||
|
||||
--gap: 8px;
|
||||
|
||||
|
||||
--sign-size: 16px;
|
||||
--sign-baseline: 18px;
|
||||
--sign-spacing: 0.4rem;
|
||||
--sign-baseline: 18px;
|
||||
--sign-spacing: 0.45rem;
|
||||
--sign-spacing: 7.2px;
|
||||
--sign-color: var(--red);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
margin-bottom: 14mm;
|
||||
bleed: 6mm;
|
||||
marks: crop;
|
||||
|
||||
|
||||
|
||||
--symbol-top: 1px;
|
||||
}
|
||||
|
||||
@page:left {
|
||||
|
|
@ -17,29 +15,51 @@
|
|||
|
||||
@top-left {
|
||||
content: element(decor);
|
||||
width: 0px;
|
||||
vertical-align: top;
|
||||
padding-top: 8mm;
|
||||
padding-top: calc(8mm - var(--symbol-top));
|
||||
width: calc(var(--unit)*2);
|
||||
font-size: var(--fs-subtitle);
|
||||
}
|
||||
|
||||
@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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
@top-right {
|
||||
content: element(author);
|
||||
vertical-align: top;
|
||||
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%;
|
||||
padding-top: 8mm;
|
||||
text-align: right;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@top-left-corner {
|
||||
content: counter(page);
|
||||
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;
|
||||
text-align: left;
|
||||
margin-left: 11mm;
|
||||
margin-left: 3mm;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -133,4 +153,27 @@
|
|||
|
||||
.nav-decor {
|
||||
position: running(decor);
|
||||
}
|
||||
|
||||
|
||||
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{
|
||||
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);
|
||||
padding-left: 1ch;
|
||||
width: calc(var(--unit) + var(--sub-unit));
|
||||
position: relative;
|
||||
top: var(--symbol-top);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* DELETE BEFORE PRINT */
|
||||
.pagedjs_margin-top-right-corner-holder{
|
||||
background-color: white;
|
||||
width: 40px;
|
||||
position: absolute;
|
||||
right: -41px;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.container-following-note {
|
||||
margin-left: 30%;
|
||||
margin-left: calc(var(--unit)*2);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,22 +3,20 @@ h3, h4{
|
|||
}
|
||||
h3, h4{
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--baseline)*0.5);
|
||||
margin-bottom: calc(var(--baseline)*0.5);
|
||||
font-size: var(--font-size);
|
||||
margin-top: calc(var(--baseline)*1);
|
||||
margin-bottom: calc(var(--baseline)*1);
|
||||
position: relative;
|
||||
font-size: var(--sign-size);
|
||||
font-size: var(--fs-subtitle);
|
||||
color: var(--sign-color);
|
||||
}
|
||||
|
||||
|
||||
.h3-before,
|
||||
.h3-after{
|
||||
|
||||
letter-spacing:var(--sign-spacing);
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
line-height: var(--sign-baseline);
|
||||
color: var(--sign-color);
|
||||
line-height: var(--sign-baseline);
|
||||
}
|
||||
|
||||
.h3-line {
|
||||
|
|
@ -32,10 +30,12 @@ h3, h4{
|
|||
|
||||
.h3-after{
|
||||
padding-left: 0.75ch;
|
||||
position: relative;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.h3-text{
|
||||
background-color: yellow;
|
||||
/* background-color: yellow; */
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +51,8 @@ h3, h4{
|
|||
|
||||
|
||||
.decor-h3_small{
|
||||
left: -16mm;
|
||||
left: -13.5mm;
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -61,12 +62,12 @@ h3, h4{
|
|||
}
|
||||
|
||||
.decor-h3_big{
|
||||
right: -22mm;
|
||||
right: -93px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
.decor-h3_big div{
|
||||
position: relative;
|
||||
top: calc(var(--baseline)*-5);
|
||||
top: calc(var(--baseline) * -3 - 9px);
|
||||
}
|
||||
|
|
@ -12,16 +12,9 @@
|
|||
|
||||
|
||||
|
||||
.container-following-note + p,
|
||||
p + p{
|
||||
/* text-indent: 30%; */
|
||||
position: relative;
|
||||
/* text-indent: -6ch; */
|
||||
|
||||
}
|
||||
|
||||
p::before{
|
||||
content: ".............";
|
||||
content: "............";
|
||||
font-size: var(--sign-size);
|
||||
color: var(--sign-color);
|
||||
letter-spacing: var(--sign-spacing);
|
||||
|
|
@ -32,13 +25,13 @@ p::before{
|
|||
left: 0; */
|
||||
}
|
||||
|
||||
|
||||
|
||||
h4{
|
||||
border: var(--border-grey);
|
||||
background: none;
|
||||
.following-h3::before{
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
blockquote p{
|
||||
/* font-family: var(--mono); */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,49 +40,47 @@ export default class itemsDecor extends Handler {
|
|||
return line;
|
||||
}
|
||||
|
||||
afterPageLayout(pageElement, page, breakToken) {
|
||||
const symbol = this.symbol;
|
||||
const isLeft = pageElement.classList.contains("pagedjs_left_page");
|
||||
const smallSizes = [1, 2, 3, 2, 1];
|
||||
const bigSizes = [1, 2, 3, 4, 3, 2, 1];
|
||||
processTitle(subtitle, symbol, withDecor, isLeft) {
|
||||
if (subtitle.querySelector(".h3-line")) return;
|
||||
|
||||
pageElement.querySelectorAll("h3").forEach(subtitle => {
|
||||
if (subtitle.querySelector(".h3-line")) return;
|
||||
const children = Array.from(subtitle.childNodes);
|
||||
|
||||
const children = Array.from(subtitle.childNodes);
|
||||
// Découper en segments à chaque <br>
|
||||
const segments = [];
|
||||
let current = [];
|
||||
children.forEach(node => {
|
||||
if (node.nodeName === "BR") {
|
||||
segments.push(current);
|
||||
current = [];
|
||||
} else {
|
||||
current.push(node);
|
||||
}
|
||||
});
|
||||
segments.push(current);
|
||||
|
||||
// Découper en segments à chaque <br>
|
||||
const segments = [];
|
||||
let current = [];
|
||||
children.forEach(node => {
|
||||
if (node.nodeName === "BR") {
|
||||
segments.push(current);
|
||||
current = [];
|
||||
} else {
|
||||
current.push(node);
|
||||
// Reconstruire le titre avec des .h3-line
|
||||
subtitle.innerHTML = "";
|
||||
segments.forEach(nodes => {
|
||||
const line = this.createLine(symbol, nodes);
|
||||
subtitle.appendChild(line);
|
||||
|
||||
const spanAfter = line.querySelector(".h3-after");
|
||||
const baseHeight = line.offsetHeight;
|
||||
let count = 0;
|
||||
// h3-after → Ajouter des symboles à la ligne en vérifiant la hauteur de la ligne, si la ligne devient plus haute, supprimer le dernier symbole ajouté
|
||||
while (count < 300) {
|
||||
count++;
|
||||
spanAfter.textContent = symbol.repeat(count);
|
||||
if (line.offsetHeight > baseHeight) {
|
||||
spanAfter.textContent = symbol.repeat(count - 1);
|
||||
break;
|
||||
}
|
||||
});
|
||||
segments.push(current);
|
||||
|
||||
// Reconstruire le h3 avec des .h3-line
|
||||
subtitle.innerHTML = "";
|
||||
segments.forEach(nodes => {
|
||||
const line = this.createLine(symbol, nodes);
|
||||
subtitle.appendChild(line);
|
||||
|
||||
const spanAfter = line.querySelector(".h3-after");
|
||||
const baseHeight = line.offsetHeight;
|
||||
let count = 0;
|
||||
while (count < 300) {
|
||||
count++;
|
||||
spanAfter.textContent = symbol.repeat(count);
|
||||
if (line.offsetHeight > baseHeight) {
|
||||
spanAfter.textContent = symbol.repeat(count - 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
if (withDecor) {
|
||||
const smallSizes = [1, 2, 3, 2, 1];
|
||||
const bigSizes = [1, 2, 3, 4, 5, 4, 3, 2, 1];
|
||||
let firstDecor, secondDecor;
|
||||
if (isLeft) {
|
||||
firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
|
|
@ -92,7 +90,24 @@ export default class itemsDecor extends Handler {
|
|||
secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
|
||||
}
|
||||
subtitle.parentNode.insertBefore(firstDecor, subtitle);
|
||||
subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
|
||||
subtitle.parentNode.insertBefore(secondDecor, subtitle);
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue