Tools for generating the Volumetric Regimes book https://volumetricregimes.xyz/ (wiki-to-print, using Paged.js)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

747 lines
17 KiB

:root{
--font-size: 9pt;
--line-height: 14pt;
--small-font-size: 7.5pt;
--small-line-height: 1.55;
--first-indent: 7mm;
--second-indent: 20mm;
3 years ago
}
@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;
3 years ago
}
@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 */
3 years ago
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 */
3 years ago
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 */
3 years ago
}
@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;
3 years ago
@bottom-center{
content: counter(page);
font-size: 9.5pt;
margin-top: -6mm;
}
}
@page:right{
margin: 14.758mm 18mm 21.225mm 29.125mm;
3 years ago
}
@page:left{
margin: 14.758mm 29.125mm 21.225mm 18mm;
3 years ago
}
@page:right{
3 years ago
/* running header: contribution title (h2) */
3 years ago
@top-center{
content: string(contributiontitle);
font-size: 8pt;
text-transform: uppercase;
margin-top: 5mm;
}
}
@page:left{
3 years ago
/* running header: section title (h1) */
3 years ago
@top-center{
3 years ago
content: element(sectiontitle);
3 years ago
font-size: 8pt;
text-transform: uppercase;
margin-top: 5mm;
}
}
@page section{
3 years ago
@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;
}
3 years ago
@page:nth(104){
background-color: lightgray;
}
3 years ago
@page:nth(105){
background-color: lightgray;
}
3 years ago
@page:nth(164){
background-color: lightgray;
}
3 years ago
@page:nth(165){
background-color: lightgray;
}
3 years ago
@page:nth(210){
background-color: lightgray;
}
3 years ago
@page:nth(211){
background-color: lightgray;
}
3 years ago
@page:nth(262){
background-color: lightgray;
}
3 years ago
@page:nth(263){
background-color: lightgray;
}
3 years ago
@page:nth(318){
background-color: lightgray;
}
3 years ago
@page:nth(319){
background-color: lightgray;
}
@page contribution:first{
/* exception for running-header on the first page of a contribution */
3 years ago
@top-center{
content: none;
3 years ago
}
}
@page:first{
background-color: #b89ee6;
3 years ago
@top-center{
content: none;
}
@bottom-center{
content: none;
}
3 years ago
}
@page backcover{
background-color: #b89ee6;
@top-center{
3 years ago
content: none;
}
@bottom-center{
3 years ago
content: none;
}
}
@page nomarks{
3 years ago
@top-center{
3 years ago
content: none;
}
@bottom-center{
3 years ago
content: none;
}
}
3 years ago
@page:blank{
@top-center{
3 years ago
content: none;
}
@bottom-center{
3 years ago
content: none;
}
3 years ago
}
/* for fullpage image contributions */
@page fullpage{
margin: 0 !important;
@top-center{
content: none;
}
@bottom-center{
content: none;
}
}
3 years ago
/* sections -- page flows */
div.section{
page: section;
3 years ago
/* 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;*/
3 years ago
}
div.section h1{
/* ... and make sure that each section starts on the right */
page-break-before: right;
}
3 years ago
/* sub-sections -- page flows */
3 years ago
div.multi,
div.preface,
div.introduction,
div.contribution{
page-break-before: right;
}
div.preface,
div.acknowledgements,
div.introduction,
div.contribution{
page: contribution;
}
3 years ago
div.section.nomarks,
3 years ago
div.section.toc,
div.contribution.beirut-82 div.thumb{
page: nomarks;
}
div.cover.second,
div.multi,
div.series{
page-break-after: always;
}
div.appendix{
page-break-before: always;
}
3 years ago
div.appendix.letter{
page-break-before: right;
}
3 years ago
div.backcover{
page-break-before: left;
3 years ago
page: backcover;
}
3 years ago
/* sub-sections -- lay-out rules */
div.cover,
div.backcover{
hyphens: none;
margin: -10mm 0 0 20mm;
}
div.cover,
3 years ago
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;
}
3 years ago
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;
}
3 years ago
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);
}
div.series.about{
width: 50%;
}
div.series.colophon{
columns: 2 auto;
column-gap: 5mm;
column-fill: auto;
height: 207mm;
}
3 years ago
/* Table of Contents */
div.toc *{
font-size: var(--font-size);
hyphens: none;
}
3 years ago
/* the word "Content" at the top of the page */
div.toc > p:first-of-type{
font-size: 16pt !important;
3 years ago
font-family: "bitter_semi";
3 years ago
line-height: 22pt;
3 years ago
letter-spacing: 0.025em;
3 years ago
margin: -1em 0 1em var(--second-indent) !important;
3 years ago
}
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 */
3 years ago
margin-left: -13.5mm;
3 years ago
}
div.toc p{
3 years ago
margin-top: 1.5em;
margin-left: 7mm;
3 years ago
}
div.toc ul{
3 years ago
margin: 1em 0 0 10mm;
}
3 years ago
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;
}
3 years ago
div.introduction,
div.contribution{
}
3 years ago
div.introduction h1{
display: none;
}
div.contribution h2 + p > b{
font-weight: normal;
}
3 years ago
div.item_index{
hyphens: none;
3 years ago
}
div.item_index ul{
column-gap: 10mm;
3 years ago
padding: 0;
}
div.item_index li{
3 years ago
margin-bottom: 0 !important;
}
div.item_index li a::after{
3 years ago
content: ", " target-counter(attr(href), page);
font-weight: bold;
3 years ago
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;
3 years ago
}
/* Invasive imagination and its agential cuts - figures */
div.two-columns{
columns: 2 auto;
column-fill: auto;
3 years ago
column-gap: 14mm;
margin-bottom: 1em;
}
div.two-columns div.thumb img{
3 years ago
width: 50mm !important;
display: inline-block;
}
/* general elements*/
h1{
3 years ago
/* 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{
3 years ago
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;
3 years ago
}
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;
}
3 years ago
/* all exceptions on the text-indent */
3 years ago
div.list-without-markers p,
div.no-text-indent p,
div.bugged-report p,
3 years ago
div.toc p,
h2 + p, /* author name */
3 years ago
h2 + p,
h2 + p + p + blockquote + p,
div.contribution h2 + p + p + div.thumb,
div.contribution h2 + p + div.thumb,
3 years ago
h3 + p,
3 years ago
div.thumb + p,
div.portrait + p,
h4 + p,
div.series p,
div.cover p,
div.biographies p,
div.previously_published p,
3 years ago
div.backcover p,
blockquote p,
3 years ago
table p,
pre + p,
blockquote + p{
text-indent: unset !important;
}
div.previously_published p,
div.biographies p,
div.series p{
margin-bottom: 1em;
}
3 years ago
ul > li {
list-style: none;
3 years ago
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,
3 years ago
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;
}
3 years ago
ul.references > li{
text-indent: -1em;
3 years ago
margin-bottom: unset !important;
}
img{
position: relative;
display: block;
width: 105mm; /* full text width */
3 years ago
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{
3 years ago
margin-left: -3mm !important;
}
div.fullpage.right div.thumb img{
3 years ago
margin-left: 0mm !important;
}
3 years ago
/* Exception for User Info large small image */
div.special_image_treatment.userinfo img{
width: auto !important;
max-width: auto !important;
height: 180mm !important;
max-height: 180mm !important;
}
3 years ago
/* 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.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;
}
pre{
3 years ago
/* <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;
3 years ago
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{
3 years ago
width: 125mm !important;
margin-left: -10mm !important;
font-size: 8pt !important;
line-height: 11pt;
hyphens: none;
page-break-after: always;
}
3 years ago
table p{
margin-bottom: 1em !important;
}
td {
vertical-align: top;
padding: 0.5em !important;
}
sup{
line-height: 0;
3 years ago
font-size: 7pt;
3 years ago
padding-left: 0.15mm;
3 years ago
}
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 */
3 years ago
a.external{
word-break: break-all;
}
@media print{
html, body{
background-color: transparent;
}
div#nav{
display: none !important;
}
}