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{
    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: -10mm !important;
            }
            div.fullpage.right div.thumb img{
                margin-left: -7mm !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;
    }
}