Commit d13b5bc6 authored by julien's avatar julien

tried some columns and float

parent 8fa65a24
@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;
}
@font-face{
font-family:'garcia';
src:url('../fonts/Garcia.otf');
font-weight:400;
font-style:normal;
}
@font-face{
font-family:'caveat';
src:url('../fonts/Caveat-Regular.ttf') format('opentype');
font-weight:400;
font-style:normal;
}
@font-face{
font-family:'caveat';
src:url('../fonts/Caveat-Bold.ttf') format('opentype');
font-weight:600;
font-style:normal;
}
html{
//line-height:1.15;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
}
body{
margin:0;
}
article,
aside,
footer,
header,
nav,
section{
display:block;
}
h1{
font-size:2em;
margin:0.67em 0;
}
figcaption,
figure,
main{
display:block;
}
figure{
margin:1em 40px;
}
hr{
box-sizing:content-box;
height:0;
overflow:visible;
}
pre{
font-family:monospace, monospace;
font-size:1em;
}
a{
background-color:transparent;
-webkit-text-decoration-skip:objects;
}
abbr[title]{
border-bottom:none;
text-decoration:underline;
text-decoration:underline dotted;
}
b,
strong{
font-weight:inherit;
font-weight:bolder;
}
code,
kbd,
samp{
font-family:monospace, monospace;
font-size:1em;
}
dfn{
font-style:italic;
}
mark{
background-color:#ff0;
color:#000;
}
small{
font-size:80%;
}
sub,
sup{
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline;
}
sub{
bottom:-0.25em;
}
sup{
top:-0.5em;
}
audio,
video{
display:inline-block;
}
audio:not([controls]){
display:none;
height:0;
}
img{
border-style:none;
}
svg:not(:root){
overflow:hidden;
}
button,
input,
optgroup,
select,
textarea{
font-family:sans-serif;
font-size:100%;
line-height:1.15;
margin:0;
}
button,
input{
overflow:visible;
}
button,
select{
text-transform:none;
}
button, html [type="button"], [type="reset"], [type="submit"]{
-webkit-appearance:button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{
border-style:none;
padding:0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{
outline:1px dotted ButtonText;
}
fieldset{
padding:0.35em 0.75em 0.625em;
}
legend{
box-sizing:border-box;
color:inherit;
display:table;
max-width:100%;
padding:0;
white-space:normal;
}
progress{
display:inline-block;
vertical-align:baseline;
}
textarea{
overflow:auto;
}
[type="checkbox"],
[type="radio"]{
box-sizing:border-box;
padding:0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{
height:auto;
}
[type="search"]{
-webkit-appearance:textfield;
outline-offset:-2px;
}
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration{
-webkit-appearance:none;
}
::-webkit-file-upload-button{
-webkit-appearance:button;
font:inherit;
}
details, menu{
display:block;
}
summary{
display:list-item;
}
canvas{
display:inline-block;
}
template,[hidden]{
display:none;
}
:root{
--color-background:rgba(0, 0, 0, 0.2);
--color-marginBox:transparent;
--color-pageBox:transparent;
--color-paper:white;
--color-svg:var(--color-secondary);
--color-baseline:red;
--baseline:var (--font-lineHeight);
--font-body:"happy";
--font-head:"garcia";
--font-title:"garcia";
--font-code:"Courier New";
--font-japan:"ktegaki";
--font-hand:"caveat";
--font-smallCaps:"happy";
--font-bodyLink:var(--font-head);
--color-body:#333333;
--color-primary:#3E8E8F;
--color-secondary:#E68A35;
--color-third:#ab804b;
--color-tableBody:grey;
--color-code:HoneyDew;
--font-size:14px;
--font-lineHeight:18px;
--indent-block:calc(var(--font-lineHeight) * 2);
--height-x:6px;
}
.dup{
string-set:chaptertitle content(text);
display:none;
}
.booktitle{
string-set:booktitle content(text);
}
.booktitle,.beginning{
display:none;
}
[data-type="front"]{
page:front;
}
[data-type="chapter"]{
page:chapter;
}
[data-type="back"]{
page:back;
}
figure,img{
margin:0;
}
html{
font-family:var(--font-body);
font-weight:normal;
color:var(--color-body);
font-kerning:normal;
}
html,p, cite, li{
font-size:var(--font-size);
}
p, cite, li{
line-height:var(--font-lineHeight);
text-align:justify;
margin:0;
padding:0;
widows:2;
orphans:2;
}
p + p{
text-indent:2em;
}
p + p::first-letter{
color:var(--color-secondary);
}
em,
.italic{
font-style:italic;
}
a{
font-family:var(--font-bodyLink);
color:currentColor;
text-decoration:none;
word-break:break-all;
}
a: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);
}
blockquote cite, blockquote .caption{
font-style:italic;
margin-right:12px;
}
blockquote cite:before, blockquote .caption:before{
content:"– ";
}
blockquote p+p{
margin-top:0
}
sup{
font-size:var(--font-size) * 0.5;
font-weight:inherit;
position:relative;
top:-3px;
vertical-align:baseline;
}
hr{
break-before:avoid;
margin-top:calc(var(--font-lineHeight)*1.5);
margin-bottom:calc(var(--font-lineHeight)*1.5);
border:none;
}
hr:after{
}
.small-caps{
font-variant-caps:all-small-caps;
}
.old-style-figures{
font-feature-settings:"onum";
}
h1{
font-weight:400;
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);
}
h2{
font-size:2.4em;
line-height:calc(var(--font-lineHeight)*2);
position:relative;
top:5px;
}
h2,h3{
font-weight:400;
margin:0;
font-family:var(--font-head);
break-inside:avoid;
break-after:avoid;
margin-top:calc(var(--font-lineHeight)*1);
}
h3{
font-size:1.1em;
padding-top:calc(var(--font-lineHeight)*0.5);
padding-bottom:calc(var(--font-lineHeight)* 0.5);
}
h3,h4{
line-height:calc(var(--font-lineHeight)*1);
}
h4{
font-weight:400;
margin:0;
font-family:var(--font-body);
font-style:italic;
font-weight:normal;
break-inside:avoid;
break-after:avoid;
margin-top:calc(var(--font-lineHeight)*1);
}
h3 + h4{
font-weight:400;
}
h3 + h4,p.cst{
margin-top:0;
}
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";
}
ul li, ol li{
text-align:left;
}
ul{
list-style-type:bullet;
}
figure{
margin:0;
text-indent:0;
padding:0;
page-break-inside:avoid;
width:100%;
text-align:center;
margin-bottom:0pt;
}
figure figcaption{
font-size:12px;
font-style:normal;
text-indent:0;
text-align:left;
font-size:8pt;
line-height:11pt;
}
figure figcaption:before{
font-style:italic;
}
figure img{
width:100%;
}
#img-1{
}
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%;
margin-top:calc(var(--font-lineHeight)*1.5 - 2px);
margin-bottom:calc(var(--font-lineHeight)*2.5);
}
table,th{
padding:0;
}
th{
text-align:center;
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, tbody tr:first-of-type td{
padding-top:calc(var(--font-lineHeight)*0.5);
}
tbody tr:last-of-type th, tbody tr:last-of-type td{
padding-bottom:calc(var(--font-lineHeight)*0.5);
}
thead{
border-bottom:1pt solid var(--color-tableBody);
}
thead th{
padding-top:6px;
padding-bottom:9px;
}
tfoot{
border-top:1pt solid var(--color-tableBody);
}
tfoot th{
padding-top:6px;
padding-bottom:9px;
}
code{
font-family:var(--font-code);
font-size:calc(var(--font-size)*0.8);
line-height:1;
}
code,pre{
background-color:var(--color-code);
font-weight:normal;
}
pre{
line-height:var(--font-lineHeight);
display:block;
width:100%;
white-space:pre-wrap;
word-break:break-all;
padding:calc(var(--font-lineHeight)*0.5) var(--indent-block);
margin:var(--font-lineHeight) 0;
}
@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-pageBox);
margin:0;
flex-shrink:0;
flex-grow:0;
margin-top:10mm;
}
.pagedjs_first_page{
margin-left:var(--width);
}
.pagedjs_margin-content{
box-shadow:0 0 0 1px inset var(--color-marginBox);
}
}
:root{
--baseline:var(--font-lineHeight);
}
@media screen{
.pagedjs_page{
background:linear-gradient( var(--color-paper) 0%, var(--color-paper) 94%, var(--color-baseline) 94%, var(--color-baseline) 100%), var(--color-paper);
background-size:100% var(--baseline);
background-repeat:repeat-y;
background-position-y:var(--margin-head);
background-position-y:8px;
}
}
.break{
break-after:page;
}
p[data-split-original="true"]{
text-align-last:justify;
}
.pagedjs_area{
}
.running-left{
string-set:leftTitleRun content(text);
}
.running-right{
string-set:rightTitleRun content(text);
}
.chapter-number{
display:none;
}
.ch-start{
visibility:hidden;
}
.dup{
string-set:chaptertitle content(text);
display:none;
}
.booktitle{
string-set:booktitle content(text);
}
.booktitle,.beginning{
display:none;
}
[data-type="front"]{
page:front;
}
[data-type="chapter"]{
page:chapter;
}
[data-type="back"]{
page:back;
}
figure,img{
margin:0;
}
@page{
margin:0;
size:letter;
margin:0.5in 1in 1in 2in;
}
@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;
}
}
@page chapter :left{
margin:48px 1in 1in 2in;
@bottom-center{
content:string(chaptertitle, first) " \002015 " counter(page);
font-family:var(--font-title);
font-variant:small-caps;
margin-top:0.2em;
}
}
@page chapter :right{
margin:48px 2in 1in 1in;
@bottom-center{
content:string(chaptertitle, first) " \002015 " counter(page);
font-family:var(--font-title);
font-variant:small-caps;
margin-top:0.2em;
}
}
@page chapter :first{
margin:112.5mm 1in 1in 2in;
@bottom-center{
content:counter(page);
font-family:var(--font-title);
font-variant:small-caps;
margin-top:0.2em;
}
}
[data-type="chapter"] h1.ct{
position:absolute;
bottom:151mm;
z-index:5;
line-height:0.9;
box-shadow:0 20px 0 0 white;
color:white;
text-shadow:1px 1px 0 0 var(--color-secodary);
padding:0 var(--margin-right) 0.5em 0;
margin-left:-9mm;
width:calc(var(--width) - var(--margin-right));
}
p.ct{
display:none;
}
p.cst{
font-family:var(--font-title);
color:var(--color-secondary);
text-align:left;
text-transform:uppercase;
position:absolute;
top:-30px;
margin-left:-5mm;
z-index:6;
}
p.cst::before{
content:' by ';
font-family:var(--font-body);
color:var(--color-body);
text-transform:lowercase;
font-style:italic;
}
.cst+figure img{
filter:grayscale();
object-fit:cover;
width:var(--width);
height:107mm;
}
.cst+figure{
position:absolute;
top:calc(var(--margin-top) * -1);
left:calc((var(--margin-left)) * -1);
color:var(--color-primary);
height:107mm;
}
.cst+figure::after{
position:absolute;
display:block;
background:var(--color-primary);
margin:0;
padding:0;
content:' ';
top:0;
left:0;