volumetric-regimes-book/command-line/css/print.css

: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{
    /* does not work from this stylesheet, rule gets removed by paged.js??? */
    /* only worked once inserted directly into the HTML */
    break-after: column; 
}
    div.column-break + p{
        orphans: 8;
    }
div.no-hyphens{
    hyphens: none !important;
}
div.no-indent p{
    text-indent: unset !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: unset; /* Default is 2. These might trigger disappearing sentences at pagebreak? https://mattermost.pagedmedia.org/pagedmedia/pl/xsetebgcbbddzggwbbn93e5k1a */
    widows: unset; /* Default is 2. These might trigger disappearing sentences at pagebreak? https://mattermost.pagedmedia.org/pagedmedia/pl/xsetebgcbbddzggwbbn93e5k1a */
}

@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(100){
        background-color: lightgray;
    }
    @page:nth(101){
        background-color: lightgray;
    }
    @page:nth(160){
        background-color: lightgray;
    }
    @page:nth(161){
        background-color: lightgray;
    }
    @page:nth(206){
        background-color: lightgray;
    }
    @page:nth(207){
        background-color: lightgray;
    }
    @page:nth(260){
        background-color: lightgray;
    }
    @page:nth(261){
        background-color: lightgray;
    }
    @page:nth(316){
        background-color: lightgray;
    }
    @page:nth(317){
        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 nomarkssmallmargins:right{

    @top-center{
        content: none;
    }
    @bottom-center{
        content: none;
    }
}
@page nomarkssmallmargins:left{

    @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,
div.contribution.beirut-82 div.thumb,
div.enlarged-image{
    page: nomarks;
}
div.special_image_treatment.userinfo{
    page: nomarkssmallmargins;
}
div.cover.second,
div.multi,
div.series{
    page-break-after: always;
}
div.appendix{
    page-break-before: always;
}
    div.appendix.letter{
        page-break-before: right;
    }
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.backcover{
        color: white;
    }
    div.cover ul{
        padding: 0;
        margin: 2em 0;
    }
    div.cover ul li{
        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;
        }

div.series{
    font-size: var(--small-font-size);
    line-height: var(--small-line-height);
    hyphens: none;
}
    div.series.about{
        width: 50%;
    }      
    div.series.colophon{
        columns: 2 auto;
        column-gap: 8mm;
        column-fill: auto;
        height: 207mm;
    }

/* Table of Contents */
div.toc *{
    font-size: var(--font-size);
    hyphens: none;
}
    /* the word "Content" at the top of the page */
    div.toc > p:first-of-type{
        font-size: 16pt !important;
        font-family: "bitter_semi";
        line-height: 22pt;
        letter-spacing: 0.025em;
        margin: -1em 0 1em var(--second-indent) !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: -13.5mm;
    }
    div.toc p{
        margin-top: 1.5em;
        margin-left: 7mm;
    }
    div.toc ul{
        margin: 1em 0 0 10mm;
    }
        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;
        padding: 0;
    }
    div.item_index li{
        margin-bottom: 0 !important;
        text-indent: -7mm;
        margin-left: 7mm;
    }
    div.item_index li a::after{
        content: ", " target-counter(attr(href), page);
        font-weight: bold;
        margin-left: -0.15em; /* To remove the weird gaps between inline-blocks. This seems to be a general problem in HTML5/CSS3 */
    }
    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;
    column-gap: 14mm;
    /*margin-bottom: 1em;*/
}
    div.two-columns img,
    div.two-columns div.thumb{
        display: block;
        float: left;
    }
    div.two-columns img,
    div.two-columns div.thumb img{
        width: 55mm !important; 
    }

/* general elements*/

h1{
    /* section titles */
    font-size: 34pt;
    line-height: 1.15;
    margin: 0;
    word-break: normal;
    hyphens: manual !important;
}
    /* 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;
        }
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;
}
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.list-without-markers p,
    div.no-text-indent p,
    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 + div.thumb,
    h3 + p,
    div.thumb + p,
    div.portrait + p,
    h4 + p,
    div.series p,
    div.cover p,
    div.biographies p,
    div.previously_published p,
    div.backcover p,
    blockquote p,
    table p,
    pre + p,
    blockquote + p{
        text-indent: unset !important;
    }
    div.previously_published p,
    div.biographies p,
    div.series p{
        margin-bottom: 1em;
    }

ul > li {
    list-style: none;
    text-indent: 0;
    margin-bottom: 1em;
}
    div.contribution ul > li::before{
        content: "- ";
        margin-left: -3.5mm;
        margin-right: 1.5mm;
    }
    /* Mysteriously enough... these rules don't work??? */
    div.cover ul > li::before,
    ul.references > li::before,
    div.toc ul > li::before,
    div.item_index ul > li::before {
        content: none !important;
        margin-left: unset;
        margin-right: unset;
        margin-bottom: unset;
    }

    div.list-without-markers{
        text-indent: -0.8em !important;
    }
        div.list-without-markers ul > li{
            text-indent: -1em !important;
        }
        div.list-without-markers ul > li:before{
            content: none !important;
            margin-left: unset;
            margin-right: unset;
        }

    /* notes (ol.references) and references (ul.references) */
    ol.references,
    ul.references{
        font-size: var(--small-font-size);
        line-height: var(--small-line-height);
        columns: 2 auto;
        column-gap: 7mm;
        margin: 0 1em;
        padding: 0;
        orphans: 8;
    }
        ul.references > li{
            text-indent: -1em;
            margin-bottom: unset !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: 60mm;
    }
    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;
            }

    /* Exception for User Info large small image */
    div.special_image_treatment.userinfo img{
        width: auto !important;
        max-width: auto !important;
        height: 200mm !important;
        max-height: 200mm !important;
        margin: 0;
    }
    /* Exception for Invasive Imagination images */
    div.invasive-imagination div.thumb{
        margin-bottom: 2em;
        width: 75mm !important;
    }
        div.invasive-imagination div.thumb img{
            width: 100% !important;
        }
    /* Exception for Maria Dada's text on Beirut 82 */
    div.enlarged-image img,
    div.contribution.beirut-82 div.thumb img{
        width: auto !important;
        max-width: auto !important;
        height: 175mm !important;
        max-height: 175mm !important;
        margin-top: -10mm;
        margin-left: -22mm !important;
    }
        img[alt="Strategy and Tactics.jpg"]{
            margin-left: -18mm !important;
        }
        div.enlarged-image img[alt="Spiralling outburst"],
        div.enlarged-image img[alt="Spiralling outburst"]{
            max-width: 140mm !important;
            height: auto !important;
            max-height: unset !important;
        }

pre{
    /* <br>'s are sometimes manually added in the text */

    /* BITTER VERSION */
    font-family: "bitter";
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-style: italic;
    hyphens: none;
    white-space: pre-line; 
    margin: 1em 0 1em var(--second-indent);

    /* MONOSPACE VERSION */
    /*font-family: "mono";
    font-size: 9pt;
    line-height: 13pt;
    hyphens: none;
    white-space: pre-line; 
    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: 125mm !important;
    margin-left: -10mm !important;
    font-size: 8pt !important;
    line-height: 11pt;
    hyphens: none;
    page-break-after: always;
}
    table p{
        margin-bottom: 1em !important;
    }
    td {
        vertical-align: top;
        padding: 0.5em !important;
    }
        tr:first-of-type td {
            border: 0 !important;
            border-left: 1px solid black !important;
        }
        td:first-of-type{
            font-weight: bold;
            border: 0 !important;
            border-bottom: 1px solid black !important;
        }
        tr:last-of-type td{
            border-bottom: 0 !important;
        }
            tr:first-of-type td:first-of-type{
                border-left: 0 !important;
                border-bottom: 0 !important;
            }
            tr:first-of-type td:last-of-type{
                border-right: 1px solid black !important;
            }
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;
    }
}