Commit 3fa27c77 authored by julientaq's avatar julientaq

first example + ready to use bookstyler

parent 650c64c4
node_modules
dist
.vscode
\ No newline at end of file
......@@ -9,12 +9,16 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'),
// CSS Build
open : {
default : {
path: 'http://localhost:9000/dist/index.html',
}
},
postcss: {
options: {
map: {
// inline: false,
// annotation: 'dist/css/maps/'
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('postcss-import')(),
......@@ -52,9 +56,9 @@ module.exports = function(grunt) {
},
img: {
expand: true,
cwd: 'src/img',
cwd: 'src/images',
src: '**',
dest: 'dist/img/',
dest: 'dist/images/',
},
fonts: {
expand: true,
......@@ -76,7 +80,7 @@ module.exports = function(grunt) {
livereload: {
options: {
port: 9000,
base: 'index.html'
// base: 'dist/index.html'
},
},
......@@ -105,6 +109,6 @@ module.exports = function(grunt) {
//'serve',
grunt.registerTask('default', ['copy', 'postcss', 'connect', 'watch']);
grunt.registerTask('default', ['copy', 'postcss', 'connect', 'open', 'watch']);
};
\ No newline at end of file
This diff is collapsed.
......@@ -11,6 +11,7 @@
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "git+https://github.com/gruntjs/grunt-contrib-copy.git",
"grunt-contrib-watch": "^1.1.0",
"grunt-open": "^0.2.3",
"grunt-postcss": "^0.9.0",
"load-grunt-tasks": "^4.0.0",
"pixrem": "^4.0.1",
......
This diff is collapsed.
......@@ -12,6 +12,7 @@
</head>
<body>
<h1>Welcome to your first paged media printed document!</h1>
<h1>Start to add your content here</h1>
</body>
</html>
/* adding a visual helper for the baseline grid */
:root {
/* you can change the grid step here */
--baseline: var(--font-lineHeight);
/* you can change the line-height step for the grid here (as it may not be the same that the lineheight) */
--baseline: var(--font-lineHeight);
}
@media screen {
.pagedjs_page {
background: linear-gradient( white 0%, white 90%, var(--color-baseline) 90%, var(--color-baseline) 100%);
background-size: 100% var(--baseline);
background-repeat: repeat-y;
background-position-y: var(--margin-head);
}
.pagedjs_page {
background: linear-gradient( var(--color-paper) 0%, var(--color-paper) 90%, var(--color-baseline) 90%, var(--color-baseline) 100%), var(--color-paper);
background-size: 100% var(--baseline);
background-repeat: repeat-y;
background-position-y: var(--margin-head);
}
}
\ No newline at end of file
/* here come some simple hacks for features that are not yet in paged js */
/* simple break solution */
......
......@@ -14,7 +14,7 @@
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-marginBox);
box-shadow: 0 0 0 2px var(--color-pageBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
......@@ -35,7 +35,7 @@
/* uncomment for recto/verso book.
--------------------------------------------------- */
.pagedjs_pages {
/* .pagedjs_pages {
flex-direction: column;
width: 100%;
}
......@@ -47,6 +47,6 @@
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
} */
}
\ No newline at end of file
......@@ -112,4 +112,8 @@ hr {
.old-style-figures {
font-feature-settings: "onum";
}
a {
word-break: break-all;
}
\ No newline at end of file
code {
font-size: 0.8em;
background: HoneyDew
}
font-size: 0.8em;
background: HoneyDew
}
pre {
pre {
padding: 1em 0;
font-family: var(--font-title);
display: block;
......@@ -12,12 +11,9 @@ code {
width: 100%;
white-space: pre-wrap;
word-break: break-all;
background: HoneyDew ;
background: HoneyDew;
font-size: 0.8em;
line-height: var(--font-lineHeight);
margin: 17px 0 23px;
padding: 6px 5px 11px 5px;
}
\ No newline at end of file
margin: 17px 0 23px;
padding: 6px 5px 11px 5px;
}
\ No newline at end of file
/* to show example of how to add new fonts */
@font-face {
font-family: 'lack';
src: url('../fonts/Lack-Italic.woff2') format('woff2'), url('../fonts/Lack-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
font-family: 'ktegaki';
src: url('../fonts/ktegaki-web.woff2') format('woff2'),
url('../fonts/ktegaki-web.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lack';
src: url('../fonts/Lack-Italic.woff2') format('woff2'), url('../fonts/Lack-Italic.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'lack';
src: url('../fonts/Lack-Regular.woff2') format('woff2'), url('../fonts/Lack-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-family: 'lack';
src: url('../fonts/Lack-Regular.woff2') format('woff2'), url('../fonts/Lack-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'happy';
src: url('../fonts/happy-times-at-the-ikob_italic-webfont.woff2') format('woff2'), url('../fonts/happy-times-at-the-ikob_italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
font-family: 'happy';
src: url('../fonts/happy-times-at-the-ikob_italic-webfont.woff2') format('woff2'), url('../fonts/happy-times-at-the-ikob_italic-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'happy';
src: url('../fonts/happy-times-at-the-ikob-webfont.woff2') format('woff2'), url('../fonts/happy-times-at-the-ikob-webfont.woff') format('woff');
font-weight: 400;
font-style: italic;
font-family: 'happy';
src: url('../fonts/happy-times-at-the-ikob-webfont.woff2') format('woff2'), url('../fonts/happy-times-at-the-ikob-webfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
\ No newline at end of file
/* the booktitle is set once in the book */
.booktitle {
position: running(bookTitleRun);
/* set the running header from the html */
.running-left {
display: none;
string-set: leftTitleRun content(text);
}
.running-right {
display: none;
string-set: rightTitleRun content(text);
}
/* 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;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
/* layout for all the pages
------------------------------------------------- */
@page {
size: A5;
}
/* The running-part class is the duplicated chapter title for the running headers */
/* blank page
------------------------------------------ */
@page :blank {
@bottom-right {
content: none;
}
@bottom-left {
content: none;
}
background: white;
}
/* right page
------------------------------------------------- */
.running-part {
position: running(partTitleRun);
font-variant: all-small-caps;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
@page:right {
margin: 2cm 3cm;
@bottom-right {
content: string(rightTitleRun, first) " — " counter(page);
font-family: var(--font-head);
color: var(--color-three);
margin-top: -11px;
}
}
/* left page
------------------------------------------------- */
/* page breaks */
.part header {
/* break-before: page; */
@page:left {
margin: 2cm 3cm;
@bottom-left {
content: counter(page) " — " string(leftTitleRun, first) ;
font-family: var(--font-head);
color: var(--color-three);
margin-top: -11px;
}
}
.part {
/* send the first chapter after each part page on a right one */
/* style for the cover page
------------------------------------------------- */
.cover {
page: cover;
break-after: right;
h1 {
font-family: var(--font-japan);
font-style: normal;
font-weight: normal;
font-size: 12em;
margin-left: 1.3em;
writing-mode: vertical-rl;
color: gold;
}
p {
font-family: var(--font-japan);
font-style: normal;
font-weight: normal;
text-align: right;
writing-mode: vertical-rl;
color: gold;
font-size: 3.5em;
margin-top: 2em;
}
}
.chapter header {
/* break-before: page; */
/* layout for the cover page
------------------------------------------------- */
@page cover {
margin-top: 40mm;
@bottom-left {
content: none;
}
@bottom-right {
content: none;
}
background: url(../images/steve-roe-776240-unsplash.jpg);
background-size: cover;
@top-center {
content: none;
}
@bottom-center {
content: none;
}
color: white;
}
/* style for the colophon page
------------------------------------------------- */
.colophon {
page: colophon;
color: white;
p {
font-family: var(--font-japan);
font-style: normal;
font-weight: normal;
text-align: right;
text-align: center;
margin-bottom: 3em;
}
}
/* layout for the colophon page
------------------------------------------------- */
@page {
size: var(--width) var(--height);
margin: var(--font-lineHeight * 4) var(--font-lineHeight * 8) ;
}
\ No newline at end of file
@page colophon {
margin-top: 40mm;
font-family: var(--font-body);
background: gold;
color: white;
}
......@@ -16,7 +16,6 @@ ol {
}
}
/* // numbering here */
ol,
ul {
......@@ -26,11 +25,8 @@ ul {
lh.lpti {
margin-left: 1.5em;
letter-spacing: 1px;
/* // margin-top: 10px; */
/* // margin-bottom: 3px; */
margin-top: 16px;
margin-bottom: 2px;
@extend .small-caps;
display: block;
&+li {
margin-top: 0;
......
:root {
/* @page size can't use variable yet but it's used by the interface css */
--width: 110mm;
--height: 210mm;
/* size for the page */
--page-width: 110mm;
--page-height: 210mm;
--page-orientation: landscape;
/* margin for the page */
--margin-left: 5mm;
--margin-right: 10mm;
--margin-top: 30mm;
--margin-bottom: 30mm;
/* color for the interface */
--color-background: rgba(0, 0, 0, 0.2);
--color-marginBox: rgba(0, 0, 0, 0.4);
--color-marginBox: grey;
--color-pageBox: grey;
--color-marginBox: transparent;
--color-pageBox: transparent;
--color-paper: white;
--color-baseline: cyan;
/* color used for the baseline */
--color-baseline: transparent;
/* margin for the book. Not yet usable in the @page properties */
--margin-inside: 30mm;
--margin-outside: 30mm;
--margin-head: 30mm;
--margin-foot: 30mm;
/* fonts for the book */
--font-body: "happy";
--font-body: "happy";
--font-body: "Spectral";
--font-head: "lack";
--font-title: "lack";
--font-code: "Courier New";
--font-toc: "happy";
--font-japan: "ktegaki";
--font-smallCaps: "happy";
--font-bodyLink: var(--font-head);
/* color */
/* colors */
--color-body: black;
--color-primary: black;
--color-primaryPre: black;
--color-primary: red;
--color-secondary: darkred;
--color-link: black;
--color-four: black;
--color-tableBody: grey;
/* list variables */
--font-size: 12px;
--font-lineHeight: 24px;
--font-lineHeight: 16px;
}
@media print {
--color-marginBox: transparent;
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
......@@ -51,7 +51,7 @@
var max = Math.max;
var shim$1 = function (dest, src /*, ...srcn*/) {
var shim$1 = function (dest, src /*, srcn*/) {
var error, i, length = max(arguments.length, 2), assign;
dest = Object(validValue(dest));
assign = function (key) {
......@@ -81,7 +81,7 @@
};
// eslint-disable-next-line no-unused-vars
var normalizeOptions = function (opts1 /*, ...options*/) {
var normalizeOptions = function (opts1 /*, options*/) {
var result = create(null);
forEach.call(arguments, function (options) {
if (!isValue(options)) return;
......@@ -25648,7 +25648,7 @@
, splice = Array.prototype.splice;
// eslint-disable-next-line no-unused-vars
var remove = function (itemToRemove /*, ...item*/) {
var remove = function (itemToRemove /*, item*/) {
forEach$1.call(
arguments,
function (item) {
......
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