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 */
.booktitle {
position: running(bookTitleRun);
}
/* The running-chapter class is the duplicated chapter title for the running headers */
.running-chapter {
display: none;
string-set: chapterTitleRun content(text);
font-variant: all-small-caps;
.body-chapter .ct, .front-component .ct {
/* string-set:chapterTitleRun content(text); */
/* font-variant: all-small-caps;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
letter-spacing: 0.05em */
}
/* The running-part class is the duplicated chapter title for the running headers */
.running-part {
position: running(partTitleRun);
font-variant: all-small-caps;
.body-part .ct {
/* string-set: partTitleRun content(text); */
/* font-variant: all-small-caps;
font-size: 9pt;
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 @@
/* simple break solution */
.break {
break-before: page;
height: 0;
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: ' ';
}
}
break-before: page;
height: 0;
position: relative;
}
html {
/* addin a margin to the html can break the pagination when printing. */
/* margin-top: 2em; */
/* transform: scale(1.5); */
/* addin a margin to the html can break the pagination when printing. */
/* margin-top: 2em; */
/* transform: scale(1.5); */
}
/* data split */
/* hack for the justification of the first part of a paragraph splitted */
p[data-split-original="true"] {
text-align-last: justify;
}
\ No newline at end of file
text-align-last: justify;
}
@import "baseline.css";
/* To define how the book look on the screen: */
@media screen {
......@@ -24,12 +24,6 @@
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.
......
/* Table of content - chapter page
/* Table of content - body-chapter page
------------------------------------*/
.chapter {
.body-chapter {
page: chapter;
/* color: darkcyan; */
}
@page chapter :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;
/* margin-top: -57px; */
}
}
\ No newline at end of file
/* Front matter - pages
------------------------------------*/
.fm-body {
page: fmbody;
.front-component, .back-component {
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 {
content: " ";
opacity: 0;
content: none;
}
@top-right {
content: " ";
opacity: 0;
content: none;
}
@top-center {
content: " ";
opacity: 0;
content: none;
}
@top-left-corner {
content: " ";
......@@ -31,6 +56,5 @@
@bottom-center {
content: counter(page);
font-size: 8pt;
margin-top: -2.5em;
}
}
\ No newline at end of file
......@@ -3,7 +3,8 @@
@page {
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; */
/* background: url(../img/grid.png); */
/* background-size: 100% 100%; */
......@@ -13,8 +14,11 @@
@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;
font-variant: oldstyle-nums all-small-caps;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
}
/* @top-center {
margin-top: 1.15em;
......@@ -31,6 +35,10 @@
font-size: 9pt;
line-height: 17px;
font-variant: oldstyle-nums all-small-caps;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
}
/* @top-center {
margin-top: 1.15em;
......
/* Part - pages
/* Table of content - body-part page
------------------------------------*/
.part {
.body-part {
page: part;
}
.part {
/* break-before: right; */
}
@page part {
@top-right-corner {
content: " ";
color: transparent;
}
@top-right {
content: " ";
color: transparent;
.cn {
display: none;
}
}
@page part :first {
@top-left-corner {
content: " ";
color: transparent;
content: " ";
color: transparent;
}
@top-left {
content: " ";
color: transparent;
content: " ";
color: transparent;
}
background: #4FC4B9;
color: white;
}
@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
/* 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
------------------------------------*/
section.titlepage {
.titlepage {
page: title;
}
......
......@@ -2,65 +2,48 @@
------------------------------------*/
.toc {
page: toc;
page: toc;
}
@page toc {
/* background: white; */
@top-left-corner {
content: none;
color: transparent;
}
@top-right-corner {
content: none;
color: transparent;
}
@top-left {
content: none;
color: transparent;
}
@top-right {
content: none;
color: transparent;
}
}
@page toc :right {
@top-right {
content: none;
}
@top-right {
content: none;
}
}
@page toc :left {
@top-left {
content: none;
}
@top-left {
content: none;
}
}
@page toc :first {
@top-left-corner {
content: none;
color: transparent;
/* hack for the content none */
}
@top-right-corner {
content: none;
color: transparent;
/* hack for the content none */
}
@top-left {
content: none;
color: transparent;
/* hack for the content none */
}
@top-right {
content: none;
color: transparent;
/* hack for the content none */
}
}
\ No newline at end of file
......@@ -14,7 +14,8 @@
@import "page/dedication.css";
@import "page/toc.css";
@import "page/fmbody.css";
@import "page/chapter.css";
@import "page/fmbody.css";
@import "page/part.css";
@import "page/chapter.css";
/* @import "elements/demo.css"; */
......@@ -5,4 +5,4 @@
@import "layout/pagedjs/pagedjs.css";
/* @import "theme/specific.css"; */
/* @import "theme/specific.css"; */
\ No newline at end of file
......@@ -38,4 +38,5 @@
@import './modules/pictures.css';
@import './modules/reset.css';
/* @import './modules/startChapter.css'; */
@import './modules/table.css';
\ No newline at end of file
@import './modules/table.css';
......@@ -16,6 +16,8 @@ p {
margin: 0;
padding: 0;
hyphens: auto;
orphans: 0;
widow: 0;
&:first-of-type {
text-indent: 0;
}
......@@ -46,7 +48,6 @@ a {
font-style: inherit;
&:hover {
color: var(--color-secondary);
border-bottom: 2px solid var(--color-secondary);
}
}
......@@ -101,15 +102,15 @@ sup {
hr {
&:after {
content: "* * *";
height: 17px;
height: var(--font-lineHeight);
display: block;
text-align: center;
font-size: 9px;
letter-spacing: 1em;
font-size: 13px;
letter-spacing: 0.3em;
}
break-before: avoid;
margin-top: 5px;
margin-bottom: 29px;
margin-bottom: 27px;
border: none;
&.ls {
height: 0px;
......@@ -117,6 +118,9 @@ hr {
content: "\2002";
}
}
+ p {
text-indent: 0;
}
}
.small-caps {
......
......@@ -17,8 +17,9 @@ h3,
h4,
h5,
h6 {
/* widows: 2; */
widows: 2;
hyphens: none;
break-after: avoid;
}
/* pagebreak avoid */
......@@ -102,7 +103,7 @@ h5 + ul > li:first-of-type,
h6 + ul > li:first-of-type,
li ul,
li ol {
page-break-before: avoid;
break-before: avoid;
}
h1 + p,
......
......@@ -32,4 +32,11 @@
.footnoteRef {
font-style: normal;
}
.inline-note-callout {
/* color: red; */
/* font-size: 5em; */
line-height: 0;
}
\ No newline at end of file
.fm-body,
.front-component,
.toc,
.notes {
.notes,
.back-component,
.body-part {
header {
margin: 0;
padding-top: 38px;
min-height: 289px;
padding-top: 0;
/* start on line 18 */
min-height: 272px;
padding-top: 46px;
/* to test the heading */
/* background-color: rgba(0, 0, 0, 0.5); */
h1.fmh {
.cn::after {
border: none;
}
h1.fmh, h1.ct {
font-size: 16px;
line-height: 1;
/* font-feature-settings: "smcp", "c2sc"; */
font-variant: all-small-caps;
font-feature-settings: "smcp", "c2sc";
letter-spacing: 0.5pt;
/* track 100 */
letter-spacing: 0.1em;
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-weight: 400;
......@@ -80,28 +90,6 @@
}
}
.toc {
ul {
font-size: 13px;
line-height: 17px;
list-style-type: none;
text-indent: 0;
li {
margin-bottom: 0;
margin-left: 0;
padding-top: 0;
line-height: var(--font-lineHeight);
font-size: var(--font-size);
text-indent: 0;
&:before {
content: "";
font-size: 12px;
padding-right: 0;
color: var(--color-primary);
}
}
}
}
.crossRef li p {
&:after {
......
......@@ -9,30 +9,41 @@ section {
/* // as known as h1 in the word doc */
h2 {
h1 {
/* // when font stuff will be used: font-variant-caps: all-small-caps; */
font-family: var(--font-body);
font-size: 12px;
margin: 0 auto;
max-width: 361px;
break-inside: avoid;
line-height: 17px;
line-height: var(--font-lineHeight);
break-after: avoid;
text-align: center;
letter-spacing: 2pt;
text-transform: uppercase;
/* // margin-top: 34px; */
letter-spacing: 0.1em;
text-transform: lowercase;
font-variant: all-small-caps;
font-weight: 400;
margin-top: calc(var(--font-lineHeight) * 1);
margin-bottom: calc(var(--font-lineHeight) * 1);
&:first-of-type {
/* // margin-top: 0; */
}
& + h2 {
margin-top: -12px;
}
}
header + h1 {
margin-top: 0;
}
/* // as known as h2 in the word document */
h3 {
h2 {
font-size: 12px;
line-height: 17px;
line-height: var(--font-lineHeight);
font-style: italic;
margin: 0 auto;
......@@ -40,7 +51,9 @@ section {
text-align: center;
font-weight: 400;
/* @extend .old-style-figures; */
margin-top: calc(var(--font-lineHeight) * 1);
margin-top: calc(20px * 1);
margin-bottom: calc(12px);
em {
font-style: normal;
}
......@@ -53,16 +66,18 @@ section {
}
/* // as known as h3 in the word document */
h4 {
h3 {
font