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
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue