15 changed files with 31711 additions and 0 deletions
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 51 KiB |
@ -0,0 +1,175 @@ |
|||
:root{ |
|||
--font-size: 12px; |
|||
--line-height: 18px; |
|||
--small-font-size: 10px; |
|||
--small-line-height: 15px; |
|||
--h2-font-size: 21px; |
|||
--h2-line-height: 27px; |
|||
--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; |
|||
} |
|||
|
|||
/* general */ |
|||
|
|||
body{ |
|||
font-family: "bitter"; |
|||
font-size: var(--font-size); |
|||
line-height: var(--line-height); |
|||
letter-spacing: 0.01em; |
|||
hyphens: auto; |
|||
} |
|||
|
|||
@page{ |
|||
size: 324.6mm 229mm; /* Based on calculations: 323.4, based on canvas template: 324.6 ....... */ |
|||
orientation: landscape; |
|||
bleed: 3mm; |
|||
/*marks: crop;*/ |
|||
background: linear-gradient(180deg, #3741ea, #c0c1e7); |
|||
margin: 0; |
|||
padding: 0; |
|||
color: white; |
|||
} |
|||
|
|||
div#cover, |
|||
div#spine, |
|||
div#backcover{ |
|||
display: inline-block; |
|||
height: 229mm; |
|||
/*border: 1px solid green;*/ |
|||
vertical-align: top; |
|||
} |
|||
|
|||
div#cover, |
|||
div#backcover{ |
|||
width: 152mm; |
|||
hyphens: none; |
|||
padding: 0 16mm 0 47mm; |
|||
} |
|||
div#cover, |
|||
div#cover ul li, |
|||
div#backcover b, |
|||
div#spine{ |
|||
font-size: 17pt; |
|||
font-family: "bitter_semi"; |
|||
line-height: 1.4; |
|||
letter-spacing: 0.025em; |
|||
color: white; |
|||
font-weight: bold; |
|||
} |
|||
div#cover p, |
|||
div#backcover p{ |
|||
margin-top: 0; |
|||
margin-bottom: var(--line-height); |
|||
} |
|||
div#cover p.title, |
|||
div#backcover p.title{ |
|||
margin-top: 7.54mm !important; |
|||
} |
|||
div#cover p.title + p, |
|||
div#backcover p.title + p{ |
|||
margin-top: -3mm !important; |
|||
} |
|||
div#cover ul{ |
|||
padding: 0; |
|||
margin: 2em 0; |
|||
} |
|||
div#cover ul li{ |
|||
list-style: none; |
|||
margin-bottom: 0.1em !important; |
|||
} |
|||
div#backcover b{ |
|||
margin-left: 0; |
|||
} |
|||
p#multi{ |
|||
position: absolute; |
|||
top: 44mm; |
|||
right: 7mm; |
|||
width: 150mm; |
|||
z-index: 1; |
|||
/*border: 1px solid blue;*/ |
|||
} |
|||
div#backcover p#logo-title{ |
|||
width: 50mm; |
|||
margin-left: -23mm; |
|||
margin-top: 17.5mm !important; |
|||
} |
|||
div#backcover p#barcode { |
|||
bottom: 9mm; |
|||
position: absolute; |
|||
left: 88mm; |
|||
} |
|||
div#spine{ |
|||
width: 19.4mm; |
|||
} |
|||
div#spine p#title{ |
|||
position: absolute; |
|||
top: 22mm; |
|||
transform: rotate(90deg); |
|||
transform-origin: 8% -4%; |
|||
width: 229mm; |
|||
height: 15mm; |
|||
/*border: 1px solid lime;*/ |
|||
} |
|||
div#spine p#multi-small { |
|||
position: absolute; |
|||
top: 114mm; |
|||
width: 18mm; |
|||
height: auto; |
|||
margin: 0 0.7mm; |
|||
padding: 0; |
|||
} |
|||
div#spine p#logo { |
|||
position: absolute; |
|||
bottom: 10mm; |
|||
width: 8mm; |
|||
height: auto; |
|||
margin: 0 5.2mm; |
|||
padding: 0; |
|||
} |
|||
|
|||
div#backcover p#logo-title img, |
|||
div#spine p#multi-small img, |
|||
div#spine p#multi img, |
|||
div#spine p#logo img{ |
|||
width: 100%; |
|||
} |
|||
|
|||
a, |
|||
a:visited, |
|||
a:active, |
|||
a:hover{ |
|||
color: inherit; |
|||
text-decoration: none; |
|||
page-break-inside: avoid; |
|||
} |
|||
@ -0,0 +1,56 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en-us"> |
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<link href="pagedjs.css" rel="stylesheet" type="text/css"> |
|||
<link href="cover.css" rel="stylesheet" type="text/css" media="print"> |
|||
<script src="paged.polyfill.js"></script> |
|||
</head> |
|||
<body> |
|||
<div id="wrapper"> |
|||
<div id="backcover"> |
|||
<p class="title"><b>DATA browser 08<br />VOLUMETRIC REGIMES:<br />Material cultures of<br> quantified presence</b> |
|||
</p><p>Edited by Possible Bodies |
|||
</p><p>3D computation has historically co-evolved with Modern technosciences, and aligned with the regimes of optimiza-<wbr>tion, normalization and hegemonic world order. The lega-<wbr>cies and projections of industrial development leave traces of that imaginary and tell the stories of a lively tension between “the probable” and “the possible”. Defined as the techniques for measuring volumes, volumetrics all too easily (re)produce and accentuate the probable, and this process is intensified within the technocratic realm of contemporary hyper-computation. |
|||
</p><p>This book brings together diverse materials from an ongoing trans<span class="star">✶</span>feminist conversation between artists, software developers and theorists working with techniques and technologies for detecting, tracking, capturing, printing, modeling and rendering volumes. |
|||
</p><p>CONTRIBUTORS: |
|||
</p><p>Manetta Berends, Sophie Boiron, Maria Dada, Pierre Huyghebaert, Phil Langley, Nicolas Malevé, Romi Ron Morrison, Simone C Niquille, Possible Bodies, Helen V. Pritchard, Blanca Pujals, Jara Rocha, Sina Seifee, Femke Snelting, Spec, The Underground Division, Kym Ward |
|||
</p> |
|||
<p><a rel="nofollow" class="external text" href="http://www.data-browser.net">www.data-browser.net</a></p> |
|||
<p id="logo-title"><img src="OHP-logo-title.svg" /></p> |
|||
<p id="barcode"><img src="barcode.svg" /></p> |
|||
</div> |
|||
|
|||
<div id="spine"> |
|||
<p id="title">DATA browser 08<br />VOLUMETRIC REGIMES<!-- : Material cultures of quantified presence --></p> |
|||
<p id="multi-small"><img src="multi-remix.svg" /></p> |
|||
<p id="logo"><img src="OHP-logo.svg" /></p> |
|||
</div> |
|||
|
|||
<div id="cover"> |
|||
<p id="multi"><img src="multi-remix.svg" /></p> |
|||
<p class="title">DATA browser 08<br /> |
|||
VOLUMETRIC REGIMES: <br /> |
|||
Material cultures of<br> quantified presence |
|||
</p> |
|||
<ul><li>Possible Bodies</li> |
|||
<li>Blanca Pujals</li> |
|||
<li>Jara Rocha</li> |
|||
<li>Femke Snelting</li> |
|||
<li>Sina Seifee</li> |
|||
<li>Nicolas Malevé</li> |
|||
<li>Simone C Niquille</li> |
|||
<li>Maria Dada</li> |
|||
<li>Phil Langley</li> |
|||
<li>Helen V. Pritchard</li> |
|||
<li>Kym Ward</li> |
|||
<li>Spec</li> |
|||
<li>Sophie Boiron</li> |
|||
<li>Pierre Huyghebaert</li> |
|||
<li>Romi Ron Morrison</li> |
|||
<li>The Underground Division</li> |
|||
<li>Manetta Berends</li></ul> |
|||
</div> |
|||
</div> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
@ -0,0 +1,180 @@ |
|||
/* CSS for Paged.js interface – v0.2 */ |
|||
|
|||
/* Change the look */ |
|||
:root { |
|||
--color-background: whitesmoke; |
|||
--color-pageSheet: #cfcfcf; |
|||
--color-pageBox: violet; |
|||
--color-paper: white; |
|||
--color-marginBox: transparent; |
|||
--pagedjs-crop-color: black; |
|||
--pagedjs-crop-shadow: white; |
|||
--pagedjs-crop-stroke: 1px; |
|||
} |
|||
|
|||
/* To define how the book look on the screen: */ |
|||
@media screen { |
|||
body { |
|||
background-color: var(--color-background); |
|||
} |
|||
|
|||
.pagedjs_pages { |
|||
display: flex; |
|||
width: calc(var(--pagedjs-width) * 2); |
|||
flex: 0; |
|||
flex-wrap: wrap; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.pagedjs_page { |
|||
background-color: var(--color-paper); |
|||
box-shadow: 0 0 0 1px var(--color-pageSheet); |
|||
margin: 0; |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
margin-top: 10mm; |
|||
} |
|||
|
|||
.pagedjs_first_page { |
|||
margin-left: var(--pagedjs-width); |
|||
} |
|||
|
|||
.pagedjs_page:last-of-type { |
|||
margin-bottom: 10mm; |
|||
} |
|||
|
|||
.pagedjs_pagebox{ |
|||
box-shadow: 0 0 0 1px var(--color-pageBox); |
|||
} |
|||
|
|||
.pagedjs_left_page{ |
|||
z-index: 20; |
|||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important; |
|||
} |
|||
|
|||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ |
|||
width: 0; |
|||
} |
|||
|
|||
.pagedjs_right_page{ |
|||
z-index: 10; |
|||
position: relative; |
|||
left: calc(var(--pagedjs-bleed-left)*-1); |
|||
} |
|||
|
|||
/* show the margin-box */ |
|||
|
|||
.pagedjs_margin-top-left-corner-holder, |
|||
.pagedjs_margin-top, |
|||
.pagedjs_margin-top-left, |
|||
.pagedjs_margin-top-center, |
|||
.pagedjs_margin-top-right, |
|||
.pagedjs_margin-top-right-corner-holder, |
|||
.pagedjs_margin-bottom-left-corner-holder, |
|||
.pagedjs_margin-bottom, |
|||
.pagedjs_margin-bottom-left, |
|||
.pagedjs_margin-bottom-center, |
|||
.pagedjs_margin-bottom-right, |
|||
.pagedjs_margin-bottom-right-corner-holder, |
|||
.pagedjs_margin-right, |
|||
.pagedjs_margin-right-top, |
|||
.pagedjs_margin-right-middle, |
|||
.pagedjs_margin-right-bottom, |
|||
.pagedjs_margin-left, |
|||
.pagedjs_margin-left-top, |
|||
.pagedjs_margin-left-middle, |
|||
.pagedjs_margin-left-bottom { |
|||
box-shadow: 0 0 0 1px inset var(--color-marginBox); |
|||
} |
|||
|
|||
/* uncomment this part for recto/verso book : ------------------------------------ */ |
|||
/* |
|||
|
|||
.pagedjs_pages { |
|||
flex-direction: column; |
|||
width: 100%; |
|||
} |
|||
|
|||
.pagedjs_first_page { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.pagedjs_page { |
|||
margin: 0 auto; |
|||
margin-top: 10mm; |
|||
} |
|||
|
|||
.pagedjs_left_page{ |
|||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-left))!important; |
|||
} |
|||
|
|||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop{ |
|||
border-color: var(--pagedjs-crop-color); |
|||
} |
|||
|
|||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{ |
|||
width: var(--pagedjs-cross-size)!important; |
|||
} |
|||
|
|||
.pagedjs_right_page{ |
|||
left: 0; |
|||
} |
|||
*/ |
|||
|
|||
|
|||
|
|||
/*--------------------------------------------------------------------------------------*/ |
|||
|
|||
|
|||
|
|||
/* uncomment this par to see the baseline : -------------------------------------------*/ |
|||
|
|||
/* |
|||
.pagedjs_pagebox { |
|||
--pagedjs-baseline: 22px; |
|||
--pagedjs-baseline-position: 5px; |
|||
--pagedjs-baseline-color: cyan; |
|||
background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent; |
|||
background-size: 100% var(--pagedjs-baseline); |
|||
background-repeat: repeat-y; |
|||
background-position-y: var(--pagedjs-baseline-position); |
|||
} */ |
|||
|
|||
|
|||
/*--------------------------------------------------------------------------------------*/ |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
|
|||
/* Marks (to delete when merge in paged.js) */ |
|||
|
|||
.pagedjs_marks-crop{ |
|||
z-index: 999999999999; |
|||
|
|||
} |
|||
|
|||
.pagedjs_bleed-top .pagedjs_marks-crop, |
|||
.pagedjs_bleed-bottom .pagedjs_marks-crop{ |
|||
box-shadow: 1px 0px 0px 0px var(--pagedjs-crop-shadow); |
|||
} |
|||
|
|||
.pagedjs_bleed-top .pagedjs_marks-crop:last-child, |
|||
.pagedjs_bleed-bottom .pagedjs_marks-crop:last-child{ |
|||
box-shadow: -1px 0px 0px 0px var(--pagedjs-crop-shadow); |
|||
} |
|||
|
|||
.pagedjs_bleed-left .pagedjs_marks-crop, |
|||
.pagedjs_bleed-right .pagedjs_marks-crop{ |
|||
box-shadow: 0px 1px 0px 0px var(--pagedjs-crop-shadow); |
|||
} |
|||
|
|||
.pagedjs_bleed-left .pagedjs_marks-crop:last-child, |
|||
.pagedjs_bleed-right .pagedjs_marks-crop:last-child{ |
|||
box-shadow: 0px -1px 0px 0px var(--pagedjs-crop-shadow); |
|||
} |
|||
Loading…
Reference in new issue