Commit bae7cc88 authored by julientaq's avatar julientaq

General Text is made, stil need page-break fixes

parent 64025868
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
/* the booktitle is set once in the book */ /* the booktitle is set once in the book */
.booktitle { .booktitle {
position: running(bookTitleRun);
} }
/* The running-chapter class is the duplicated chapter title for the running headers */ /* The running-chapter class is the duplicated chapter title for the running headers */
.running-chapter { .body-chapter .ct, .front-component .ct {
display: none; /* string-set:chapterTitleRun content(text); */
string-set: chapterTitleRun content(text); /* font-variant: all-small-caps;
font-variant: all-small-caps;
font-size: 9pt; font-size: 9pt;
line-height: 17px; line-height: 17px;
letter-spacing: 0.05em letter-spacing: 0.05em */
} }
/* The running-part class is the duplicated chapter title for the running headers */ /* The running-part class is the duplicated chapter title for the running headers */
.running-part { .body-part .ct {
position: running(partTitleRun); /* string-set: partTitleRun content(text); */
font-variant: all-small-caps;
/* font-variant: all-small-caps;
font-size: 9pt; font-size: 9pt;
line-height: 17px; line-height: 17px;
letter-spacing: 0.05em letter-spacing: 0.05em */
} }
:root {
--baseline: 16px;
--baseline-color: rgba(0, 200, 80, 0.6);
/* --baseline-color: white; */
}
.pagedjs_page {
/* grid baseline */
background:
repeating-linear-gradient(
white 0,
white calc(var(--font-lineHeight) - 1px),
var(--baseline-color) calc(var(--font-lineHeight)));
background-size: cover;
background-repeat: repeat-y;
/* start of the first baseline: 30pt from top: putted it as 40px */
background-position-y: 40px;
&::after {
background: url(../img/grid2.png);
/* background: url(../img/contents.png); */
/* background: url(../img/frontmatter.png); */
}
}
/* line calculators */
.pagedjs_page_content {
&::after {
content: "1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44";
line-height: var(--font-lineHeight);
position: absolute;
top: 0;
right: -4em;
color: red;
display: block;
text-align: right;
width: 2ch;
}
}
\ No newline at end of file
...@@ -23,52 +23,22 @@ ...@@ -23,52 +23,22 @@
/* simple break solution */ /* simple break solution */
.break { .break {
break-before: page; break-before: page;
height: 0; height: 0;
position: relative; position: relative;
} }
/* adding a baseline grid to update the book to a baseline */
:root {
--baseline: 34px;
--baseline-color: rgba(0, 200, 80, 0.1);
--baseline-color: white;
}
.pagedjs_page {
/* grid baseline */
background:
linear-gradient(
white 0%,
white 100%), linear-gradient( white 0%,
white 50%,
var(--baseline-color) 50%,
var(--baseline-color) 100%);
background-size: 100% calc(17px * 7), 100% var(--baseline);
background-repeat: no-repeat, repeat-y;
background-position-y: 0, 8px;
&:first-of-type::after {
/* background: url(../img/grid2.png); */
/* background: url(../img/contents.png); */
/* background: url(../img/frontmatter.png); */
width: 100%;
height: 100%;
display: block;
position: absolute;
content: ' ';
}
}
html { html {
/* addin a margin to the html can break the pagination when printing. */ /* addin a margin to the html can break the pagination when printing. */
/* margin-top: 2em; */ /* margin-top: 2em; */
/* transform: scale(1.5); */ /* transform: scale(1.5); */
} }
/* data split */ /* data split */
/* hack for the justification of the first part of a paragraph splitted */ /* hack for the justification of the first part of a paragraph splitted */
p[data-split-original="true"] { p[data-split-original="true"] {
text-align-last: justify; text-align-last: justify;
} }
\ No newline at end of file
@import "baseline.css";
/* To define how the book look on the screen: */ /* To define how the book look on the screen: */
@media screen { @media screen {
...@@ -24,12 +24,6 @@ ...@@ -24,12 +24,6 @@
margin-left: var(--width); margin-left: var(--width);
} }
/* show the margin-box */
.pagedjs_margin-content
{
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* uncomment for recto/verso book. /* uncomment for recto/verso book.
......
/* Table of content - chapter page /* Table of content - body-chapter page
------------------------------------*/ ------------------------------------*/
.chapter { .body-chapter {
page: chapter; page: chapter;
/* color: darkcyan; */
} }
@page chapter :first { @page chapter :first {
@top-left-corner { @top-left-corner {
content: " "; content: " ";
color: transparent;
} }
@top-left { @top-left {
content: " "; content: " ";
color: transparent;
} }
@top-center { @top-center {
content: " "; content: " ";
color: transparent;
} }
@top-right-corner { @top-right-corner {
content: " "; content: " ";
color: transparent;
} }
@top-right { @top-right {
content: " "; content: " ";
color: transparent;
} }
@bottom-center { @bottom-center {
content: counter(page); content: counter(page);
font-size: 8pt; font-size: 8pt;
margin-top: -2.5em; /* margin-top: -57px; */
} }
} }
\ No newline at end of file
/* Front matter - pages /* Front matter - pages
------------------------------------*/ ------------------------------------*/
.fm-body { .front-component, .back-component {
page: fmbody; page: frontmatter;
} }
@page fmbody {
/* background: white; */
@page frontmatter :right {
@top-right {
content: string(chapterTitleRun, first) "\00A0\00A0\00A0\00A0\00A0" counter(page);
padding-top: 2.6em;
font-variant: oldstyle-nums all-small-caps;
text-align: right;
}
/* @top-center {
margin-top: 1.15em;
content: element(chapterTitleRun);
margin-right: -2em;
text-align: right;
} */
} }
@page fmbody :first {
@page frontmatter :left {
@top-left {
content: counter(page) "\00A0\00A0\00A0\00A0\00A0" string(chapterTitleRun, first) ;
padding-top: 2.6em;
font-variant: oldstyle-nums all-small-caps;
text-align: left;
}
/* @top-center {
margin-top: 1.15em;
content: element(chapterTitleRun);
margin-right: -2em;
text-align: right;
} */
}
@page frontmatter :first {
@top-right-corner { @top-right-corner {
content: " "; content: none;
opacity: 0;
} }
@top-right { @top-right {
content: " "; content: none;
opacity: 0;
} }
@top-center { @top-center {
content: " "; content: none;
opacity: 0;
} }
@top-left-corner { @top-left-corner {
content: " "; content: " ";
...@@ -31,6 +56,5 @@ ...@@ -31,6 +56,5 @@
@bottom-center { @bottom-center {
content: counter(page); content: counter(page);
font-size: 8pt; font-size: 8pt;
margin-top: -2.5em;
} }
} }
\ No newline at end of file
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
@page { @page {
size: 6in 9in; size: 6in 9in;
margin: 62pt 0.75in 0.75in 0.75in; margin: 78px 72px 80px 72px;
/* background: url('../img/grid2.png'), white; */
/* margin: 83px 71.811024px 96px; */ /* margin: 83px 71.811024px 96px; */
/* background: url(../img/grid.png); */ /* background: url(../img/grid.png); */
/* background-size: 100% 100%; */ /* background-size: 100% 100%; */
...@@ -13,8 +14,11 @@ ...@@ -13,8 +14,11 @@
@top-right { @top-right {
content: string(chapterTitleRun, first) "\00A0\00A0\00A0\00A0\00A0" counter(page); content: string(chapterTitleRun, first) "\00A0\00A0\00A0\00A0\00A0" counter(page);
padding-top: 2.6em; padding-top: 2.6em;
font-variant: oldstyle-nums all-small-caps;
text-align: right; text-align: right;
font-variant: oldstyle-nums all-small-caps;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
} }
/* @top-center { /* @top-center {
margin-top: 1.15em; margin-top: 1.15em;
...@@ -31,6 +35,10 @@ ...@@ -31,6 +35,10 @@
font-size: 9pt; font-size: 9pt;
line-height: 17px; line-height: 17px;
font-variant: oldstyle-nums all-small-caps; font-variant: oldstyle-nums all-small-caps;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
} }
/* @top-center { /* @top-center {
margin-top: 1.15em; margin-top: 1.15em;
......
/* Part - pages /* Table of content - body-part page
------------------------------------*/ ------------------------------------*/
.part { .body-part {
page: part; page: part;
} .cn {
display: none;
.part {
/* break-before: right; */
}
@page part {
@top-right-corner {
content: " ";
color: transparent;
}
@top-right {
content: " ";
color: transparent;
} }
}
@page part :first {
@top-left-corner { @top-left-corner {
content: " "; content: " ";
color: transparent; color: transparent;
} }
@top-left { @top-left {
content: " "; content: " ";
color: transparent; color: transparent;
} }
background: #4FC4B9; @top-center {
color: white; content: " ";
} color: transparent;
}
@top-right-corner {
content: " ";
color: transparent;
}
@top-right {
content: " ";
color: transparent;
}
@bottom-center {
content: counter(page);
font-size: 8pt;
margin-top: -2.5em;
}
}
\ No newline at end of file
/* Table of content - body-chapter page
------------------------------------*/
.body-part {
page: part;
}
@page part :first {
@top-left-corner {
content: " ";
color: transparent;
}
@top-left {
content: " ";
color: transparent;
}
@top-center {
content: " ";
color: transparent;
}
@top-right-corner {
content: " ";
color: transparent;
}
@top-right {
content: " ";
color: transparent;
}
@bottom-center {
content: counter(page);
font-size: 8pt;
margin-top: -2.5em;
}
}
\ No newline at end of file
/* Title pages /* Title pages
------------------------------------*/ ------------------------------------*/
section.titlepage { .titlepage {
page: title; page: title;
} }
......
...@@ -2,65 +2,48 @@ ...@@ -2,65 +2,48 @@
------------------------------------*/ ------------------------------------*/
.toc { .toc {
page: toc; page: toc;
} }
@page toc { @page toc {
/* background: white; */ /* background: white; */
@top-left-corner { @top-left-corner {
content: none; content: none;
color: transparent;
} }
@top-right-corner { @top-right-corner {
content: none; content: none;
color: transparent;
} }
@top-left { @top-left {
content: none; content: none;
color: transparent;
} }
@top-right { @top-right {
content: none; content: none;
color: transparent;
} }
} }
@page toc :right { @page toc :right {
@top-right { @top-right {
content: none; content: none;
} }
} }
@page toc :left { @page toc :left {
@top-left { @top-left {
content: none; content: none;
} }
} }
@page toc :first { @page toc :first {
@top-left-corner { @top-left-corner {
content: none; content: none;
color: transparent;
/* hack for the content none */
} }
@top-right-corner { @top-right-corner {
content: none; content: none;
color: transparent;
/* hack for the content none */
} }
@top-left { @top-left {
content: none; content: none;
color: transparent;
/* hack for the content none */
} }
@top-right { @top-right {
content: none; content: none;
color: transparent;
/* hack for the content none */
} }
} }
\ No newline at end of file
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
@import "page/dedication.css"; @import "page/dedication.css";
@import "page/toc.css"; @import "page/toc.css";
@import "page/fmbody.css"; @import "page/fmbody.css";
@import "page/chapter.css"; @import "page/fmbody.css";
@import "page/part.css"; @import "page/part.css";
@import "page/chapter.css";
/* @import "elements/demo.css"; */ /* @import "elements/demo.css"; */
...@@ -5,4 +5,4 @@ ...@@ -5,4 +5,4 @@
@import "layout/pagedjs/pagedjs.css"; @import "layout/pagedjs/pagedjs.css";
/* @import "theme/specific.css"; */ /* @import "theme/specific.css"; */
\ No newline at end of file
...@@ -38,4 +38,5 @@ ...@@ -38,4 +38,5 @@
@import './modules/pictures.css'; @import './modules/pictures.css';
@import './modules/reset.css'; @import './modules/reset.css';
/* @import './modules/startChapter.css'; */ /* @import './modules/startChapter.css'; */
@import './modules/table.css'; @import './modules/table.css';
\ No newline at end of file
...@@ -16,6 +16,8 @@ p { ...@@ -16,6 +16,8 @@ p {
margin: 0; margin: 0;
padding: 0; padding: 0;
hyphens: auto; hyphens: auto;
orphans: 0;
widow: 0;
&:first-of-type { &:first-of-type {
text-indent: 0; text-indent: 0;
} }
...@@ -46,7 +48,6 @@ a { ...@@ -46,7 +48,6 @@ a {
font-style: inherit; font-style: inherit;
&:hover { &:hover {
color: var(--color-secondary); color: var(--color-secondary);
border-bottom: 2px solid var(--color-secondary);
} }
} }
...@@ -101,15 +102,15 @@ sup { ...@@ -101,15 +102,15 @@ sup {
hr { hr {
&:after { &:after {
content: "* * *"; content: "* * *";
height: 17px; height: var(--font-lineHeight);
display: block; display: block;
text-align: center; text-align: center;
font-size: 9px; font-size: 13px;
letter-spacing: 1em; letter-spacing: 0.3em;
} }
break-before: avoid; break-before: avoid;
margin-top: 5px; margin-top: 5px;
margin-bottom: 29px; margin-bottom: 27px;
border: none; border: none;
&.ls { &.ls {
height: 0px; height: 0px;
...@@ -117,6 +118,9 @@ hr { ...@@ -117,6 +118,9 @@ hr {
content: "\2002"; content: "\2002";
} }
} }
+ p {
text-indent: 0;
}
} }
.small-caps { .small-caps {
......
...@@ -17,8 +17,9 @@ h3, ...@@ -17,8 +17,9 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
/* widows: 2; */ widows: 2;
hyphens: none; hyphens: none;
break-after: avoid;
} }
/* pagebreak avoid */ /* pagebreak avoid */
...@@ -102,7 +103,7 @@ h5 + ul > li:first-of-type, ...@@ -102,7 +103,7 @@ h5 + ul > li:first-of-type,
h6 + ul > li:first-of-type, h6 + ul > li:first-of-type,
li ul, li ul,
li ol { li ol {
page-break-before: avoid; break-before: avoid;
} }
h1 + p, h1 + p,
......