Commit fd93eea6 authored by julien's avatar julien

remove all preset styles to have a proper starting point

parent f04ee397
......@@ -8,12 +8,13 @@ module.exports = function(grunt) {
pkg: grunt.file.readJSON('package.json'),
// open : {
// default : {
// path: 'http://localhost:9000/dist/index.html',
// }
// },
// CSS Build
open : {
default : {
path: 'http://localhost:9000/dist/index.html',
}
},
postcss: {
options: {
map: {
......@@ -109,6 +110,6 @@ module.exports = function(grunt) {
//'serve',
grunt.registerTask('default', ['copy', 'postcss', 'connect', 'open', 'watch']);
grunt.registerTask('default', ['copy', 'postcss', 'connect', 'watch']);
};
\ No newline at end of file
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>
<div class="cover">
<h1>花男</h1>
<p>松本 大洋</p>
</div>
<h1>Welcome to your first paged media printed document!</h1>
<div class="colophon">
<p>The cover photo, taken by Steve Roe, comes from<br> <a href="https://unsplash.com/photos/bO9RJQ9J1mE">https://unsplash.com/photos/bO9RJQ9J1mE</a></p>
<p>the Kawaii font comes from <br><a href="http://font.spicy-sweet.com/">http://font.spicy-sweet.com/</a></p>
<p><em>happy times at the Ikob</em>, designed by Lucas Le Bihan is available from <br><a href="https://velvetyne.fr/fonts/happy-times/">https://velvetyne.fr/fonts/happy-times/</a></p>
<p><em>Lack</em>, designed by Adrien Midzic is available from <br><a href="https://velvetyne.fr/fonts/lack/">https://velvetyne.fr/fonts/lack/</a></p>
</div>
</body>
</html>
\ No newline at end of file
This diff is collapsed.
......@@ -7,25 +7,15 @@
@import "modules/vars.css";
/* Parts of the content */
@import "modules/body.css";
@import "modules/header.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";
/* @import "interface/baseline.css"; */
/* hack for stuff not implemented yet */
@import "interface/hack.css";
/* css for the layouts */
@import "modules/layout.css";
......
/* here come some simple hacks for features that are not yet in paged js */
/* 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);
......@@ -11,6 +10,7 @@
flex: 0;
flex-wrap: wrap;
margin: 0 auto;
margin-bottom: 3em;
}
.pagedjs_page {
background-color: var(--color-paper);
......@@ -25,13 +25,6 @@
}
/* show the margin-box */
.pagedjs_margin-content
{
box-shadow: 0 0 0 1px inset var(--color-marginBox);
}
/* uncomment for recto/verso book.
--------------------------------------------------- */
......@@ -48,7 +41,4 @@
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, cite, li {
font-size: var(--font-size);
line-height: var(--font-lineHeight);
text-align: justify;
margin: 0;
padding: 0;
/* hyphens: auto; */
widows: 2;
orphans: 2;
}
em,
.italic {
font-style: italic;
}
a {
font-family: var(--font-bodyLink);
color: currentColor;
text-decoration: none;
word-break: break-all;
&:hover {
color: var(--color-secondary);
border-bottom: 1px solid var(--color-secondary);
}
}
strong em {
font-weight: bold;
font-style: italic;
}
blockquote {
display: block;
margin-top: var(--font-lineHeight);
margin-bottom: var(--font-lineHeight);
margin-left: var(--indent-block);
margin-right: var(--indent-block);
cite, .caption{
font-style: italic;
margin-right: 12px;
&:before {
content: "– ";
}
}
p+p {
margin-top: 0
}
}
sup {
font-size: var(--font-size) * 0.5;
font-weight: inherit;
position: relative;
top: -3px;
vertical-align: baseline;
}
hr {
&:after {
content: "* * *";
display: block;
text-align: center;
}
break-before: avoid;
margin-top: calc(var(--font-lineHeight)*1.5);
margin-bottom: calc(var(--font-lineHeight)*1.5);
border: none;
}
.small-caps {
font-variant-caps: all-small-caps;
}
.old-style-figures {
font-feature-settings: "onum";
}
code {
/* font-size: 0.8em; */
background-color: var(--color-code);
font-family: var(--font-code);
font-size: calc(var(--font-size)*0.8);
line-height: 1;
font-weight: normal;
}
pre {
line-height: var(--font-lineHeight);
font-weight: normal;
display: block;
width: 100%;
white-space: pre-wrap;
word-break: break-all;
background-color: var(--color-code);
padding: calc(var(--font-lineHeight)*0.5) var(--indent-block);
margin: var(--font-lineHeight) 0;
}
\ No newline at end of file
/* to show example of how to add new fonts */
@font-face {
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-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: normal;
}
\ No newline at end of file
/* The ways all the titles appears */
h1 {
font-family: var(--font-head);
font-size: 5em;
line-height: calc(var(--font-lineHeight)*4);
margin: 0;
break-inside: avoid;
padding-bottom: calc(var(--font-lineHeight)*3);
/* snap to the baseline (depend of the font-family and the font-size) */
position: relative;
top: 6px;
}
h2 {
margin: 0;
font-family: var(--font-head);
font-size: 2.4em;
line-height: calc(var(--font-lineHeight)*2);
break-inside: avoid;
break-after: avoid;
margin-top: calc(var(--font-lineHeight)*1);
padding-top: calc(var(--font-lineHeight)*0.75);
padding-bottom: calc(var(--font-lineHeight)*1.25);
/* snap to the baseline (depend of the font-family and the font-size) */
position: relative;
top: 5px;
}
h3 {
margin: 0;
font-family: var(--font-head);
font-size: 1.1em;
line-height: calc(var(--font-lineHeight)*1);
break-inside: avoid;
break-after: avoid;
margin-top: calc(var(--font-lineHeight)*1);
padding-top: calc(var(--font-lineHeight)*0.5);
padding-bottom: calc(var(--font-lineHeight)* 0.5);
}
h4 {
margin: 0;
font-family: var(--font-body);
font-style: italic;
font-weight: normal;
line-height: calc(var(--font-lineHeight)*1);
break-inside: avoid;
break-after: avoid;
margin-top: calc(var(--font-lineHeight)*1);
}
h3 + h4 {
margin-top: 0;
}
\ No newline at end of file
/* set the running header from the html */
.running-left {
string-set: leftTitleRun content(text);
}
.running-right {
string-set: rightTitleRun content(text);
}
/* layout for all the pages
------------------------------------------------- */
@page {
margin-top: 68px;
margin-bottom: 80px;
size: A5;
}
/* blank page
------------------------------------------ */
@page :blank {
@top-left-corner{ content: none; }
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@top-right-corner{ content: none; }
@right-top{ content: none; }
@right-middle{ content: none; }
@right-bottom{ content: none; }
@bottom-right-corner{ content: none; }
@bottom-right{ content: none; }
@bottom-center{ content: none; }
@bottom-left{ content: none; }
@bottom-left-corner{ content: none; }
@left-bottom{ content: none; }
@left-middle{ content: none; }
@left-top{ content: none; }
}
/* right page
------------------------------------------------- */
@page:right {
margin-left: 2cm;
margin-right: 4cm;
@bottom-right {
content: string(rightTitleRun, first) " — " counter(page);
font-family: var(--font-head);
color: var(--color-three);
margin-top: -11px;
}
}
/* left page
------------------------------------------------- */
@page:left {
margin-left: 3cm;
margin-right: 2cm;
@bottom-left {
content: counter(page) " — " string(leftTitleRun, first) ;
font-family: var(--font-head);
color: var(--color-three);
margin-top: -11px;
}
}
/* 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;
writing-mode: vertical-rl;
color: gold;
margin-left: 80mm;
}
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;
margin-left: 80mm;
}
}
/* layout for the cover page
------------------------------------------------- */
@page cover {
margin-top: 20mm;
background: url(../images/steve-roe-776240-unsplash.jpg);
background-size: cover;
color: white;
@top-left-corner{ content: none; }
@top-left{ content: none; }
@top-center{ content: none; }
@top-right{ content: none; }
@top-right-corner{ content: none; }
@right-top{ content: none; }
@right-middle{ content: none; }
@right-bottom{ content: none; }
@bottom-right-corner{ content: none; }
@bottom-right{ content: none; }
@bottom-center{ content: none; }
@bottom-left{ content: none; }
@bottom-left-corner{ content: none; }
@left-bottom{ content: none; }
@left-middle{ content: none; }
@left-top{ content: none; }
}
/* 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 colophon {
margin-top: 40mm;
font-family: var(--font-body);
background: gold;
color: white;
}
size: A4;
margin: 20mm;
}
\ No newline at end of file
/* list */
ul, ol {
margin: 0;
padding: 0;
text-indent: 0;
margin-left: var(--indent-block);
margin-bottom: calc(var(--font-lineHeight)*0.5);
margin-top: calc(var(--font-lineHeight)*0.5);
hyphens: none;
list-style-position: outside;
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
li {
text-align: left;
}
}
/* // unordered list */
ul {
list-style-type: bullet;
}
\ 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;
/* max-height: calc(var(--page-height)/3); */
figcaption {
font-size: 12px;
font-style: normal;
text-indent: 0;
text-align: left;
font-size: 8pt;
line-height: 11pt;
&:before {
font-style: italic;
}
}
img {
margin-top: 6px;
margin-bottom: 1px;
width: 100%;
}
}
#img-1{
/* height: calc(var(--font-lineHeight)*14 + 6px); */
}
\ No newline at end of file
/* table */
table {
font-family: var(--font-head);
font-size: 0.8em;
line-height: var(--font-lineHeight);
page-break-inside: avoid;
border-collapse: collapse;
border-top: 1pt solid var(--color-tableBody);
border-bottom: 1pt solid var(--color-tableBody);
border-left: 0;
border-right: 0;
width: 100%;
padding: 0;
margin-top: calc(var(--font-lineHeight)*1.5 - 2px);
margin-bottom: calc(var(--font-lineHeight)*2.5);
}
th {
text-align: center;
padding: 0;
font-weight: normal;
}
td {
text-align: right;
padding: 0;
}
caption, .table-caption {
text-align: center;
margin-bottom: calc(var(--font-lineHeight)*1);
}
tbody tr:first-of-type {
th, td{
padding-top: calc(var(--font-lineHeight)*0.5);
}
}
tbody tr:last-of-type {
th, td{
padding-bottom: calc(var(--font-lineHeight)*0.5);
}
}
thead {
border-bottom: 1pt solid var(--color-tableBody);
th{
padding-top: 6px;
padding-bottom: 9px;
}
}
tfoot{
border-top: 1pt solid var(--color-tableBody);
th{
padding-top: 6px;
padding-bottom: 9px;
}
}
\ No newline at end of file
:root {
/* 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);
......@@ -19,36 +8,19 @@
--color-paper: white;
/* color used for the baseline */
--color-baseline: red;
--color-baseline: transparent;
/* fonts for the book */
--font-body: "happy";
--font-head: "lack";
--font-title: "lack";
--font-code: "Courier New";
--font-japan: "ktegaki";
--font-smallCaps: "happy";
--font-bodyLink: var(--font-head);
/* colors */
--color-body: black;
--color-primary: red;
--color-secondary: darkred;
--color-tableBody: grey;
--color-code: HoneyDew;
/* list variables */
/* typographic related variables */
--font-size: 12px;
--font-lineHeight: 16px;
--indent-block: calc(var(--font-lineHeight)*2);
/* height of the x for the font labeur (for image calculation) */
--height-x: 6px;
}
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