You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

695 lines
18 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.5.1.min.js"></script>
<style>
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------PRINT----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@page {
size: 420mm, 297mm;
margin: 0mm;
}
@media print {
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Sinistre';
src: url('Sinistre-S†Caroline.otf');
}
symbol {
font-family: 'WFTF';
font-size: 25pt;
text-align: center;
margin-left: 5mm;
margin-right: 5mm;
padding-top: 5mm;
line-height: 27pt;
}
body {
padding: 2mm;
margin-top: 0;
margin-left: 0;
margin-top: 0;
margin-left: 0;
width: 100%;
height: 100%;
border: solid 1px #000;
text-align: left;
}
symbols {
font-size: 100pt;
line-height: 100pt;
font-family: 'WFTF';
}
indent {
color: blue;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
text-indent: 3mm;
}
.titlevertical {
writing-mode: vertical-rl;
display: block;
font-size: 140pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
bottom: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 0mm;
}
.titleverticalleft {
writing-mode: vertical-rl;
display: block;
font-size: 140pt;
line-height: 100%;
position: fixed;
letter-spacing: normal;
font-family: 'Roboto';
top: 10mm;
right: 10mm;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-right: 0;
}
.title {
display: block;
font-size: 175pt;
line-height: 170pt;
letter-spacing: normal;
font-family: 'Custom';
top: 0;
right: 0;
margin-bottom: 10mm;
margin-right: 10mm;
margin-top: 10mm;
margin-bottom: 10mm;
}
.title2 {
display: block;
font-size: 150pt;
line-height: 160pt;
letter-spacing: normal;
font-family: 'Roboto';
top: 0;
right: 0;
margin-bottom: 10mm;
margin-right: 10mm;
margin-top: 10mm;
margin-bottom: 10mm;
}
.titlebottom {
display: block;
font-size: 12pt;
line-height: 14pt;
position: fixed;
font-family: 'Roboto';
bottom: 0;
left: 0;
margin-bottom: 10mm;
margin-left: 10mm;
margin-top: 10mm;
margin-right: 10mm;
}
h1 {
color: black;
text-align: left;
font-size: 32pt;
line-height: 34pt;
z-index: 300;
font-family: 'Roboto';
}
h2 {
color: black;
text-align: left;
font-size: 26pt;
line-height: 28pt;
z-index: 300;
font-family: 'Robotobold';
}
p {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
} p12 {
color: black;
text-align: left;
font-size: 10pt;
line-height: 12pt;
z-index: 300;
font-family: 'Roboto';
}
p13 {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 10pt;
line-height: 12pt;
z-index: 300;
font-family: 'Robotomedium';
}
p2 {
text-indent: 15mm;
color: black;
text-align: left;
font-size: 14pt;
line-height: 16pt;
z-index: 300;
font-family: 'Roboto';
}
p3 {
color: black;
text-align: left;
font-size: 14pt;
line-height: 16pt;
z-index: 300;
font-family: 'Roboto';
}
p3special {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
padding-right: 20mm;
}
line {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Roboto';
}
bold {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Robotobold';
}
medium {
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
z-index: 300;
font-family: 'Robotomedium';
}
garamond {
font-family: 'EBGaramondregular';
}
brut {
font-family: 'Brut';
color: black;
text-align: left;
font-size: 17pt;
line-height: 19pt;
}
* {
box-sizing: border-box;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
padding: 100mm;
font-size: 24pt;
line-height: 28pt;
font-family: 'Roboto';
vertical-align:bottom;
}
.columnleft {
width: 15%;
margin-left: 10mm;
margin-top: 10mm;
text-align: justify;
text-justify: inter-word;
}
.columnleft2 {
width: 20%;
margin-left: 10mm;
text-align: justify;
text-justify: inter-word;
}
.columnmiddle {
width: 10%;
margin: 10mm;
}
.columnright {
width: 55%;
margin-right: 10mm;
}
italic {
font-family: 'EBGaramonditalic';
font-size: 24pt;
line-height: 26pt;
}
.bigitalic {
text-indent: 30mm;
font-family: 'EBGaramonditalic';
font-size: 30pt;
line-height:34pt;
}
bigp {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 36pt;
line-height: 38pt;
z-index: 300;
font-family: 'Roboto';
}
bigmedium {
text-indent: 7mm;
color: black;
text-align: left;
font-size: 36pt;
line-height: 38pt;
z-index: 300;
font-family: 'Roboto';
}
.screen {
display:none;
}
back {
color: blue;
background: blue;
}
symbol2 {
font-size: 80pt;
line-height: 120pt;
font-family: 'Custom';
}
}
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------SCREEN----------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen{
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.ttf');
}
@font-face {
font-family: 'Custom';
src: url('WFTF_custom-Regular.otf');
}
@font-face {
font-family: 'Robotobold';
src: url('Roboto-Bold.ttf');
}
@font-face {
font-family: 'Robotomedium';
src: url('Roboto-Medium.ttf');
}
@font-face {
font-family: 'WFTF';
src: url('wftfs-Regular.otf');
}
@font-face {
font-family: 'EBGaramonditalic';
src: url('EBGaramond-MediumItalic.ttf');
}
@font-face {
font-family: 'EBGaramonditalicsemi';
src: url('EBGaramond-SemiBoldItalic.ttf');
}
@font-face {
font-family: 'EBGaramondregular';
src: url('EBGaramond-Medium.ttf');
}
@font-face {
font-family: 'Brut';
src: url('Brut_Grotesque-Text.otf');
}
@font-face {
font-family: 'Sinistre';
src: url('Sinistre-S†Caroline.otf');
}
body{
display: block;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
text-align: left;
position: absolute;
background: black;
width: 98%;
}
h1 {
display: none;
position: fixed;
background: blue;
color: black;
font-family: helvetica;
text-align: left;
line-height: 110%;
font-weight: 900;
position: fixed;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
top: 10px;
left: 10px;
z-index: 300;
}
.title {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.title2 {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Custom';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.titlevertical {
display: none;
position: fixed;
font-size: 100px;
line-height: 100%;
font-family: 'Roboto';
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
bottom: 0;
left: 0;
z-index: 100;
}
.screen {
display: block;
top: 0;
left: 0;
font-size: 60px;
font-family: 'Roboto';
color: white;
z-index: 10;
}
a {
color: grey;
}
.titleverticalleft {
display: none;
}
.titlebottom {
display: none;
}
h1 {
display:none;
}
h2 {
display:none;
}
p {
display:none;
}
p2 {
display:none;
}
p3 {
display:none;
}
p3special {
display:none;
}
line {
display:none;
}
bold {
display:none;
}
medium {
display:none;
}
garamond {
display:none;
}
brut {
display:none
}
* {
box-sizing: border-box;
}
.row:after {
display:none;
}
.column {
display:none;
}
.columnleft {
display:none;
}
.columnleft2 {
display:none;
}
.columnmiddle {
display:none;
}
.columnright {
display:none;
}
italic {
display:none;
}
bigitalic {
display:none;
}
bigp {
display:none;
}
bigmedium {
display:none;
}
symbol {
display: none;
}
back {
display: none;
}
p12 {
display: none;
}
p13 {
display: none;
}
}
* {
box-sizing: border-box;
}
.row {
display: flex;
}
/* Create two equal columns that sits next to each other */
.column {
vertical-align: text-bottom;
flex: 100%;
padding: 10px;
height: 180px; /* Should be removed. Only for demonstration */
}
</style>
</head>
</html>
<div><span class="screen">CTRL(⌘)+ P to print the A0 grid (W.I.P)<br>
Please use <a href="https://download-chromium.appspot.com/" target="blank">Chromium</a> Open Source browser and set to Horizontal A0<br><br>
A0 Grid PDF<a href="A0Grid_Wor(l)ds_For_The_Future.pdf" target="blank">(here)</a>
<br>
Thank you!
</span></div>
<!--<div><span class="titlevertical">WѺR(L)DS FҨӶ THξ FUTURЭ</span></div>
<div><span class="titleverticalleft">XPUB 2020</span></div>
<div><span class="titlebottom">WOR(L)DS FOR A FUTURE is a re-publishing project compiled by the first year students and mentoring team of the Master programme Experimental Publishing (XPUB) of the Piet Zwart Institute, Willem de Kooning Academy, as part of the Special Issue project #13. The project aims to explore the re-publishing of the publication series Words for the Future through the students' discursive and artistic responses to the original collection.<br></span></div>-->
<body>
<div class="row">
<div class="columnleft" style="background-color:white">
<p3>
<br>
<italic>Legenda:</italic>
<br><br><br>
<line>————————————————————————————</line>
<br>
<symbol>L</symbol>&#9;<italic>Liquid</italic><br><p2><br>This symbol represents a perpetual state of flux between information and ideas.
The output transforms into input that flows in self-sustaining circularities, thus, shaping a series of dynamic feedback loops to create new meaning.</p2>
<br><br>
<line>————————————————————————————</line>
<br>
<symbol>O</symbol>&#9;<italic>Otherness</italic><br><p2><br>Shaped as a small autonomous community with a specific identity. Small communities could be developed close to each other, but only on the same strip of land. If theyre adjacent they build a network to share resource and culture.</p2>
<br>
<line>————————————————————————————</line>
<br>
<symbol>P</symbol><italic>Practical Vision</italic><br><p2><br>The Practical Vision symbol sets of a series of communication skills: when two Practical Visions watch themselves they create translations between different languages. A Practical Vision attempts to protect past and future cultures and works through organic and inorganic networks.</p2>
<br>
<line>————————————————————————————</line>
<br>
<symbol>E</symbol>&#9;<italic>Eco-Swaraj</italic><br><p2><br>Self-decision making in an eco community is what Eco-Swaraj is about. This symbol could be seen as a flower, people holding hands, a thought before a decision is being made.</p2>
<br><br>
<line>————————————————————————————</line>
<br>
<symbol>H</symbol>&#9;<italic>Hope</italic><br><p2><br>This symbol illustrates the destination of Hope, written by Gurur Ertem. The author considers it as a solution
to overcome the darkness in our present and future life.</p2>
<br><br><br>
<line>————————————————————————————</line>
<br>
<symbol>U</symbol>&#9;<italic>Undecidability</italic><br><p2><br>As undecidability embraces open imaginaries and multiplicities, the symbol was inspired by fog, a natural element.</p2>
<br><br><br>
<line>————————————————————————————</line>
<br>
<symbol>R</symbol>&#9;<italic>Resurgence</italic><br><p2><br>This volcano depicts the legendary moment of long forgotten matter finally breaking through its suffocating covers, forcefully spilling out into the open with the heat of a thousand suns.</p2>
<br><br>
<line>————————————————————————————</line>
<br>
<symbol>M</symbol>&#9;<italic>!?</italic><br><p2><br>The symbol for !? simply shows the two punctuations marks fighting to represent the conflict expressed in the text.</p2>
<br><br><br>
<line>————————————————————————————</line>
<br>
<symbol>A</symbol>&#9;<italic>Atata</italic><br><p2><br>Atatas symbol represents being in relation to ohers as an active act of reciprocity, It binds, connects and links beings.</p2>
<br><br><br>
<line>————————————————————————————</line>
<br>
<symbol>T</symbol>&#9;<italic>Tense</italic><br><p2><br>Tense's symbol depicts the encapsulation of a subject inside a description. </p2>
<br><br><br><br>
<line>————————————————————————————</line>
</p3>
</div>
<div class="columnleft2" style="background-color:white;">
</div>
<div class="columnmiddle" style="background-color:white;">
</div>
<div class="columnright " style="background-color:white;">
<!--<span class="title">WOr(L)DS<br>FoR THE FuTUrE</span>-->
<span class="title2">WOR(<symbol2>L</symbol2>)DS<br> FOR THE FUTURE</span>
<div><span class="bigitalic">This empty grid proposes a space for unbound curiosity; the kind that is about openness, wonder<br> and play. Use the provided symbols, tools and elements from the different words' explorations that you find within the publication, in order to imagine and draw (map) your Wor(l)ds for the Future.</span></div>
</div>
</div>
</body>