decor subtitles finish js
This commit is contained in:
Julie Blanc
parent
1c1a2b0a93
commit
cc971f6152
6 changed files with 180 additions and 84 deletions
|
|
@ -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; */
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,4 +20,16 @@ body {
|
|||
font-size: var(--font-size);
|
||||
line-height: var(--baseline);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pagedjs_left_page .pagedjs_sheet{
|
||||
--grid-position-x: 21px!important;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .pagedjs_sheet{
|
||||
--grid-position-x: 16px!important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
} */
|
||||
|
||||
|
||||
|
||||
/* DELETE BEFORE PRINT */
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
"assets/css/subtitles.css"
|
||||
],
|
||||
"hook": [
|
||||
"/js/items-decor.js"
|
||||
"/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);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue