index page continuations
parent
7922c5adcb
commit
8dc950ddc1
@ -0,0 +1,105 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>XPUB Special Issues</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/osp-din" type="text/css"/>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="header"><h1>XPUB Special Issues</h1></div>
|
||||||
|
<div id="container">
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="01" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="01">Issue 01</a></h2>
|
||||||
|
<h2>OP=OP<br />20161210</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="02" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="02">Issue 02</a></h2>
|
||||||
|
<h2>TGC #3<br />20170324</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="03" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="03">Issue 03</a></h2>
|
||||||
|
<h2>Interfacing the Law<br />20170615</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="04" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="04">Issue 04</a></h2>
|
||||||
|
<h2>20171207</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="05" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="05">Issue 05</a></h2>
|
||||||
|
<h2>???</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="06" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="06">Issue 06</a></h2>
|
||||||
|
<h2>???</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="07" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="07">Issue 07</a></h2>
|
||||||
|
<h2>???</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="08" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="08">Issue 08</a></h2>
|
||||||
|
<h2>???</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="element">
|
||||||
|
<iframe src="09" scrolling="no"></iframe>
|
||||||
|
<div class="info">
|
||||||
|
<h2><a href="09">Issue 09</a></h2>
|
||||||
|
<h2>???</h2>
|
||||||
|
</div>
|
||||||
|
</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>
|
||||||
|
Before Width: | Height: | Size: 368 KiB After Width: | Height: | Size: 368 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 506 B |
|
Before Width: | Height: | Size: 233 KiB After Width: | Height: | Size: 233 KiB |
|
Before Width: | Height: | Size: 743 KiB After Width: | Height: | Size: 743 KiB |
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 117 KiB |
|
Before Width: | Height: | Size: 7.4 MiB After Width: | Height: | Size: 7.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 430 KiB |
@ -1,105 +1,164 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="UTF-8">
|
||||||
<title>XPUB Special Issues</title>
|
<title>XPUB Special Issues</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" type="text/css" href="stylesheet.css">
|
||||||
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/osp-din" type="text/css"/>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="header"><h1>XPUB Special Issues</h1></div>
|
<header></header>
|
||||||
<div id="container">
|
<div class="intro">
|
||||||
<div class="element">
|
<p><b>XPUB Special Issues</b></p>
|
||||||
<iframe src="01" scrolling="no"></iframe>
|
<p>Experimental Publishing (XPUB) is a new study path of the Piet Zwart Institute's Media Design Master programme.</p>
|
||||||
<div class="info">
|
<p>XPUB's interests in publishing are twofold:</p>
|
||||||
<h2><a href="01">Issue 01</a></h2>
|
<p><b>first</b>, publishing as the inquiry and participation into the technological frameworks, political context and cultural processes through which things are made public;</p>
|
||||||
<h2>OP=OP<br />20161210</h2>
|
<p>and <b>second</b>, publishing as the desire to expand the means of discourse circulation beyond print media and its direct digital translation.</p>
|
||||||
</div>
|
<br>
|
||||||
|
<p><a href="https://xpub.nl" target="_blank">xpub.nl</a><br>
|
||||||
|
<a href="https://pzimediadesign.nl" target="_blank">pzimediadesign.nl</a></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- min. width of image is 590px -->
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<!-- Special Issue 1 + 2 + 3 -->
|
||||||
|
<div id="special-issue-1" class="issue">
|
||||||
|
<a href="https://issue.xpub.nl/01/">
|
||||||
|
<div class="issue-nr">Special<br> Issue 1</div>
|
||||||
|
<div class="issue-date">December 2016</div>
|
||||||
|
<div class="issue-img"><img src="img/special-issue-1.jpg"></div>
|
||||||
|
<div class="issue-title">OP=OP</div>
|
||||||
|
<div class="issue-text">
|
||||||
|
<p>Dear reader,</p>
|
||||||
|
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||||
|
<p>Looking forward seeing you there!</p>
|
||||||
|
<p>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>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
<div id="special-issue-2" class="issue">
|
||||||
<iframe src="02" scrolling="no"></iframe>
|
<a href="https://issue.xpub.nl/02/">
|
||||||
<div class="info">
|
<div class="issue-nr">Special<br> Issue 2</div>
|
||||||
<h2><a href="02">Issue 02</a></h2>
|
<div class="issue-date">March 2016</div>
|
||||||
<h2>TGC #3<br />20170324</h2>
|
<div class="issue-img"><img src="img/special-issue-2.jpg"></div>
|
||||||
</div>
|
<div class="issue-title">TGC #3</div>
|
||||||
|
<div class="issue-text">
|
||||||
|
<p>Dear reader,</p>
|
||||||
|
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||||
|
<p>Looking forward seeing you there!</p>
|
||||||
|
<p>Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Francisco González, Margreet Riphagen, Kimmy Spreeuwenberg</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
<div id="special-issue-3" class="issue">
|
||||||
<iframe src="03" scrolling="no"></iframe>
|
<a href="https://issue.xpub.nl/03/">
|
||||||
<div class="info">
|
<div class="issue-nr">Special<br> Issue 3</div>
|
||||||
<h2><a href="03">Issue 03</a></h2>
|
<div class="issue-date">June 2017</div>
|
||||||
<h2>Interfacing the Law<br />20170615</h2>
|
<div class="issue-img"><img src="img/special-issue-3.png"></div>
|
||||||
</div>
|
<div class="issue-title">Interfacing the Law</div>
|
||||||
|
<div class="issue-text">
|
||||||
|
<p>Dear reader,</p>
|
||||||
|
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||||
|
<p>Looking forward seeing you there!</p>
|
||||||
|
<p>Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
|
||||||
<iframe src="04" scrolling="no"></iframe>
|
<!-- Special Issue 4 + 5 + 6 -->
|
||||||
<div class="info">
|
<div id="special-issue-4" class="issue">
|
||||||
<h2><a href="04">Issue 04</a></h2>
|
<a href="https://issue.xpub.nl/04/">
|
||||||
<h2>20171207</h2>
|
<div class="issue-nr">Special<br> Issue 4</div>
|
||||||
</div>
|
<div class="issue-date">December 2017</div>
|
||||||
|
<div class="issue-img"><img src="img/special-issue-4.png"></div>
|
||||||
|
<div class="issue-title">A Bed, a Chair and a Table</div>
|
||||||
|
<div class="issue-text">
|
||||||
|
<p>Dear reader,</p>
|
||||||
|
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
||||||
|
<p>Looking forward seeing you there!</p>
|
||||||
|
<p>Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
<div id="special-issue-5" class="issue future">
|
||||||
<iframe src="05" scrolling="no"></iframe>
|
<a href="#">
|
||||||
<div class="info">
|
<div class="issue-nr">Special<br> Issue 5</div>
|
||||||
<h2><a href="05">Issue 05</a></h2>
|
<div class="issue-date"></div>
|
||||||
<h2>???</h2>
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
</div>
|
<div class="issue-title"></div>
|
||||||
|
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
<div id="special-issue-6" class="issue future">
|
||||||
<iframe src="06" scrolling="no"></iframe>
|
<a href="#">
|
||||||
<div class="info">
|
<div class="issue-nr">Special<br> Issue 6</div>
|
||||||
<h2><a href="06">Issue 06</a></h2>
|
<div class="issue-date"></div>
|
||||||
<h2>???</h2>
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
</div>
|
<div class="issue-title"></div>
|
||||||
|
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
|
||||||
<iframe src="07" scrolling="no"></iframe>
|
<!-- Special Issue 7 + 8 + 9 -->
|
||||||
<div class="info">
|
<div id="special-issue-7" class="issue future">
|
||||||
<h2><a href="07">Issue 07</a></h2>
|
<a href="#">
|
||||||
<h2>???</h2>
|
<div class="issue-nr">Special<br> Issue 7</div>
|
||||||
</div>
|
<div class="issue-date"></div>
|
||||||
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
|
<div class="issue-title"></div>
|
||||||
|
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
<div id="special-issue-8" class="issue future">
|
||||||
<iframe src="08" scrolling="no"></iframe>
|
<a href="#">
|
||||||
<div class="info">
|
<div class="issue-nr">Special<br> Issue 8</div>
|
||||||
<h2><a href="08">Issue 08</a></h2>
|
<div class="issue-date"></div>
|
||||||
<h2>???</h2>
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
</div>
|
<div class="issue-title"></div>
|
||||||
|
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="element">
|
<div id="special-issue-9" class="issue future">
|
||||||
<iframe src="09" scrolling="no"></iframe>
|
<a href="#">
|
||||||
<div class="info">
|
<div class="issue-nr">Special<br> Issue 9</div>
|
||||||
<h2><a href="09">Issue 09</a></h2>
|
<div class="issue-date"></div>
|
||||||
<h2>???</h2>
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
</div>
|
<div class="issue-title"></div>
|
||||||
|
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script>
|
<!-- Special Issue 10 + 11 + 12 -->
|
||||||
|
<div id="special-issue-10" class="issue future">
|
||||||
function rand_deg(){
|
<a href="#">
|
||||||
var deg = Math.round(Math.random()*180)+'deg';
|
<div class="issue-nr">Special<br> Issue 10</div>
|
||||||
return deg
|
<div class="issue-date"></div>
|
||||||
}
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
function rand_rgb(){
|
<div class="issue-title"></div>
|
||||||
function rand(){v = Math.round(Math.random()*255);
|
|
||||||
return v}
|
</a>
|
||||||
var color = 'rgb('+rand()+','+ rand() +','+ rand() + ')'
|
</div>
|
||||||
return color
|
<div id="special-issue-11" class="issue future">
|
||||||
}
|
<a href="#">
|
||||||
|
<div class="issue-nr">Special<br> Issue 11</div>
|
||||||
var gradient = 'background:linear-gradient(' +
|
<div class="issue-date"></div>
|
||||||
rand_deg() + ',' +
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
rand_rgb() +
|
<div class="issue-title"></div>
|
||||||
',' +
|
|
||||||
rand_rgb() +
|
</a>
|
||||||
')';
|
</div>
|
||||||
|
<div id="special-issue-12" class="issue future">
|
||||||
var body = document.getElementsByTagName("body")[0];
|
<a href="#">
|
||||||
body.setAttribute("style", gradient);
|
<div class="issue-nr">Special<br> Issue 12</div>
|
||||||
|
<div class="issue-date"></div>
|
||||||
|
<div class="issue-img"><img src="img/unknown.png"></div>
|
||||||
</script>
|
<div class="issue-title"></div>
|
||||||
|
|
||||||
</html>
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 568 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
@ -1,164 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>XPUB Special Issues</title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="stylesheet.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header>
|
|
||||||
XPUB Special Issues
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<!-- min. width of image needs to be 590px -->
|
|
||||||
|
|
||||||
<div class="background">
|
|
||||||
<img src="img/special-issue-4.png">
|
|
||||||
</div>
|
|
||||||
<section>
|
|
||||||
<!-- Special Issue 1 + 2 + 3 -->
|
|
||||||
<div id="special-issue-1" class="issue">
|
|
||||||
<a href="https://issue.xpub.nl/01/">
|
|
||||||
<div class="issue-title">OP=OP</div>
|
|
||||||
<div class="issue-nr">Special Issue 1</div>
|
|
||||||
<div class="issue-abstract">playing, implementing</div>
|
|
||||||
<div class="issue-date">December 2016</div>
|
|
||||||
<div class="issue-img"><img src="img/special-issue-1-bw.jpg"></div>
|
|
||||||
</a>
|
|
||||||
<div class="issue-text">
|
|
||||||
<p>Dear reader,</p>
|
|
||||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
|
||||||
<p>Looking forward seeing you there!</p>
|
|
||||||
<p>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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-2" class="issue">
|
|
||||||
<a href="https://issue.xpub.nl/02/">
|
|
||||||
<div class="issue-title">TGC #3</div>
|
|
||||||
<div class="issue-nr">Special Issue 2</div>
|
|
||||||
<div class="issue-abstract">merging, unexpected publishing</div>
|
|
||||||
<div class="issue-date">March 2016</div>
|
|
||||||
<div class="issue-img"><img src="img/special-issue-2-bw.jpg"></div>
|
|
||||||
</a>
|
|
||||||
<div class="issue-text">
|
|
||||||
<p>Dear reader,</p>
|
|
||||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
|
||||||
<p>Looking forward seeing you there!</p>
|
|
||||||
<p>Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Francisco González, Margreet Riphagen, Kimmy Spreeuwenberg</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-3" class="issue">
|
|
||||||
<a href="https://issue.xpub.nl/03/">
|
|
||||||
<div class="issue-title">Interfacing the Law</div>
|
|
||||||
<div class="issue-nr">Special Issue 3</div>
|
|
||||||
<div class="issue-abstract">to dribble, slightly</div>
|
|
||||||
<div class="issue-date">June 2017</div>
|
|
||||||
<div class="issue-img"><img src="img/special-issue-3-bw.png"></div>
|
|
||||||
</a>
|
|
||||||
<div class="issue-text">
|
|
||||||
<p>Dear reader,</p>
|
|
||||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
|
||||||
<p>Looking forward seeing you there!</p>
|
|
||||||
<p>Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Special Issue 4 + 5 + 6 -->
|
|
||||||
<div id="special-issue-4" class="issue">
|
|
||||||
<a href="https://issue.xpub.nl/04/">
|
|
||||||
<div class="issue-title">A Bed, a Chair and a Table</div>
|
|
||||||
<div class="issue-nr">Special Issue 4</div>
|
|
||||||
<div class="issue-abstract">...</div>
|
|
||||||
<div class="issue-date">December 2017</div>
|
|
||||||
<div class="issue-img"><img src="img/special-issue-4.png"></div>
|
|
||||||
</a>
|
|
||||||
<div class="issue-text">
|
|
||||||
<p>Dear reader,</p>
|
|
||||||
<p>Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.</p>
|
|
||||||
<p>Looking forward seeing you there!</p>
|
|
||||||
<p>Emily Buzzo, Karina Dukalska, Max Franklin, Giulia de Giovanelli, Clàudia Giralt, Pleun Gremmen, Francisco González</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-5" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 5</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-6" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 6</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Special Issue 7 + 8 + 9 -->
|
|
||||||
<div id="special-issue-7" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 7</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-8" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 8</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-9" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 9</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Special Issue 10 + 11 + 12 -->
|
|
||||||
<div id="special-issue-10" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 10</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-11" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 11</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="special-issue-12" class="issue future">
|
|
||||||
<a href="#">
|
|
||||||
<div class="issue-title"></div>
|
|
||||||
<div class="issue-nr">Special Issue 12</div>
|
|
||||||
<div class="issue-abstract"></div>
|
|
||||||
<div class="issue-date"></div>
|
|
||||||
<div class="issue-img"><img src="img/unknown.png"></div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<footer>
|
|
||||||
<a href="https://xpub.nl" target="_blank">xpub.nl</a>
|
|
||||||
<a href="https://pzimediadesign.nl" target="_blank">pzimediadesign.nl</a>
|
|
||||||
</footer>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,179 +0,0 @@
|
|||||||
body{
|
|
||||||
/*background-color:rgb(212, 210, 251);*/
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* header, footer, future */
|
|
||||||
header, .issue.future, footer{
|
|
||||||
font-family: 'sans-serif';
|
|
||||||
}
|
|
||||||
header, footer{
|
|
||||||
width: auto;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 20px;
|
|
||||||
}
|
|
||||||
header{
|
|
||||||
margin:27px;
|
|
||||||
}
|
|
||||||
.issue.future .issue-title{
|
|
||||||
font-size: 14px;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.issue.future .issue-title:after, .issue.future .issue-abstract:after, .issue.future .issue-date:after{
|
|
||||||
content: '...';
|
|
||||||
}
|
|
||||||
|
|
||||||
/* custom rules per issue */
|
|
||||||
.issue#special-issue-1{
|
|
||||||
font-family: 'special-issue-1';
|
|
||||||
font-size: 110%;
|
|
||||||
letter-spacing: 0.2px;
|
|
||||||
}
|
|
||||||
.issue#special-issue-2{
|
|
||||||
font-family: 'special-issue-2';
|
|
||||||
font-size: 170%;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
.issue#special-issue-3{
|
|
||||||
font-family: 'special-issue-3';
|
|
||||||
font-size: 120%;
|
|
||||||
letter-spacing: 2.8px;
|
|
||||||
}
|
|
||||||
.issue#special-issue-4{
|
|
||||||
font-family: 'special-issue-4';
|
|
||||||
font-size: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* rules for the general structural elements */
|
|
||||||
section{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: columns;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin:0 12px;
|
|
||||||
}
|
|
||||||
div.background img{
|
|
||||||
position: fixed;
|
|
||||||
width: 100vw;
|
|
||||||
height: auto;
|
|
||||||
-webkit-filter: blur(25px);
|
|
||||||
opacity: 0.85;
|
|
||||||
z-index: -1;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.issue{
|
|
||||||
flex:3 3 auto;
|
|
||||||
display: inline-block;
|
|
||||||
width: calc(33.3% - 30px);
|
|
||||||
vertical-align: top;
|
|
||||||
margin:0 0 80px;
|
|
||||||
padding:50px 15px;
|
|
||||||
color:rgb(40,40,40);
|
|
||||||
}
|
|
||||||
.issue-title{
|
|
||||||
height: 160px;
|
|
||||||
font-size: 350%;
|
|
||||||
line-height: 55px;
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
.issue-abstract, .issue-nr, .issue-date{
|
|
||||||
font-size: smaller;
|
|
||||||
line-height: 16px;
|
|
||||||
margin-left:20px;
|
|
||||||
}
|
|
||||||
.issue-nr{
|
|
||||||
/*margin-left:0;
|
|
||||||
border:1px solid;
|
|
||||||
border-right:1px solid rgba(120,120,120,.5);
|
|
||||||
border-bottom:1px solid rgba(120,120,120,.5);
|
|
||||||
border-radius: 15px 15px 0 0;
|
|
||||||
padding:10px 10px 10px 20px;
|
|
||||||
margin-bottom:15px;*/
|
|
||||||
}
|
|
||||||
.issue-date{
|
|
||||||
margin-bottom:15px;
|
|
||||||
}
|
|
||||||
.issue-img img{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.issue-text{
|
|
||||||
margin:13px 10px 0 20px;
|
|
||||||
}
|
|
||||||
p{
|
|
||||||
margin:12px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* other */
|
|
||||||
a, a:active, a:visited{
|
|
||||||
color:inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
a:hover{
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* smaller screens */
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
body{
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 32px;
|
|
||||||
}
|
|
||||||
.issue{
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.issue-abstract, .issue-date, .issue-text, .issue-nr, .issue.future .issue-title{
|
|
||||||
margin-left: 100px;
|
|
||||||
margin-right: 40px;
|
|
||||||
}
|
|
||||||
.issue-title{
|
|
||||||
max-width: 500px;
|
|
||||||
height: auto;
|
|
||||||
font-size: 300%;
|
|
||||||
line-height: 70px;
|
|
||||||
margin-left:90px;
|
|
||||||
margin-top:20px;
|
|
||||||
margin-bottom:15px;
|
|
||||||
}
|
|
||||||
.issue-img img{
|
|
||||||
width: 100%;
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
.issue-text{
|
|
||||||
max-width: 600px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family:'special-issue-1';
|
|
||||||
src:url('fonts/GT-Cinetype-Bold.otf');
|
|
||||||
}
|
|
||||||
@font-face{
|
|
||||||
font-family:'special-issue-2';
|
|
||||||
src:url('fonts/Gidugu.ttf');
|
|
||||||
}
|
|
||||||
@font-face{
|
|
||||||
font-family:'special-issue-3';
|
|
||||||
src:url('fonts/dashness.ttf');
|
|
||||||
}
|
|
||||||
@font-face {
|
|
||||||
font-family: 'special-issue-4';
|
|
||||||
src: url('LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), url('LibreBaskerville-Regular.woff') format('woff'), url('LibreBaskerville-Regular.ttf') format('truetype'), url('LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face{
|
|
||||||
font-family:'default';
|
|
||||||
src:url('fonts/NotCourierSans.ttf');
|
|
||||||
font-weight: normal;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@font-face{
|
|
||||||
font-family:'default';
|
|
||||||
src:url('fonts/NotCourierSans-Bold.ttf');
|
|
||||||
font-weight: bold;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,230 @@
|
|||||||
|
body{
|
||||||
|
min-width: 1024px;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
background-color: rgb(254,247,220);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* header, intro, footer, future */
|
||||||
|
header, .intro, .issue.future, footer{
|
||||||
|
font-family: 'default';
|
||||||
|
}
|
||||||
|
header{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
top:0;
|
||||||
|
padding:0;
|
||||||
|
z-index: 1;
|
||||||
|
background-image: url('img/pix.png');
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
footer{
|
||||||
|
width: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
.intro{
|
||||||
|
position: absolute;
|
||||||
|
width: 150px;
|
||||||
|
height:100vh;
|
||||||
|
top:30px;
|
||||||
|
padding:10px;
|
||||||
|
font-size: 10pt;
|
||||||
|
line-height: 14pt;
|
||||||
|
color:rgb(15,15,93);
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
.intro p{
|
||||||
|
margin:0 0 10px;
|
||||||
|
}
|
||||||
|
.intro a{
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
.issue.future{
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
.issue.future .issue-title{
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.issue.future .issue-title:after{
|
||||||
|
content: '...';
|
||||||
|
}
|
||||||
|
.issue.future a:hover{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.issue.future img{
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* custom rules per issue */
|
||||||
|
.issue#special-issue-1{
|
||||||
|
font-family: 'special-issue-1';
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
}
|
||||||
|
.issue#special-issue-2{
|
||||||
|
font-family: 'special-issue-2';
|
||||||
|
font-size: 170%;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.issue#special-issue-3{
|
||||||
|
font-family: 'special-issue-3';
|
||||||
|
font-size: 120%;
|
||||||
|
letter-spacing: 2.5px;
|
||||||
|
}
|
||||||
|
.issue#special-issue-4{
|
||||||
|
font-family: 'special-issue-4';
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* rules for the general structural elements */
|
||||||
|
section{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: columns;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin:0 14px;
|
||||||
|
padding-top:90px;
|
||||||
|
padding-left:170px;
|
||||||
|
}
|
||||||
|
.issue{
|
||||||
|
flex:3 3 auto;
|
||||||
|
display: inline-block;
|
||||||
|
width: calc(33.3% - 42px);
|
||||||
|
vertical-align: top;
|
||||||
|
margin:0 0 80px;
|
||||||
|
padding:0 15px;
|
||||||
|
color:rgb(40,40,40);
|
||||||
|
}
|
||||||
|
.issue-title, .issue-nr{
|
||||||
|
font-size: 275%;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.issue-title, .issue-nr, .issue-date{
|
||||||
|
margin:15px 0 15px 20px;
|
||||||
|
}
|
||||||
|
.issue-nr{
|
||||||
|
margin-top:0;
|
||||||
|
}
|
||||||
|
.issue-date{
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
.issue-img{
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
.issue-img img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.issue-text{
|
||||||
|
margin:15px 10px 0 20px;
|
||||||
|
-webkit-hyphens: auto;
|
||||||
|
-ms-hyphens: auto;
|
||||||
|
hyphens: auto;
|
||||||
|
}
|
||||||
|
.issue-text p{
|
||||||
|
margin:13px 0;
|
||||||
|
}
|
||||||
|
/* prevent hyphens in the names */
|
||||||
|
.issue-text p:last-of-type{
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* links */
|
||||||
|
a, a:active, a:visited{
|
||||||
|
color:inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.issue a, .issue a:active, .issue a:visited{
|
||||||
|
-webkit-filter:grayscale(100%);
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
-webkit-filter:grayscale(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* mobile */
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
body{
|
||||||
|
min-width: 0;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
div.intro{
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 40px);
|
||||||
|
height: auto;
|
||||||
|
margin:10px 20px 80px 20px;
|
||||||
|
padding:0;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 26px;
|
||||||
|
}
|
||||||
|
div.background img{
|
||||||
|
position: fixed;
|
||||||
|
width: 90%;
|
||||||
|
margin:50px 5%;
|
||||||
|
left:0;
|
||||||
|
}
|
||||||
|
section{
|
||||||
|
width: 100%;
|
||||||
|
left:0;
|
||||||
|
top:0;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.issue{
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 0 80px 0;
|
||||||
|
}
|
||||||
|
.issue-title, .issue-nr, .issue-abstract, .issue-date, .issue-text{
|
||||||
|
margin:20px;
|
||||||
|
padding:0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.issue-title, .issue-nr{
|
||||||
|
line-height: 50px;
|
||||||
|
margin-left: 60px
|
||||||
|
}
|
||||||
|
.issue-nr{
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
.issue-abstract{
|
||||||
|
margin-bottom:0;
|
||||||
|
}
|
||||||
|
.issue-date{
|
||||||
|
margin-top:0;
|
||||||
|
margin-left: 60px
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face{
|
||||||
|
font-family:'special-issue-1';
|
||||||
|
src:url('fonts/GT-Cinetype-Bold.otf');
|
||||||
|
}
|
||||||
|
@font-face{
|
||||||
|
font-family:'special-issue-2';
|
||||||
|
src:url('fonts/Gidugu.ttf');
|
||||||
|
}
|
||||||
|
@font-face{
|
||||||
|
font-family:'special-issue-3';
|
||||||
|
src:url('fonts/dashness.ttf');
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'special-issue-4';
|
||||||
|
src: url('LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), url('LibreBaskerville-Regular.woff') format('woff'), url('LibreBaskerville-Regular.ttf') format('truetype'), url('LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face{
|
||||||
|
font-family:'default';
|
||||||
|
src:url('fonts/cmunvt.ttf');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue