From 3e1eb39da04df2dd9607c1ac06312040944fad8f Mon Sep 17 00:00:00 2001
From: manetta <mail@manettaberends.nl>
Date: Wed, 13 Oct 2021 19:15:33 +0200
Subject: [PATCH] adding a print.css to start with when running the flask
 application

---
 web-interface/static/css/print.css | 679 +++++++++++++++++++++++++++++
 1 file changed, 679 insertions(+)
 create mode 100644 web-interface/static/css/print.css

diff --git a/web-interface/static/css/print.css b/web-interface/static/css/print.css
new file mode 100644
index 0000000..f037ed2
--- /dev/null
+++ b/web-interface/static/css/print.css
@@ -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;
+    }
+}
+