Commit 5f753a63 authored by julientaq's avatar julientaq

clean and reordering the css

parent 547dc5f7
......@@ -16,6 +16,165 @@
<body>
<section class="part">
<h1 class="chapter-title">This is the title</h1>
<div class="title-example">this is the title (running)</div>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p> <p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p><br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p> <p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p> <p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p><p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p> <p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p><p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p><p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p><p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p><p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
<p>&nbsp;<br></p>
</section>
<section class="title">
<h1 class="title">Pubsweet</h1>
......
/* page breaks */
.part hgroup {
break-before: page;
}
.part:last-child {
/* break-after: page; */
}
.part {
/* send the first chapter after each part page on a right one */
break-after: right;
......@@ -14,7 +11,3 @@
.chapter hgroup {
break-before: page;
}
.break {
}
section.part {
page: part;
color: darkblue !important;
}
.title-example {
position: running(runningTitle);
font-family: serif;
}
@page {
size: 17cm 24cm;
margin: 30mm 25mm;
@bottom-left {
background-color: lightgrey;
content: '@bottom-left';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@top-left-corner {
background-color: lightgrey;
content: '@top-left-corner ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@top-left {
background-color: lightgrey;
content: '@top-left ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@top-center {
background-color: lightgrey;
content: '@top-center ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@top-right {
background-color: lightgrey;
content: '@top-right ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@top-right-corner {
background-color: lightgrey;
content: '@top-right-corner ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@right-top {
background-color: lightgrey;
content: '@right-top ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@right-middle {
background-color: lightgrey;
content: '@right-middle ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@right-bottom {
background-color: lightgrey;
content: '@right-bottom ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@bottom-right-corner {
background-color: lightgrey;
content: '@bottom-right-corner ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@bottom-left {
background-color: lightgrey;
content: '@bottom-left ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@bottom-center {
background-color: lightgrey;
content: '@bottom-center ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@bottom-right {
background-color: lightgrey;
content: '@bottom-right ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@bottom-left-corner {
background-color: lightgrey;
content: '@bottom-left-corner ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@left-top {
background-color: lightgrey;
content: '@left-top ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
padding: 0.8em;
align-items: center;
}
box-shadow: 0 0 0 1px inset lightgrey;
}
@left-middle {
background-color: lightgrey;
content: '@left-middle ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
box-shadow: 0 0 0 1px inset lightgrey;
}
@left-bottom {
box-shadow: 0 0 0 1px inset lightgrey;
}
}
@page :right {
@top-right-corner {
content: counter(page);
box-shadow: 0 0 0 1px inset lightgrey;
padding: 0.8em;
font-size: 16px;
align-items: center;
}
@left-bottom {
background-color: lightgrey;
content: '@left-bottom ';
box-shadow: 0 0 0 3px inset white;
font-size: 0.8em;
font-family: "Fira Sans Condensed";
text-transform: uppercase;
}
@top-right {
font-size: 16px;
content: element(runningTitle);
color: red;
padding: 0.2em;
}
}
@page :left {
@top-left-corner {
content: counter(page);
box-shadow: 0 0 0 1px inset lightgrey;
padding: 0.8em;
align-items: center;
}
font-size: 16px;
}
@top-left {
content: element(runningTitle);
color: red;
padding: 0.2em;
font-size: 16px;
}
}
@page part {
background-color: lightcyan;
margin: 120mm 25mm 30mm;
@top-left {
content: none;
color: transparent;
}
@top-right {
content: none;
color: transparent;
}
@top-left-corner {
content: none;
color: transparent;
}
@top-right-corner {
content: none;
color: transparent;
}
}
\ No newline at end of file
/* the booktitle is set once in the book */
.booktitle {
position: running(booktitleRun);
}
/* The dup class is the duplicated chapter title for the running headers */
.dup {
position: running(titleRun)
}
......
/* variables are not yet usable in the @page */
:root {
--width: 170mm;
--height: 240mm;
......@@ -6,7 +8,6 @@
--margin-outside: 35mm;
--margin-top: 30mm;
--margin-bottom: 30mm;
/* --background: rgba(0, 0, 0, 0.2); */
--background: rgba(0, 0, 0, 0.2);
--color-paper: white;
......
:root {
--margin-inside: 35mm;
--margin-outside: 35mm;
--margin-top: 30mm;
--margin-bottom: 30mm;
--background: rgba(0, 0, 0, 0.6);
--color-paper: white;
}
/* to add text-align to margin boxes */
/* Do we still need this hack? */
/* hack for horizontal alignments */
/* spacing when titles are on top of the .pagedjs_page */
.pagedjs_page_content > div > section:first-child > h1 {
/* .pagedjs_page_content > div > section > p:first-child + h2, */
/* .pagedjs_page_content > div > section > h3:first-child { */
/* color: red; */
}
\ No newline at end of file
/* to remove when added to paged.js */
\ No newline at end of file
[contenteditable]:focus {
outline: 0px solid transparent;
background: cornsilk;
}
/* adding a baseline grid to update the book to a baseline */
:root {
......@@ -11,22 +6,21 @@
}
.pagedjs_page {
/* background: linear-gradient( white 0%, white 16px, transparent 17px); */
/* A gradient on 45deg axis starting blue and finishing red */
;
/* grid baseline */
background: linear-gradient( white 0%, white 16px, transparent 17px); ;
background-size: 100% 17px;
background-repeat: repeat-y;
background-position-y: 7px;
/* border: 20px solid red !important; */
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--background);
}
.pagedjs_pages {
display: flex;
/* if spread: you dont need spaces between pages) */
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
......@@ -45,16 +39,15 @@
}
/* show the margin-box */
[class*="pagedjs_margin-top"],
[class*="pagedjs_margin-bottom"],
[class*="pagedjs_margin-left"],
[class*="pagedjs_margin-right"],
.pagedjs_margin-content
{
box-shadow: 0 0 0 5px lightblue;
box-shadow: 0 0 0 1px inset lightgrey;
}
/* uncomment for recto/verso book. */
/* uncomment for recto/verso book.
--------------------------------------------------- */
/* .pagedjs_pages {
flex-direction: column;
}
......
/* Back matter - pages
------------------------------------*/
section.bm-body {
page: bmbody;
}
......@@ -22,5 +25,4 @@ section.bm-body {
content: " ";
color: transparent;
}
/* background: red; */
}
\ No newline at end of file
/* Table of content - chapter page
------------------------------------*/
section.chapter {
page: chapter;
}
......@@ -16,7 +19,6 @@ section.chapter {
color: transparent;
}
@top-right {
color: red;
content: " ";
color: transparent;
}
......
/* Front matter - pages
------------------------------------*/
section.fm-body {
page: fmbody;
}
@page fmbody :first {
@top-right-corner {
content: " ";
......@@ -18,5 +18,4 @@ section.fm-body {
@top-left {
content: " ";
}
/* background: red; */
}
\ No newline at end of file
/* Default pages
------------------------------------*/
@page {
size: 17cm 24cm;
margin: 30mm 25mm;
......
/* Part - pages
------------------------------------*/
section.part {
page: part;
}
......
/* Title pages
------------------------------------*/
section.title {
page: title;
}
......
/* Table of content - pages
------------------------------------*/
section.toc {
page: toc;
}
......
......@@ -13,4 +13,5 @@
@import "page/bmbody.css";
@import "page/chapter.css";
@import "page/part.css";
/* @import "elements/demo.css"; */
......@@ -2,10 +2,10 @@
/* @import "theme/font.css"; */
/* theming of the book */
@import "theme/book.css";
/* @import "theme/book.css"; */
/* paged js specific css */
@import "layout/pagedjs/pagedjs.css";
/* specific for this book.css -- image size, etc. */
@import "theme/specific.css";
\ No newline at end of file
/* @import "theme/specific.css"; */
\ No newline at end of file
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