Commit 650c64c4 authored by julientaq's avatar julientaq

first-commit: basic styling

parents
node_modules
dist
module.exports = function(grunt) {
require('time-grunt')(grunt);
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// CSS Build
postcss: {
options: {
map: {
// inline: false,
// annotation: 'dist/css/maps/'
},
processors: [
require('postcss-import')(),
// require('postcss-css-variables')(),
require('pixrem')(),
require('postcss-color-function')(),
require('postcss-nested')(),
require('postcss-merge-rules')(),
// require('autoprefixer-core')('last 1 version'),
require('postcss-discard-comments')({
removeAll: true
}),
// require('cssnano')()
]
},
dist: {
src: 'src/css/book.css',
dest: 'dist/css/book.css'
}
},
copy: {
main: {
expand: true,
cwd: 'src/js',
src: '**',
dest: 'dist/js/',
},
html: {
expand: true,
cwd: 'src/content',
src: '**/*.html',
dest: 'dist/',
},
img: {
expand: true,
cwd: 'src/img',
src: '**',
dest: 'dist/img/',
},
fonts: {
expand: true,
cwd: 'src/fonts',
src: '**',
dest: 'dist/fonts'
}
},
// Server Run
connect: {
server: {
options: {
port: 9000,
// base: 'www-root'
}
}
},
livereload: {
options: {
port: 9000,
base: 'index.html'
},
},
watch: {
css: {
files: 'src/css/**/*.css',
tasks: ['postcss'],
options: {
livereload: true
},
},
copy: {
files: 'src/**/*',
tasks: ['copy'],
options: {
livereload: true
},
},
}
});
//'serve',
grunt.registerTask('default', ['copy', 'postcss', 'connect', 'watch']);
};
\ No newline at end of file
# Print styles for the lumino collection using Book.js
This repo contains all the source file for the pubsweet book, from the html exported from editoria, to the css needed for paged.js to render the book.
## to test the book
1. clone the repo using git clone,
2. run `npm install` inside the cloned folder
3. run `grunt` in the terminal and browse the `localhost:9000` in chrome or chromium.
## later
This will be a tool to build styles for the books made with [Editoria](www.editoria.pub)
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "bookStyler",
"version": "0.0.1",
"description": "Framework to develop books using html and css using html, grunt and postcss plugins",
"main": "Gruntfile.js",
"dependencies": {
"grunt": "^1.0.3"
},
"devDependencies": {
"autoprefixer-core": "^6.0.1",
"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-postcss": "^0.9.0",
"load-grunt-tasks": "^4.0.0",
"pixrem": "^4.0.1",
"postcss-center": "^1.1.0",
"postcss-color-function": "^4.0.1",
"postcss-color-rgba-fallback": "^3.0.0",
"postcss-css-variables": "^0.9.0",
"postcss-discard-comments": "^4.0.0",
"postcss-font-magician": "^2.2.1",
"postcss-import": "^11.1.0",
"postcss-merge-rules": "^4.0.0",
"postcss-nested": "^3.0.0",
"postcss-simple-extend": "^1.0.0",
"postcss-simple-vars": "^4.1.0",
"time-grunt": "^1.4.0"
},
"scripts": {
"start": "npm i && grunt",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "Coko Foundation",
"license": "MIT"
}
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge"
http-equiv="X-UA-Compatible">
<title>Page Title</title>
<meta content="width=device-width, initial-scale=1"
name="viewport">
<link href="css/book.css" media="screen" rel="stylesheet" type="text/css">
<script src="js/paged.polyfill.js"></script>
</head>
<body>
<h1>Welcome to your first paged media printed document!</h1>
</body>
</html>
/* import your fonts if you have some in the src/fonts folder */
@import "modules/fonts.css";
/* theming of the book */
@import 'modules/reset.css';
@import "modules/vars.css";
@import "modules/header.css";
@import "modules/body.css";
@import "modules/list.css";
@import "modules/pictures.css";
@import "modules/table.css";
@import "modules/code.css";
/* paged js interface and screen view css */
@import "interface/interface.css";
/* baseline helper */
@import "interface/baseline.css";
/* hack for stuff not implemented yet */
@import "interface/hack.css";
/* css for the layouts */
@import "modules/layout.css";
/* adding a visual helper for the baseline grid */
:root {
/* you can change the grid step here */
--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);
}
}
\ No newline at end of file
/* simple break solution */
.break {
break-after: page;
}
/* data split */
/* hack for the justification of the first part of a paragraph splitted */
p[data-split-original="true"] {
text-align-last: justify;
}
/* To define how the book look on the screen: */
@media screen {
body {
background-color: var(--color-background);
}
.pagedjs_pages {
display: flex;
width: calc(var(--width) * 2);
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
}
.pagedjs_page {
background-color: var(--color-paper);
box-shadow: 0 0 0 2px var(--color-marginBox);
margin: 0;
flex-shrink: 0;
flex-grow: 0;
margin-top: 10mm;
}
.pagedjs_first_page {
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.
--------------------------------------------------- */
.pagedjs_pages {
flex-direction: column;
width: 100%;
}
.pagedjs_first_page {
margin-left: 0;
}
.pagedjs_page {
margin: 0 auto;
margin-top: 10mm;
}
}
\ No newline at end of file
/* General CSS for contents */
html {
font-family: var(--font-body);
font-weight: normal;
font-size: var(--font-size);
color: var(--color-body);
font-kerning: normal;
}
p {
font-size: var(--font-size);
line-height: var(--font-lineHeight);
text-align: justify;
margin: 0;
padding: 0;
hyphens: auto;
widows: 2;
orphans: 2;
}
p,
li {
strong,
.bold,
.Bold {
}
}
em,
.italic {
font-family: inherit;
font-style: var(--font-body)ItalicStyle;
font-weight: 400;
}
a {
color: var(--color-primary);
font-family: var(--font-body)Link;
font-weight: 400;
text-decoration: none;
font-style: inherit;
&:hover {
color: var(--color-secondary);
border-bottom: 2px solid var(--color-secondary);
}
}
strong em {
font-weight: bold;
font-style: italic;
}
blockquote {
display: block;
margin-top: 13pt;
margin-bottom: 12.8pt;
margin-left: 1pc;
p {
font-style: normal;
font-size: 12px;
line-height: 12.80pt;
text-indent: 0;
text-align: justify;
margin-top: 0;
}
p+p {
margin-top: 0
}
p:last-of-type {
}
}
sup {
font-size: var(--font-size) * 0.5;
font-weight: inherit;
position: relative;
top: -3px;
vertical-align: baseline;
}
.references p {
line-height: 16px;
font-size: 13px;
}
hr {
&:after {
content: "* * *";
height: 17px;
display: block;
text-align: center;
font-size: 9px;
letter-spacing: 1em;
}
break-before: avoid;
margin-top: 5px;
margin-bottom: 29px;
border: none;
&.ls {
height: 0px;
&:after {
content: "\2002";
}
}
}
.small-caps {
font-variant-caps: all-small-caps;
}
.old-style-figures {
font-feature-settings: "onum";
}
\ No newline at end of file
code {
font-size: 0.8em;
background: HoneyDew
}
pre {
padding: 1em 0;
font-family: var(--font-title);
display: block;
padding: 0;
width: 100%;
white-space: pre-wrap;
word-break: break-all;
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
@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-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-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;
}
\ No newline at end of file
/* The ways all the titles appears */
h1 {
font-family: var(--font-head);
/* font-size: 23px;
font-variant: all-small-caps;
text-transform: uppercase; */
line-height: calc(var(font-lineHeight) * 3);
margin: 0;
}
h2 {
font-family: var(--font-head);
font-size: 12px;
break-inside: avoid;
break-after: avoid;
font-weight: 400;
}
h3 {
font-family: var(--font-head);
font-size: 12px;
line-height: 17px;
font-style: italic;
margin: 0 auto;
max-width: 361px;
text-align: center;
font-weight: 400;
em {
font-style: normal;
}
&+p {
text-indent: 0;
}
}
h4 {
font-family: var(--font-head);
font-size: 13px;
line-height: 13pt;
margin-top: 26pt;
font-style: italic;
text-align: left;
display: inline-bloc;
}
\ No newline at end of file
/* 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;
font-size: 9pt;
line-height: 17px;
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;
font-size: 9pt;
line-height: 17px;
letter-spacing: 0.05em
}
/* page breaks */
.part header {
/* break-before: page; */
}
.part {
/* send the first chapter after each part page on a right one */
break-after: right;
}
.chapter header {
/* break-before: page; */
}
@page {
size: var(--width) var(--height);
margin: var(--font-lineHeight * 4) var(--font-lineHeight * 8) ;
}
\ No newline at end of file
/* list */
ul,
ol {
margin: 0;
padding: 0;
text-indent: 0;
ul,
ol {
margin-left: 2.1em;
}
p {
text-indent: 0;
text-align: left;
hyphens: none
}
}
/* // numbering here */
ol,
ul {
list-style-position: outside;
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
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;
}
}
li {
margin-left: 1.5em;
/* // margin-left: 1em; */
}
&>li:first-of-type {
margin-top: 17px;
/* // background: red; */
}
li:nth-of-type(n + 9) {
margin-left: 1.5em;
}
}
/* // unordered list */
ul {
margin-left: 1.5em;
li {
list-style-type: bullet;
list-style-position: outside;
}
}
\ No newline at end of file
figure {
margin: 0;
text-indent: 0;
padding: 0;
page-break-inside: avoid;
width: 100%;
text-align: center;
margin-bottom: 0pt;
float-reference: column;
float: top;
float-defer: last;
figcaption {
font-size: 12px;
font-style: normal;
text-indent: 0;
text-align: left;
/* // counter-increment: map; */
font-size: 8pt;
line-height: 11pt;
&:before {
font-style: italic;
}
}
img {
width: 100%;
/* // margin-top: 13pt; */
}
}
\ No newline at end of file
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
// line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**