Commit 72c45e39 authored by julien's avatar julien

finished v1 + added dialog

parent 41ef33b0
Pipeline #166 failed with stages
......@@ -44,7 +44,7 @@ module.exports = function(grunt) {
require('postcss-merge-rules')(),
// require('postcss-center')(),
// require('autoprefixer-core')('last 1 version'),
// require('postcss-discard-comments')({ removeAll: true }),
require('postcss-discard-comments')({ removeAll: true }),
// require('cssnano')()
]
},
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -86,12 +86,25 @@
</head>
<body class="hyphenate" lang="en-us">
<body contenteditable="true" class="hyphenate" lang="en-us">
<section class="titlepage">
<header>
<h1 class="booktitle">The status of what we can do with Editoria and Pagedjs today</h1>
</header>
</section>
<section class="front-component">
<header>
<h1 class="ct">A dialog example</h1>
</header>
<div class="dialog">
<p class="name">George:</p>
<p class="sentence">this is my name, George</p>
<p class="name">Bob:</p>
<p class="sentence">and i'm Bob</p>
</div>
<p>this is a lol</p>
</section>
<section class="toc" id="comp-toc-0">
<header>
......@@ -112,7 +125,7 @@
<li class="toc-back toc-component"><a href="#comp-notes-0">Notes</a></li>
</ol>
</section>
<section id="comp-7a698173-bf7c-41e9-93bc-abc229e790e2" class="front-component">
<section class="front-component">
<header>
<h1 class="ct">Front Matter Title</h1>
<p class="cst">Front matter Subtitle</p>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
:root {
--baseline: 16px;
--baseline-color: rgba(0, 200, 80, 0.6);
/* --baseline-color: transparent; */
--baseline-color: transparent;
/* --baseline-color: white; */
}
......@@ -40,3 +40,9 @@
}
}
@media print {
.pagedjs_page_content::after {
color: var(--baseline-color);
}
}
\ No newline at end of file
/* Table of content - body-chapter page
------------------------------------*/
.body-chapter {
.body-part, .body-chapter {
page: chapter;
/* color: darkcyan; */
}
......@@ -27,4 +27,5 @@
font-size: 8pt;
/* margin-top: -57px; */
}
}
\ No newline at end of file
}
/* Default pages
------------------------------------*/
h1.ct {
h1.ct span.run {
string-set: chapterTitleRun content(text);
}
......@@ -11,7 +11,7 @@ h1.ct {
@page {
size: 6in 9in;
margin: 78px 72px 80px 72px;
margin: 94px 72px 64px 72px;
/* background: url('../img/grid2.png'), white; */
/* margin: 83px 71.811024px 96px; */
/* background: url(../img/grid.png); */
......
......@@ -34,4 +34,43 @@
font-size: 8pt;
margin-top: -2.5em;
}
}
\ No newline at end of file
}
.body-part header {
/* // minimum height to get the starter */
min-height: calc(var(--font-lineHeight) * 16);
}
.body-part h1.ct{
padding: 0;
font-size: 24px;
line-height: calc(var(--font-lineHeight) * 2);
text-transform: none;
font-weight: 400;
letter-spacing: 0;
font-variant: none;
text-transform: capitalize;
margin-top: calc(var(--font-lineHeight) * 3);
&::before {
display: block;
font-variant: oldstyle-nums all-small-caps;
margin: 0 auto;
margin-top: 0;
font-size: 16px;
width: 2pc;
border-bottom: 1px solid black;
content: counter(chapter);
position: relative;
top: -10px;
}
}
.body-part h1.ct::before {
width: 100%;
counter-increment: part;
content: "PART " counter(part, lower-roman);
/* color: transparent; */
border-bottom: 1px solid transparent;
}
......@@ -31,4 +31,10 @@
font-size: 8pt;
margin-top: -2.5em;
}
}
.body-part {
.ct {
}
}
\ No newline at end of file
......@@ -28,4 +28,5 @@
/* background: green; */
margin: 0 auto;
width: 100%;
}
\ No newline at end of file
}
......@@ -15,6 +15,7 @@
@import "./modules/endnotes.css";
@import "./modules/pictures.css";
@import "./modules/list.css";
@import "./modules/dialog.css";
/* specific headers: chapter titles, part titles, etc. */
@import "./modules/display.css";
......@@ -24,6 +25,7 @@
/* import specific part */
@import "./modules/startChapter.css";
@import "./modules/start.css";
@import "./modules/page-copyright.css";
@import "./modules/page-dedication.css";
@import "./modules/page-epigraph.css";
......
.dialog {
display: grid;
grid-template-columns: [name] max-content [sentence] 1fr;
margin-top: var(--font-lineHeight);
margin-bottom: var(--font-lineHeight);
p {
text-indent: 0;
padding-top: calc(var(--font-lineHeight) / 2);
padding-bottom: calc(var(--font-lineHeight) / 2);
}
.name {
padding-right: 1em;
grid-column: name;
font-style: italic;
text-align: right;
max-width: 30ch;
}
}
\ No newline at end of file
......@@ -34,9 +34,35 @@
font-style: normal;
}
.inline-note-callout {
/* color: red; */
/* font-size: 5em; */
line-height: 0;
}
.note-chapterTitle {
text-align: center;
}
[id*="comp-notes"],
[data-id*="comp-notes"] {
ol {
margin-left: 0;
padding-left: 0;
li {
margin: 0;
padding: 0;
text-indent: 2em;
text-align: justify;
}
li::before {
content: counter(list) ".";
position: unset;
display: inline;
width: 2ch;
text-align: right;
padding-right: 0.5em;
font-variant: oldstyle-nums;
}
}
}
\ No newline at end of file
......@@ -21,10 +21,10 @@ blockquote.px {
text-align: justify;
+ cite, cite {
&::before {
content: " (";
/* content: " ("; */
}
&::after {
content: ") ";
/* content: ") "; */
}
}
}
......@@ -41,10 +41,19 @@ h1.ct + blockquote {
margin-top: calc(var(--font-lineHeight) * 2);
}
blockquote + p {
margin-top: var(--font-lineHeight);
}
blockquote.sep, blockquote.sepo {
& + blockquote.sepo {
margin-top: var(--font-lineHeight);
}
& + blockquote.sep {
margin-top: var(--font-lineHeight);
}
width:22pc;
font-style: italic;
margin: auto;
......@@ -117,13 +126,13 @@ header .cep, header .sep {
}
.cepsn, .sepsn , .cepo + cite , .sepo + cite, header .sep cite, header .sepo cite {
font-size: 11px;
line-height: var(--font-lineHeight);
line-height: 16px;
font-style: normal;
letter-spacing: 0.1em;
margin: auto;
margin-top: var(--font-lineHeight);
margin-top: 0;
text-align: justify;
text-indent: 0;
padding-bottom: 15px;
/* padding-bottom: 15px; */
font-variant: all-small-caps
}
\ No newline at end of file
......@@ -2,14 +2,15 @@
.front-component,
.toc,
.notes,
.back-component,
.body-part {
.back-component {
header {
margin: 0;
padding-top: 0;
/* start on line 18 */
min-height: 272px;
padding-top: 46px;
/* padding bottom set to all the last child type of element */
/* padding-bottom: 55px; */
/* to test the heading */
/* background-color: rgba(0, 0, 0, 0.5); */
.cn::after {
......
.part,
.body-part,
[data-type="part"] {
header {
background: rgba(0.0.0.0, 5);
min-height: 240px;
padding-top: 6em;
}
h1.ct {
font-style: normal;
font-size: 15pt;
text-align: center;
line-height: 16pt;
font-weight: 200;
margin-top: 0;
}
.part-number {
display: none;
}
}
......@@ -66,8 +66,8 @@
/* author */
.au {
font-weight: 400;
font-size: 16pt;
line-height: 22pt;
font-size: 20px;
line-height: calc(var(--font-lineHeight) * 1.5);
text-align: center;
margin: 0 auto;
text-indent: 0;
......@@ -114,4 +114,11 @@
/* // @include ruler(28pt , -4pt) */
}
}
}
.booktitle + .cst {
margin-top: calc(var(--font-lineHeight) * 1);
font-size: 1.5em;
line-height: calc(var(--font-lineHeight) * 1.5);
}
\ No newline at end of file
......@@ -93,4 +93,8 @@
&::before {
content: none;
}
}
.toc header {
min-height: 256px !important;
}
\ No newline at end of file
/*when the last element of the header is a chapter title */
.front-component, .back-component {
header {
h1.ct:last-child {
padding-bottom: 50px;
}
p.cst:last-child {
padding-bottom: 72px;
}
}
}
.body-chapter, .body-unnumbered {
header .ct:last-child {
padding-bottom: 47px;
}
/* when the last element of the header is a chapter subtitle */
header .cst:last-child {
padding-bottom: 55px;
}
header .sepo:last-child {
padding-bottom: 47px;
}
header .sep:last-child {
padding-bottom: 47px;
}
}
......@@ -3,47 +3,39 @@
.chapter header {
/* // minimum height to get the starter */
min-height: calc(var(--font-lineHeight) * 16);
/* // minimum padding bottom, set to start the beginning of the chapter */
/* padding-bottom: calc(var(--font-lineHeight) * 4); */
box-shadow: 0 0 0 1px transparent;
padding-top: 42px;
}
.body-chapter .ct, .body-unnumbered .ct {
padding: 0 45px;
padding: 0;
font-size: 24px;
line-height: calc(var(--font-lineHeight) * 2);
/* font-size: var(--); */
text-transform: none;
font-weight: 400;
letter-spacing: 0;
/* text-align: center; */
font-variant: none;
text-transform: capitalize;
/* text-align: center; */
margin-top: calc(var(--font-lineHeight) * 1);
margin-top: calc(var(--font-lineHeight) * 4);
&::before {
/* margin-bottom: 16px; */
/* margin-bottom: calc(var(--font-lineHeight)); */
display: block;
font-variant: oldstyle-nums;
margin: 0 auto;
margin-top: -2px;
margin-top: 0;
font-size: 16px;
width: 2pc;
border-bottom: 1px solid black;
content: counter(chapter);
position: relative;
top: -16px;
position: relative;
top: -26px;
}
}
.body-unnumbered {
.ct::before {
.body-unnumbered .ct::before {
counter-increment: none;
content: none;
}
content: "0";
color: transparent;
border-bottom: 1px solid transparent;
}
.ct + .cst {
margin-top: 10px;
}
......@@ -57,16 +49,6 @@
text-transform: capitalize;
}
/* // no author for now
.cau {
padding-left: 35px;
padding-right: 35px;
line-height : $cau-lineHeight;
font-size: $cau-fontSize;
margin-top: 13px;
text-indent: 0;
text-align: center;
} */
.cst+blockquote {
margin-top: 35px;
......@@ -84,28 +66,4 @@ header+p {
text-indent: 0;
}
/* when there is a chapter-number
header starting point
when the last element of the header is a chapter title */
header :last-child.ct {
padding-bottom: 8px;
}
/* when the last element of the header is a chapter subtitle */
header :last-child.cst {
padding-bottom: 1px;
}
header :last-child.sepo {
padding-bottom: 88px;
}
header :last-child.sep {
padding-bottom: 88px;
}
// js for the exporter
// this will put the cite in the blockquote.
// const cites = document.querySelectorAll(".ex + cite, .px + cite")
const cites = document.querySelectorAll("blockquote + cite")
cites.forEach(cite => {
const quote = cite.previousSibling;
quote.appendChild(cite);
})
let epigraphs = document.querySelectorAll('header + blockquote');
epigraphs.forEach( epigraph => {
epigraph.previousElementSibling.insertAdjacentElement("beforeend", epigraph)
})
epigraphs = document.querySelectorAll('header + blockquote');
epigraphs.forEach( epigraph => {
epigraph.previousElementSibling.insertAdjacentElement("beforeend", epigraph)
})
// h3 turn into span
const titles3 = document.querySelectorAll('h3')
titles3.forEach(titleBis => {
const spanh3 = document.createElement('span');
spanh3.classList.add('h3');
spanh3.innerHTML = titleBis.innerHTML;
titleBis.nextElementSibling.classList.add('headin3');
titleBis.nextElementSibling.insertAdjacentElement("afterbegin", spanh3);
titleBis.parentNode.removeChild(titleBis)
})
// epigraph in the top
// cite should be inside the blockquote on export
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment