Merge branch 'master' of git.xpub.nl:/var/www/git.xpub.nl/repos/issue.xpub.nl

8 years ago · 31847466ea
parent f2dc87ca8c 258215800f
commit 31847466ea
32 changed files with 212 additions and 192 deletions
--- a/01/img/_DSC1931.jpg
+++ b/01/img/_DSC1931.jpg
--- a/01/img/_DSC1943.jpg
+++ b/01/img/_DSC1943.jpg
--- a/01/img/_DSC2013.jpg
+++ b/01/img/_DSC2013.jpg
--- a/01/img/_DSC2019.jpg
+++ b/01/img/_DSC2019.jpg
--- a/01/img/_DSC2066.jpg
+++ b/01/img/_DSC2066.jpg
--- a/01/img/_DSC2067.jpg
+++ b/01/img/_DSC2067.jpg
--- a/01/img/_DSC2254.jpg
+++ b/01/img/_DSC2254.jpg
--- a/01/img/_DSC2327.jpg
+++ b/01/img/_DSC2327.jpg
--- a/01/img/_DSC2334.jpg
+++ b/01/img/_DSC2334.jpg
--- a/01/img/op=op
+++ b/01/img/op=op
--- a/01/img/oplaunch/mpv-shot0002.png
+++ b/01/img/oplaunch/mpv-shot0002.png
--- a/01/img/oplaunch/mpv-shot0005.png
+++ b/01/img/oplaunch/mpv-shot0005.png
--- a/01/img/oplaunch/mpv-shot0015.png
+++ b/01/img/oplaunch/mpv-shot0015.png
--- a/01/img/oplaunch/mpv-shot0016.png
+++ b/01/img/oplaunch/mpv-shot0016.png
--- a/01/img/oplaunch/mpv-shot0017.png
+++ b/01/img/oplaunch/mpv-shot0017.png
--- a/01/img/oplaunch/mpv-shot0018.png
+++ b/01/img/oplaunch/mpv-shot0018.png
--- a/01/img/oplaunch/mpv-shot0031.png
+++ b/01/img/oplaunch/mpv-shot0031.png
--- a/01/img/oplaunch/mpv-shot0032.png
+++ b/01/img/oplaunch/mpv-shot0032.png
--- a/01/img/oplaunch/mpv-shot0033.png
+++ b/01/img/oplaunch/mpv-shot0033.png
--- a/01/img/oplaunch/mpv-shot0034.png
+++ b/01/img/oplaunch/mpv-shot0034.png
--- a/01/img/oplaunch/mpv-shot0036.png
+++ b/01/img/oplaunch/mpv-shot0036.png
--- a/01/img/oplaunch/mpv-shot0037.png
+++ b/01/img/oplaunch/mpv-shot0037.png
--- a/01/img/oplaunch/mpv-shot0038.png
+++ b/01/img/oplaunch/mpv-shot0038.png
--- a/01/img/oplaunch/mpv-shot0039.png
+++ b/01/img/oplaunch/mpv-shot0039.png
--- a/01/img/oplaunch/mpv-shot0040.png
+++ b/01/img/oplaunch/mpv-shot0040.png
--- a/01/img/oplaunch/mpv-shot0047.png
+++ b/01/img/oplaunch/mpv-shot0047.png
--- a/01/img/oplaunch/mpv-shot0054.png
+++ b/01/img/oplaunch/mpv-shot0054.png
--- a/01/img/trailer.gif
+++ b/01/img/trailer.gif
--- a/01/index.html
+++ b/01/index.html
@ -1,201 +1,84 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
-	<meta charset="UTF-8">    
+    <meta charset="UTF-8">
-	<style>
+    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
-		@font-face {
+    <title>XPUB Special Issue #1 OP=OP</title>  
-			font-family: "cinetype";
+  </head>
 			src: url('font/GT-Cinetype-Bold.eot'); /* IE9 Compat Modes */
 			src: url('font/GT-Cinetype-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 				url('font/GT-Cinetype-Bold.otf') format("opentype"),
 				url('font/GT-Cinetype-Bold.ttf') format("truetype"),
 				url('font/GT-Cinetype-Bold.woff') format("woff");
 		}
    	body{
-        margin: 0;
+  <body>
        padding: 0;
        border: 0;
        background-image: url("img/cropped-pattern.jpg");
        background-repeat: repeat;
        height:1480px;
        font-family: "cinetype", Helvetica, sans-serif;
        color:#ff662c;
-    }
+    <div class="parent">  
-    a{
+      <div class="info-op-is-op">
-    color:#ff662c;
+	<div class="white">	
-
+          <h1>SAT 10.12.16</</h1>
-    
+			     <h1>19:00-23:00</h1>
    }
    .big{
    font-size: 30px;
    text-align: right;
    line-height: 10px;
    }
    .small{
    font-size: 12px;
    text-align: justify;
    text-align-last: right;
    }
    .small-right{
    font-size: 12px;
    text-align: right;
    }
    .icons{
    width:20px;
    margin: 10px;
    }
        /*BIGGER THAN 800PX SCREEN*/
     @media (min-width: 800px){
    .big-two{
    font-size: 30px;
    text-align: right;
        line-height: 10px;
    }
         .info-op-is-op{
        position:fixed;
        right:50px;
        top:19px;
        width:650px;
        height:588px;
        background-color: white;
        padding:10px 20px 10px 30px;
 }
 }
     /*SMALLER THAN 800PX SCREEN*/
    @media (max-width: 800px){
              .big-two{
              font-size: 30px;
              text-align: right;
              line-height: 30px;
    }
       .info-op-is-op{
        position:relative;
        top:80px;       
        width:80%;
        /*height:588px;*/
        padding:10px 20px 10px 30px;
    }
        .info-op-is-op-transparent{
        position:fixed;
        width:100%;
        height:100%;
        background-color: white;
        opacity:0.8;
        padding:10px 20px 10px 30px;
        }
    }
    /*SMALLER THAN 480PX SCREEN*/
    @media (max-width: 480px) {
          .big-two{
              font-size: 30px;
              text-align: right;
              line-height: 30px;
    }
       .info-op-is-op{
        position:relative;
        top:80px;       
        width:80%;
        /*height:588px;*/
        padding:10px 20px 10px 30px;
    }
        .info-op-is-op-transparent{
        position:fixed;
        width:100%;
        height:100%;
        background-color: white;
        opacity:0.8;
        padding:10px 20px 10px 30px;
        }
 }
    </style>
    </head>
 <body>
    <div class="info-op-is-op-transparent"></div>
    <div class="info-op-is-op">
        <p class="big">SAT 10.12.16</p>
        <p class="big">19:00-23:00</p>
        </br>
-        <p class="big">WORM</p>
+        <h1>WORM</h1>
-        <p class="big-two">Boomgaardsstraat 71, Rotterdam</p>
+        <h1>Boomgaardsstraat 71, Rotterdam</h1>
    </br>
-      <!--  <p class="small">OP=OP is a publication about scarcity of resources that takes the shape of a board game. It questions the capitalist system, and players compete to become wealthier fighting to get the available resources and complete a series of missions. Come get the publication and play the game with us on the 10th of December at 19:00 @ <a href="https://www.facebook.com/worm.rotterdam/" target="_blank">WORM</a>. Be ready for ‘dumpster diving’ food, drinks, dice and loads of fun.  
+    <!--  <p class="small">OP=OP is a publication about scarcity of resources that takes the shape of a board game. It questions the capitalist system, and players compete to become wealthier fighting to get the available resources and complete a series of missions. Come get the publication and play the game with us on the 10th of December at 19:00 @ <a href="https://www.facebook.com/worm.rotterdam/" target="_blank">WORM</a>. Be ready for ‘dumpster diving’ food, drinks, dice and loads of fun.  
-            </p> -->
+          </p> -->
-        <p class="small-right" style="margin-top:-10px; margin-bottom:25px;">19:00-19:30 - Presentation <br/>
+          <p class="small-right" >19:00-19:30 - Presentation <br/>
-19:30-23:00 - Game + drinks + snacks!</p>
+	    19:30-23:00 - Game + drinks + snacks!</p>
-
+
-    <p class="small">OP=OP is the first special issue conceptualised, developed and produced this autumn by the students from the Experimental Publishing study path (XPUB) at the Media Design and Communication Master, Piet Zwart Institute. Derived from Monopoly, the publication takes the form of a board game that explores the topic of scarcity, with players competing for assets, services and raw materials, following their pre-defined agendas, establishing both regulated and unregulated trade transactions, while witnessing an accelerating depletion of all resources. By amplifying, modifying, and adding to the initial rules of Monopoly, OP=OP aims at triggering discussions on property, trades, ecology, and markets, thus breaking through the consumerist sugarcoating culture of the infamous board game, and bring back to light its origin as a critical device.</p>
+	  <p>OP=OP is the first special issue conceptualised, developed and produced this autumn by the students from the Experimental Publishing study path (XPUB) at the Media Design and Communication Master, Piet Zwart Institute. Derived from Monopoly, the publication takes the form of a board game that explores the topic of scarcity, with players competing for assets, services and raw materials, following their pre-defined agendas, establishing both regulated and unregulated trade transactions, while witnessing an accelerating depletion of all resources. By amplifying, modifying, and adding to the initial rules of Monopoly, OP=OP aims at triggering discussions on property, trades, ecology, and markets, thus breaking through the consumerist sugarcoating culture of the infamous board game, and bring back to light its origin as a critical device.</p>
-    
+	  
-    <p class="small">Come get your copy of the limited publication/board hybrid and play the game with us on the 10th of December at 19:00 WORM Rotterdam (Slash Gallery)! We will serve special 'dumpster dived' food and snacks for all the players, and screen randomised extracts from WORM's Piratebay in relation to the special issue theme!</p>
+	  <p>Come get your copy of the limited publication/board hybrid and play the game with us on the 10th of December at 19:00 WORM Rotterdam (Slash Gallery)! We will serve special 'dumpster dived' food and snacks for all the players, and screen randomised extracts from WORM's Piratebay in relation to the special issue theme!</p>
-        
+          
-    <p class="small">This publication is brought to you by: Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González, Julia Kul, Margreet Riphagen, Kimmy Spreeuwenberg, and Noémie Vidé.</p>
+	  <p>This publication is brought to you by: Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González, Julia Kul, Margreet Riphagen, Kimmy Spreeuwenberg, and Noémie Vidé.</p>
-    
+	  
-        <p class="small" style="text-align:right;"><a href="https://www.instagram.com/xpub.pietzwart/" target="_blank"><img class="icons" src="img/Instagram%20Filled-50.png"/></a><a href="https://twitter.com/pzixpub" target="_blank"><img class="icons" src="img/Twitter-48.png"/></a><a href="https://www.facebook.com/xpub.pietzwart/" target="_blank"><img class="icons" src="img/Facebook-48.png"/></a></p>
+          <p class="small" style="text-align:right;"><a href="https://www.instagram.com/xpub.pietzwart/" target="_blank"><img class="icons" src="img/Instagram%20Filled-50.png"/></a><a href="https://twitter.com/pzixpub" target="_blank"><img class="icons" src="img/Twitter-48.png"/></a><a href="https://www.facebook.com/xpub.pietzwart/" target="_blank"><img class="icons" src="img/Facebook-48.png"/></a></p>
-    
+	</div>
-        
+	
-
+	<img src='img/oplaunch/mpv-shot0047.png' />
-</div>
+	<img src='img/oplaunch/mpv-shot0054.png' />
-</body>
+	<img src='img/oplaunch/mpv-shot0005.png' />
 	<img src='img/oplaunch/mpv-shot0015.png' />
 	<img src='img/oplaunch/mpv-shot0016.png' />
 	<img src='img/oplaunch/mpv-shot0017.png' />
 	<img src='img/oplaunch/mpv-shot0018.png' />
 	<img src='img/oplaunch/mpv-shot0031.png' />
 	<img src='img/oplaunch/mpv-shot0032.png' />
 	<img src='img/oplaunch/mpv-shot0033.png' />
 	<img src='img/oplaunch/mpv-shot0034.png' />
 	<img src='img/oplaunch/mpv-shot0036.png' />
 	<img src='img/oplaunch/mpv-shot0037.png' />
 	<img src='img/oplaunch/mpv-shot0038.png' />
 	<img src='img/oplaunch/mpv-shot0039.png' />
 	<img src='img/oplaunch/mpv-shot0040.png' />
      </div>
      <div class="images">
 	<!-- img src="img/op=op 2.0 scan for cover.jpg" / -->
 	<img src="img/_DSC1931.jpg" />
 	<img src="img/trailer.gif" />
 	<img src="img/_DSC1943.jpg" />
 	<img src="img/_DSC2013.jpg" />
 	<img src="img/_DSC2019.jpg" />
 	<img src="img/_DSC2066.jpg" />
 	<img src="img/_DSC2067.jpg" />
 	<!--
 	    <img src="img/_DSC2082.jpg" />
 	    <img src="img/_DSC2102.jpg" />
 	    <img src="img/_DSC2106.jpg" />
 	    <img src="img/_DSC2116.jpg" />
 	    <img src="img/_DSC2117.jpg" />
 	    <img src="img/_DSC2136.jpg" />
 	    <img src="img/_DSC2137.jpg" />
 	    <img src="img/_DSC2144.jpg" />
 	    <img src="img/_DSC2167.jpg" />
 	    <img src="img/_DSC2182.jpg" />
 	    -->
 	<img src="img/_DSC2254.jpg" />
 	<img src="img/_DSC2327.jpg" />
 	<img src="img/_DSC2334.jpg" />
      </div>
    </div>    
  </body>
 </html>
--- a/01/style.css
+++ b/01/style.css
@ -0,0 +1,102 @@
@font-face {
    font-family: "cinetype";
    src: url('font/GT-Cinetype-Bold.eot'); /* IE9 Compat Modes */
    src: url('font/GT-Cinetype-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/GT-Cinetype-Bold.otf') format("opentype"),
    url('font/GT-Cinetype-Bold.ttf') format("truetype"),
    url('font/GT-Cinetype-Bold.woff') format("woff");
 }
 body{
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url("img/cropped-pattern.jpg");
    background-repeat: repeat;
    font-family: "cinetype", Helvetica, sans-serif;
    color:#ff662c;
    font-size:14pt;
 }
 a, a:visited{
    color:#ff662c;
    text-decoration:underline;
 }
 h1{
    font-size: 1.8em;
    margin-bottom: 0px;
    margin-top: 0px;
    text-align: right;
  }
 p { font-size: 1.2em;}
 .big{
    font-size: 30px;
    text-align: right;
    line-height: 10px;    
 }
 .small{
    font-size: 12px;
    text-align: justify;
    text-align-last: right;
 }
 .small-right{
    font-size: 12px;
    text-align: right;
 }
 .icons{
    width:20px;
    margin: 10px;
 }
 div.parent {   }
 .info-op-is-op{
    float:right;
    display:inline-block;
    padding: 10px 20px 10px 30px;
    text-align: left;
    margin-left: auto;
    margin-right: 10px;
    width:40%;    
 }
 div.white{    background-color: white;
 	      padding: 10px 20px 10px 30px;
 	 }
 div.images {
    float:left;
    display:inline-block;
    margin-left: 10px;
    margin-right: auto;
    width:40%;    
 } 
 img {
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
 }
@media (max-width:900px){
    div.parent{margin-left: 100px;}
    div.white {margin:10px;}
    div.info-op-is-op{    width:100%;}    
    div.images {    width:100%;} 
 }
--- a/index.html
+++ b/index.html
@ -4,7 +4,8 @@
    <meta charset="utf-8">
    <title>XPUB Special Issues</title>
    <link rel="stylesheet" href="style.css">
-  </head>
+
 </head>
  <body>
 	<div id="header"><h1>XPUB Special Issues</h1></div>
    <div id="container">
@ -73,4 +74,31 @@
 		</div>
 	</div>
  </body>
    <script>
 function rand_deg(){
    var deg = Math.round(Math.random()*180)+'deg';
    return deg
 }
 function rand_rgb(){
    function rand(){v = Math.round(Math.random()*255);
 		    return v}
    var color = 'rgb('+rand()+','+ rand() +','+ rand() + ')'
    return color
 }
 var gradient = 'background:linear-gradient(' +
    rand_deg() + ',' +
    rand_rgb() +
    ',' +
    rand_rgb() +
    ')';
 var body = document.getElementsByTagName("body")[0];
 body.setAttribute("style", gradient);
    </script>
 </html>
--- a/style.css
+++ b/style.css
@ -1,3 +1,8 @@
 body {
 /*background: linear-gradient( 45deg, blue, red );*/
 }
 h1 {
 	font-size: calc(3vW + 3vH);
 	text-align: center;
@ -17,3 +22,5 @@ iframe {
 	height: 60vH;
 }
 a, a:visited {color: black;}