adding a preview version of the index
parent
4ad6f6b195
commit
6e6b43a7cd
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 368 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 568 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 743 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 MiB |
@ -0,0 +1,164 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,179 @@
|
|||||||
|
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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue