adding a print.css to start with when running the flask application
This commit is contained in:
parent
ae6f0f958b
commit
3e1eb39da0
679
web-interface/static/css/print.css
Normal file
679
web-interface/static/css/print.css
Normal file
@ -0,0 +1,679 @@
|
||||
:root{
|
||||
--font-size: 9pt;
|
||||
--line-height: 14pt;
|
||||
--small-font-size: 7.5pt;
|
||||
--small-line-height: 1.55;
|
||||
--first-indent: 7mm;
|
||||
--second-indent: 20mm;
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: "bitter";
|
||||
src: url(../fonts/Bitter-Medium.ttf);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "bitter";
|
||||
src: url(../fonts/Bitter-MediumItalic.ttf);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "bitter";
|
||||
src: url(../fonts/Bitter-Bold.ttf);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "bitter";
|
||||
src: url(../fonts/Bitter-BoldItalic.ttf);
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "bitter_semi";
|
||||
src: url(../fonts/Bitter-SemiBold.ttf);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "mono";
|
||||
src: url(../fonts/AnkaCoder-C75-r.ttf);
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "mono";
|
||||
src: url(../fonts/AnkaCoder-C75-i.ttf);
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
@font-face{
|
||||
font-family: "mono";
|
||||
src: url(../fonts/AnkaCoder-C75-b.ttf);
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* custom markers */
|
||||
|
||||
div.page-break{
|
||||
page-break-after: always;
|
||||
}
|
||||
div.column-break{
|
||||
break-after: column !important;
|
||||
}
|
||||
div.no-hyphens{
|
||||
hyphens: none !important;
|
||||
}
|
||||
|
||||
|
||||
/* general */
|
||||
|
||||
html, body{
|
||||
font-family: "bitter";
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
letter-spacing: 0.01em;
|
||||
hyphens: auto;
|
||||
/*-webkit-hyphenate-limit-chars: 8 2 4;*/ /* word length, minimum number of characters before and after the hyphen -- does not work in chrome */
|
||||
/*orphans: 2;*/
|
||||
/*widows: 2;*/
|
||||
}
|
||||
|
||||
@page{
|
||||
/*size: 152.4mm 228.6mm;*/ /* Size of the online PDF */
|
||||
/*size: 152mm 229mm;*/ /* Size listed in cover generator of Lightning Source */
|
||||
/*size: 164mm 237mm;*/ /* Size of the physical printed DB06 book */
|
||||
size: 152.4mm 228.6mm;
|
||||
|
||||
bleed: 3mm; /* required bleed by lightningsource */
|
||||
marks: crop cross;
|
||||
|
||||
@bottom-center{
|
||||
content: counter(page);
|
||||
font-size: 9.5pt;
|
||||
margin-top: -6mm;
|
||||
}
|
||||
}
|
||||
@page:right{
|
||||
margin: 14.758mm 18mm 21.225mm 29.125mm;
|
||||
}
|
||||
@page:left{
|
||||
margin: 14.758mm 29.125mm 21.225mm 18mm;
|
||||
}
|
||||
@page:right{
|
||||
/* running header: contribution title (h2) */
|
||||
@top-center{
|
||||
content: string(contributiontitle);
|
||||
font-size: 8pt;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5mm;
|
||||
}
|
||||
}
|
||||
@page:left{
|
||||
/* running header: section title (h1) */
|
||||
@top-center{
|
||||
content: element(sectiontitle);
|
||||
font-size: 8pt;
|
||||
text-transform: uppercase;
|
||||
margin-top: 5mm;
|
||||
}
|
||||
}
|
||||
@page section{
|
||||
@top-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@page section:first{
|
||||
@bottom-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
/* section title pages */
|
||||
@page:nth(28){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(29){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(98){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(99){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(160){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(161){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(204){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(205){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(256){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(257){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(312){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page:nth(313){
|
||||
background-color: lightgray;
|
||||
}
|
||||
@page contribution:first{
|
||||
/* exception for running-header on the first page of a contribution */
|
||||
@top-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@page:first{
|
||||
background-color: #b89ee6;
|
||||
|
||||
@top-center{
|
||||
content: none;
|
||||
}
|
||||
@bottom-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@page backcover{
|
||||
background-color: #b89ee6;
|
||||
|
||||
@top-center{
|
||||
content: none;
|
||||
}
|
||||
@bottom-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@page nomarks{
|
||||
|
||||
@top-center{
|
||||
content: none;
|
||||
}
|
||||
@bottom-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
@page:blank{
|
||||
|
||||
@top-center{
|
||||
content: none;
|
||||
}
|
||||
@bottom-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
/* for fullpage image contributions */
|
||||
@page fullpage{
|
||||
margin: 0 !important;
|
||||
|
||||
@top-center{
|
||||
content: none;
|
||||
}
|
||||
@bottom-center{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* sections -- page flows */
|
||||
|
||||
div.section{
|
||||
page: section;
|
||||
/* force an extra blank page before each section ... */
|
||||
page-break-before: always;
|
||||
}
|
||||
div.section.preface_and_introduction{
|
||||
/* reset this extra page break for the preface + introduction section (does not work?) */
|
||||
/*page-break-before: none !important;*/
|
||||
}
|
||||
div.section h1{
|
||||
/* ... and make sure that each section starts on the right */
|
||||
page-break-before: right;
|
||||
}
|
||||
|
||||
/* sub-sections -- page flows */
|
||||
|
||||
div.multi,
|
||||
div.preface,
|
||||
div.introduction,
|
||||
div.contribution{
|
||||
page-break-before: right;
|
||||
}
|
||||
div.preface,
|
||||
div.acknowledgements,
|
||||
div.introduction,
|
||||
div.contribution{
|
||||
page: contribution;
|
||||
}
|
||||
div.section.nomarks,
|
||||
div.section.toc{
|
||||
page: nomarks;
|
||||
}
|
||||
div.cover.second,
|
||||
div.multi,
|
||||
div.series{
|
||||
page-break-after: always;
|
||||
}
|
||||
div.appendix{
|
||||
page-break-before: always;
|
||||
}
|
||||
div.backcover{
|
||||
page-break-before: left;
|
||||
page: backcover;
|
||||
}
|
||||
|
||||
/* sub-sections -- lay-out rules */
|
||||
|
||||
div.cover,
|
||||
div.backcover{
|
||||
hyphens: none;
|
||||
margin: -10mm 0 0 20mm;
|
||||
}
|
||||
div.cover,
|
||||
div.cover ul li,
|
||||
div.backcover h2{
|
||||
font-size: 17pt;
|
||||
font-family: "bitter_semi";
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.025em;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
div.cover ul{
|
||||
padding: 0;
|
||||
margin: 2em 0;
|
||||
}
|
||||
div.cover ul li{
|
||||
list-style: none;
|
||||
margin-bottom: 0.1em !important;
|
||||
}
|
||||
div.cover.second,
|
||||
div.cover.second ul li{
|
||||
color: black;
|
||||
}
|
||||
div.backcover{
|
||||
}
|
||||
div.backcover h2{
|
||||
margin-left: 0;
|
||||
}
|
||||
div.backcover p{
|
||||
margin-bottom: 1em;
|
||||
color: white;
|
||||
}
|
||||
div.series{
|
||||
font-size: var(--small-font-size);
|
||||
line-height: var(--small-line-height);
|
||||
}
|
||||
div.series.about{
|
||||
width: 50%;
|
||||
}
|
||||
div.series.colophon{
|
||||
columns: 2 auto;
|
||||
column-gap: 5mm;
|
||||
column-fill: auto;
|
||||
height: 207mm;
|
||||
}
|
||||
|
||||
/* Table of Contents */
|
||||
div.toc *{
|
||||
font-size: var(--font-size);
|
||||
hyphens: none;
|
||||
}
|
||||
div.toc p:first-of-type{
|
||||
font-size: 17pt !important;
|
||||
font-family: "bitter_semi";
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.025em;
|
||||
margin: -10mm 0 1em 10mm !important;
|
||||
}
|
||||
div.toc a::before{
|
||||
content: target-counter(attr(href url), page);
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
|
||||
/* right aligned */
|
||||
/* margin-left: -22mm;
|
||||
text-align: right;
|
||||
width: 15mm;*/
|
||||
|
||||
/* right aligned */
|
||||
margin-left: -13mm;
|
||||
width: 13mm;
|
||||
}
|
||||
div.toc p{
|
||||
margin-top: 1em;
|
||||
}
|
||||
div.toc ul{
|
||||
margin: 1em 0 0 4em;
|
||||
}
|
||||
div.toc ul li{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
/* forcing "Signs of clandestine" in toc to next page */
|
||||
div.toc ul:nth-of-type(5) {
|
||||
page-break-before: avoid;
|
||||
}
|
||||
|
||||
/* disabling wiki-only entries */
|
||||
|
||||
div.toc ul:nth-of-type(2) li:last-of-type {
|
||||
/* The Extended Trans*feminist Rendering Program */
|
||||
display: none;
|
||||
}
|
||||
div.toc ul:nth-of-type(3) li:last-of-type {
|
||||
/* Comprehensive Features */
|
||||
display: none;
|
||||
}
|
||||
div.toc ul:nth-of-type(4) li:nth-of-type(3) {
|
||||
/* somatopologies: a guided tour II */
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.introduction,
|
||||
div.contribution{
|
||||
}
|
||||
div.introduction h1{
|
||||
display: none;
|
||||
}
|
||||
div.contribution h2 + p > b{
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
div.item_index{
|
||||
hyphens: none;
|
||||
}
|
||||
div.item_index ul{
|
||||
column-gap: 10mm;
|
||||
}
|
||||
div.item_index li{
|
||||
text-indent: -6mm;
|
||||
}
|
||||
div.item_index li a::after{
|
||||
/* This counter stops the pagination of the last pages of the book..... */
|
||||
content: target-counter(attr(href), page);
|
||||
font-weight: bold;
|
||||
}
|
||||
div.item_index li span.item_nr{
|
||||
width: 10mm;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Invasive imagination and its agential cuts - figures */
|
||||
div.two-columns{
|
||||
columns: 2 auto;
|
||||
column-fill: auto;
|
||||
}
|
||||
div.two-columns div.thumb img{
|
||||
width: 50mm !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* general elements*/
|
||||
|
||||
h1{
|
||||
/* section titles */
|
||||
font-size: 37pt;
|
||||
line-height: 1.15;
|
||||
margin: 0;
|
||||
word-break: normal;
|
||||
hyphens: none;
|
||||
}
|
||||
/* h1's are followed by a <span class="running-header-section"></span> */
|
||||
.running-header-section{
|
||||
position: running(sectiontitle);
|
||||
}
|
||||
h2{
|
||||
/* Contribution titles */
|
||||
string-set: contributiontitle content(text) !important;
|
||||
font-family: "bitter_semi";
|
||||
font-size: 16pt;
|
||||
line-height: 22pt;
|
||||
letter-spacing: 0.025em;
|
||||
margin: -1em 0 1em var(--second-indent);
|
||||
hyphens: none;
|
||||
}
|
||||
/* author names */
|
||||
div.preface h2,
|
||||
div.introduction h2,
|
||||
div.contribution h2{
|
||||
margin-bottom: 0.5em !important;
|
||||
}
|
||||
div.preface h2 + p,
|
||||
div.introduction h2 + p,
|
||||
div.contribution h2 + p{
|
||||
margin-left: var(--second-indent);
|
||||
font-weight: normal;
|
||||
}
|
||||
div.preface h2 + p > b,
|
||||
div.introduction h2 + p > b,
|
||||
div.contribution h2 + p > b{
|
||||
font-weight: normal !important;
|
||||
}
|
||||
/* introduction running-header exception */
|
||||
.running-header-contribution{
|
||||
string-set: contributiontitle content(text) !important;
|
||||
display: none;
|
||||
}
|
||||
h3{
|
||||
/* Sub-headers + Notes/References sections + TOC headers*/
|
||||
font-size: 100%;
|
||||
page-break-after: avoid;
|
||||
margin: 1em 0 0 var(--second-indent);
|
||||
letter-spacing: 0.05em;
|
||||
hyphens: none;
|
||||
}
|
||||
/*This is for the Notes sections only, but how to apply it? */
|
||||
/*h3{
|
||||
margin: 1em 0 0 10px;
|
||||
}*/
|
||||
h4{
|
||||
/* Sub-sub-headers */
|
||||
font-size: 100%;
|
||||
page-break-after: avoid;
|
||||
margin: 1em 0 1em var(--first-indent);
|
||||
hyphens: none;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
/*text-decoration: underline;*/
|
||||
}
|
||||
h5, h6{
|
||||
margin: 0 0 1em 0;
|
||||
page-break-after: avoid;
|
||||
hyphens: none;
|
||||
}
|
||||
p{
|
||||
text-indent: var(--first-indent);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* all exceptions on the text-indent */
|
||||
div.toc p,
|
||||
h2 + p, /* author name */
|
||||
h2 + p,
|
||||
h2 + p + p + blockquote + p,
|
||||
div.contribution h2 + p + p + div.thumb,
|
||||
div.contribution h2 + p + p + div.thumb + p,
|
||||
div.contribution h2 + p + div.thumb,
|
||||
h3 + p,
|
||||
h3 + div.thumb + p,
|
||||
h4 + p,
|
||||
div.series p,
|
||||
div.cover p,
|
||||
div.biographies p,
|
||||
div.previously_published p,
|
||||
div.backcover p,
|
||||
blockquote p,
|
||||
pre + p,
|
||||
blockquote + p{
|
||||
text-indent: unset !important;
|
||||
}
|
||||
div.previously_published p,
|
||||
div.biographies p,
|
||||
div.series p{
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
div.contribution ul > li{
|
||||
list-style: none;
|
||||
}
|
||||
div.contribution ul > li:before {
|
||||
/*content: "- ";*/
|
||||
margin-left: -4mm;
|
||||
margin-right: 2mm;
|
||||
}
|
||||
ol.references,
|
||||
h3 + ul /* This is tricky as "references" has no class */{
|
||||
/* notes and references */
|
||||
font-size: var(--small-font-size);
|
||||
line-height: var(--small-line-height);
|
||||
columns: 2 auto;
|
||||
column-gap: 7mm;
|
||||
margin: 0 1em;
|
||||
padding: 0;
|
||||
}
|
||||
h3 + ul > li{
|
||||
list-style: none;
|
||||
text-indent: -1em;
|
||||
}
|
||||
/* exceptions of columns */
|
||||
div.cover ul,
|
||||
div.toc ul{
|
||||
columns: unset;
|
||||
list-style: none;
|
||||
}
|
||||
div.appendix ul > li,
|
||||
div.cover ul > li,
|
||||
div.toc ul > li{
|
||||
text-indent: 0;
|
||||
}
|
||||
div.appendix ul > li:before,
|
||||
div.cover ul > li:before,
|
||||
div.toc ul > li:before,{
|
||||
content: "" !important;
|
||||
}
|
||||
|
||||
img{
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 105mm; /* full text width */
|
||||
height: auto;
|
||||
max-height: 200mm;
|
||||
margin: 1em 0 1em 0;
|
||||
|
||||
/* PRINT PDF - GRAYSCALE */
|
||||
/*filter: grayscale(100%);*/
|
||||
}
|
||||
div.thumb{
|
||||
/* sometimes wrapper of img + image caption */
|
||||
font-size: var(--small-font-size);
|
||||
line-height: var(--small-line-height);
|
||||
margin: 1em 0 1em var(--first-indent);
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
hyphens: none;
|
||||
}
|
||||
div.thumb div.thumbinner{
|
||||
width: unset !important;
|
||||
}
|
||||
div.thumb img{
|
||||
margin-left: -7mm !important; /* same as first-indent but inverted */
|
||||
}
|
||||
div.portrait div.thumb img{
|
||||
width: auto !important;
|
||||
min-width: 75mm;
|
||||
}
|
||||
div.fullpage{
|
||||
page: fullpage !important;
|
||||
}
|
||||
div.fullpage div.thumb{
|
||||
margin: 0 !important;
|
||||
}
|
||||
div.fullpage div.thumb img{
|
||||
/* PREVIEW PDF -- these sizes only apply for the preview view! no bleed */
|
||||
/*width: 152.4mm;
|
||||
max-width: none;
|
||||
height: 228.6mm;
|
||||
max-height: 228.6mm;
|
||||
margin: -3mm 0 0mm -7mm !important;*/
|
||||
|
||||
/* PRINT PDF -- these sizes only apply when the bleed is turned on */
|
||||
width: 155.4mm;
|
||||
max-width: none;
|
||||
height: auto;
|
||||
max-height: 234.6mm;
|
||||
margin-top: -6mm !important;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
div.fullpage.left div.thumb img{
|
||||
margin-left: -3mm !important;
|
||||
}
|
||||
div.fullpage.right div.thumb img{
|
||||
margin-left: 0mm !important;
|
||||
}
|
||||
div.special_image_treatment.userinfo img{
|
||||
width: auto !important;
|
||||
max-width: auto !important;
|
||||
height: 180mm !important;
|
||||
max-height: 180mm !important;
|
||||
}
|
||||
pre{
|
||||
font-family: "mono";
|
||||
font-size: 9pt;
|
||||
line-height: 13pt;
|
||||
hyphens: none;
|
||||
white-space: pre-wrap;
|
||||
margin: 1em 0 1em var(--second-indent);
|
||||
}
|
||||
blockquote{
|
||||
margin: 0 0 0 var(--second-indent);
|
||||
font-style: italic;
|
||||
}
|
||||
blockquote.pull{
|
||||
margin: 1em 0 1em var(--second-indent) !important;
|
||||
}
|
||||
table{
|
||||
width: 100%;
|
||||
}
|
||||
sup{
|
||||
line-height: 0;
|
||||
font-size: 7pt;
|
||||
padding-left: 0.15mm;
|
||||
}
|
||||
canvas{
|
||||
position: absolute;
|
||||
top: 20mm;
|
||||
left: -20mm;
|
||||
/*border: 1px solid magenta;*/
|
||||
}
|
||||
a,
|
||||
a:visited,
|
||||
a:active,
|
||||
a:hover{
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
/* specific details, uitzonderingen */
|
||||
a.external{
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@media print{
|
||||
html, body{
|
||||
background-color: transparent;
|
||||
}
|
||||
div#nav{
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user