(2019/2020/2021) update issue.xpub.nl website

master
manetta 3 years ago
parent 5dcfe129f1
commit f2b0ab963d

1
.gitignore vendored

@ -1,2 +1,3 @@
.DS_Store
.poop
SI*

@ -0,0 +1,111 @@
/*
.-'''-.
' _ \
/ /` '. \ _..._
_.._ . | \ ' .' '.
.' .._|| ' | '. .-. . .|
| ' \ \ / / | ' ' | .' |_
__| |__ `. ` ..' / | | | | .' | _
|__ __| '-...-'` | | | |'--. .-' .' |
| | | | | | | | . | /
| | | | | | | | .'.'| |//
| | | | | | | '.'.'.'.-' /
| | | | | | | / .' \_.'
|_| '--' '--' `'-'
*/
/* Main fonts used on the webpage. */
@font-face{
font-family: 'italic';
src: url('fonts/cmunvi.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'header';
src: url('fonts/KomikaTitle-Kaps-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Custom fonts for a Special Issue can be called here below. */
@font-face{
font-family:'special-issue-1';
src:url('fonts/GT-Cinetype-Bold.otf') format('opentype');
}
@font-face{
font-family:'special-issue-2';
src:url('fonts/Gidugu.ttf') format('truetype');
}
@font-face{
font-family:'special-issue-3';
src:url('fonts/dashness.ttf') format('truetype');
}
@font-face {
font-family: 'special-issue-4';
src:
url('fonts/LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/LibreBaskerville-Regular.woff') format('woff'),
url('fonts/LibreBaskerville-Regular.ttf') format('truetype'),
url('fonts/LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg');
}
@font-face {
font-family: 'special-issue-5';
src:
url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'),
url('fonts/PinyonScript.woff') format('woff'),
url('fonts/PinyonScript.ttf') format('truetype'),
url('fonts/PinyonScript.svg#PinyonScript') format('svg');
}
@font-face {
font-family: 'special-issue-5-desc';
src:
url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'),
url('fonts/NotCourierSans.woff') format('woff'),
url('fonts/NotCourierSans.ttf') format('truetype'),
url('fonts/NotCourierSans.svg#NotCourierSans') format('svg');
}
@font-face {
font-family: 'special-issue-6';
src:
url('fonts/ArchivoNarrow-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/ArchivoNarrow-Regular.woff') format('woff'),
url('fonts/ArchivoNarrow-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'special-issue-7';
src: url('fonts/Vegur-Regular.otf') format('opentype');
/* todo: check if this one is still used! */
}
@font-face {
font-family: "special-issue-10";
src: url("fonts/OCR_A.ttf") format('truetype');
font-style: normal;
}
@font-face {
font-family: 'special-issue-11';
src: url('fonts/compagnon-light.woff') format('woff');
font-style: normal;
}
@font-face {
font-family: 'special-issue-12';
src: url('fonts/RobotoMono-Regular.ttf') format('truetype');
font-style: normal;
}
@font-face {
font-family: 'special-issue-13-t';
src: url('fonts/Roboto-Regular.ttf') format('truetype');
font-style: normal;
}
@font-face {
font-family: 'special-issue-13';
src: url('fonts/EBGaramond-Regular.ttf') format('truetype');
font-style: normal;
}
@font-face {
font-family: 'special-issue-13-custom';
src: url('fonts/WFTF_custom-Regular.otf') format('truetype');
font-style: normal;
}

@ -2,70 +2,62 @@
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>XPUB Special Issues!</title>
<title>XPUB Special Issues</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header></header>
<div class="intro">
<p><b>XPUB Special Issues</b></p>
<p>XPUB is the Master of Arts in Fine Art and Design: Experimental Publishing of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks. XPUB's interests in publishing are twofold:</p>
<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>
<p>and <b>second</b>, how these are, or can be, used to create publics by expanding the means of discourse circulation beyond print media and its direct digital translation.</p>
<br>
<p><b>In relation to these two points, every trimester students and staff of XPUB work together on a Special Issue.</b></p>
<br>
<p><a href="https://xpub.nl" target="_blank">xpub.nl</a><br>
<a href="http://pzwiki.wdka.nl/mediadesign/" target="_blank">XPUB wiki</a></p>
</div>
<!-- <div id="background"></div> -->
<div id="wrapping">
<section id="intro" class="endpoint">
<h1>XPUB<br>SPECIAL<br>ISSUES</h1>
<p>
A <em>Special Issue</em> is a tri-annually released publication created by the XPUB master's students, allowing students and staff to explore <!-- different workflows, collaboration, open source publication techniques and investigate not only --> not only the individual themes of each edition, but also the definition of what is or can be a publication.
<p>
Each <em>Special Issue</em> addresses a specific "issue", often coordinated with outside events and collaborations, and culminates in a release party.
<!-- The form of each <em>Special Issue</em> varies as a means of critically engaging with the diverse media, scales, and historical specificity of a particular issue. -->
The organisation, tools, and workflows are reset every trimester to both allow the rotation of roles within this publishing experiment, but also permit to explore novel collaborative methods beyond their archetypes and stereotypes.
</p>
</section>
<!-- min. width of image is 590px -->
<!-- max. width of image is 540px -->
<section>
<section id="issues">
<div id="special-issue-15" class="issue">
<a href="15/index.html">
<!-- Special Issue 13 + 14 + 15 -->
<div id="special-issue-15" class="issue future" data-cycle="1">
<a href="#">
<div class="issue-nr">Special<br> Issue 15</div>
<div class="issue-date">soon</div>
<div class="issue-img-13"><img src="img/none.png" style='max-width: 100%;'></div>
<div class="issue-title">soon</div>
<div class="issue-text">
<p>//</p>
<p>//</p>
</div>
<div class="issue-date">July 2021</div>
<div class="issue-img"><img src="img/unknown.svg"></div>
<div class="issue-title"></div>
<div class="issue-text"></div>
</a>
</div>
<div id="special-issue-14" class="issue">
<a href="15/index.html">
<div id="special-issue-14" class="issue future" data-cycle="2">
<a href="#">
<div class="issue-nr">Special<br> Issue 14</div>
<div class="issue-date">soon</div>
<div class="issue-img-13"><img src="img/none.png" style='max-width: 100%;'></div>
<div class="issue-title">soon</div>
<div class="issue-text">
<p>//</p>
<p>//</p>
</div>
<div class="issue-date">April 2021</div>
<div class="issue-img"><img src="img/unknown.svg"></div>
<div class="issue-title"></div>
<div class="issue-text"></div>
</a>
</div>
<div id="special-issue-13" class="issue">
<div id="special-issue-13" class="issue" data-cycle="3">
<a href="13/index.html">
<div class="issue-nr">Special<br> Issue 13</div>
<div class="issue-date">September/December 2020</div>
<div class="issue-img-13"><img src="img/special-issue-13.png" style='max-width: 100%;'></div>
<div class="issue-title" style="font-family: 'special-issue-13-t';">WOR(<span style="font-family: special-issue-13-custom; font-size: 25px;">L</span>)DS FOR THE FUTURE</div>
<div class="issue-text">
<p style="font-size: 20px; line-height: 24px; letter-spacing: .6px;"> Words have the power to shape reality. Wor(l)ds for the Future is a set of map making tools to re-imagine and collect wor(l)ds, and to re-publish an everchanging atlas. We invite you to delve into the materials and traverse the texts in any way you desire: by cutting and pasting the printed matter, or by unravelling the texts online. The choice is yours. You can reconstruct images and reinterpret words to create Wor(l)ds for the Future.</p>
<p style='font-size: 20px; line-height: 24px; letter-spacing: .6px;'>Kendal Beynon, Martin Foucaut, Camilo García A., Clara Gradel, Nami Kim, Euna Lee, Jacopo Lega, Federico Poni, Louisa Teichmann and Floor van Meeuwen</p>
<p> Words have the power to shape reality. Wor(l)ds for the Future is a set of map making tools to re-imagine and collect wor(l)ds, and to re-publish an everchanging atlas. We invite you to delve into the materials and traverse the texts in any way you desire: by cutting and pasting the printed matter, or by unravelling the texts online. The choice is yours. You can reconstruct images and reinterpret words to create Wor(l)ds for the Future.</p>
<p>Kendal Beynon, Martin Foucaut, Camilo García A., Clara Gradel, Nami Kim, Euna Lee, Jacopo Lega, Federico Poni, Louisa Teichmann and Floor van Meeuwen</p>
</div>
</a>
</div>
<!-- Special Issue 10 + 11 + 12 -->
<div id="special-issue-12" class="issue">
<div id="special-issue-12" class="issue" data-cycle="4">
<a href="12/index.html">
<div class="issue-nr">Special<br> Issue 12</div>
<div class="issue-date">May/June 2020</div>
@ -78,8 +70,7 @@
</div>
</a>
</div>
<div id="special-issue-11" class="issue">
<div id="special-issue-11" class="issue" data-cycle="5">
<a href="11/index.html">
<div class="issue-nr">Special<br> Issue 11</div>
<div class="issue-date">April 2020</div>
@ -93,8 +84,7 @@
</div>
</a>
</div>
<div id="special-issue-10" class="issue">
<div id="special-issue-10" class="issue" data-cycle="6">
<a href="10/index.html">
<div class="issue-nr">Special<br> Issue 10</div>
<div class="issue-date">December 2019</div>
@ -111,7 +101,7 @@
</div>
<!-- Special Issue 7 + 8 + 9 -->
<div id="special-issue-9" class="issue" style="font-family: sans-serif;">
<div id="special-issue-9" class="issue" data-cycle="1" style="font-family: sans-serif;">
<a href="09">
<div class="issue-nr">Special<br> Issue 9</div>
<div class="issue-date">June 2019</div>
@ -125,7 +115,7 @@
</div>
</a>
</div>
<div id="special-issue-8" class="issue" style="font-family: "Courier New", Courier, monospace;">
<div id="special-issue-8" class="issue" data-cycle="2" style='font-family: "Courier New", Courier, monospace;'>
<a href="08">
<div class="issue-nr">Special<br> Issue 8</div>
<div class="issue-date">April 2019</div>
@ -139,7 +129,7 @@
</div>
</a>
</div>
<div id="special-issue-7" class="issue">
<div id="special-issue-7" class="issue" data-cycle="3">
<a href="07">
<div class="issue-nr">Special<br> Issue 7</div>
<div class="issue-date">December 2018</div>
@ -155,7 +145,7 @@
</div>
<!-- Special Issue 4 + 5 + 6 -->
<div id="special-issue-6" class="issue">
<div id="special-issue-6" class="issue" data-cycle="4">
<a href="https://issue.xpub.nl/06/">
<div class="issue-nr">Special<br> Issue 6</div>
<div class="issue-date">June 2018</div>
@ -170,7 +160,7 @@
</div>
</a>
</div>
<div id="special-issue-5" class="issue">
<div id="special-issue-5" class="issue" data-cycle="5">
<a href="https://issue.xpub.nl/05/">
<div class="issue-nr">Special<br> Issue 5</div>
<div class="issue-date">March 2018</div>
@ -186,7 +176,7 @@
</div>
</a>
</div>
<div id="special-issue-4" class="issue">
<div id="special-issue-4" class="issue" data-cycle="6">
<a href="https://issue.xpub.nl/04/">
<div class="issue-nr">Special<br> Issue 4</div>
<div class="issue-date">December 2017</div>
@ -202,7 +192,7 @@
</div>
<!-- Special Issue 1 + 2 + 3 -->
<div id="special-issue-3" class="issue">
<div id="special-issue-3" class="issue" data-cycle="1">
<a href="https://issue.xpub.nl/03/">
<div class="issue-nr">Special<br> Issue 3</div>
<div class="issue-date">June 2017</div>
@ -216,7 +206,7 @@
</div>
</a>
</div>
<div id="special-issue-2" class="issue">
<div id="special-issue-2" class="issue" data-cycle="2">
<a href="https://issue.xpub.nl/02/">
<div class="issue-nr">Special<br> Issue 2</div>
<div class="issue-date">March 2017</div>
@ -230,7 +220,7 @@
</div>
</a>
</div>
<div id="special-issue-1" class="issue">
<div id="special-issue-1" class="issue" data-cycle="3">
<a href="https://issue.xpub.nl/01/">
<div class="issue-nr">Special<br> Issue 1</div>
<div class="issue-date">December 2016</div>
@ -244,7 +234,30 @@
</div>
</a>
</div>
</section>
<section id="info" class="endpoint">
<h1>XPUB</h1>
<p>
XPUB is the Master of Arts in Fine Art and Design: <em>Experimental Publishing</em> of the Piet Zwart Institute. XPUB focuses on the acts of making things public and creating publics in the age of post-digital networks. XPUB's interests in publishing are twofold:
</p>
<p>
<strong>first</strong>, publishing as the inquiry and participation into the technological frameworks, political context and cultural processes through which things are made public;
</p>
<p>
and <strong>second</strong>, how these are, or can be, used to create publics by expanding the means of discourse circulation beyond print media and its direct digital translation.
</p>
<!-- <p>
<strong>In relation to these two points, every trimester students and staff of XPUB work together on a <em>Special Issue</em>.</strong>
</p> -->
<!-- <a href="http://pzwiki.wdka.nl/mediadesign/" target="_blank">XPUB wiki</a></p> -->
</section>
<section id="credits">
<p>
<a href="https://xpub.nl" target="_blank">xpub.nl</a>
<!-- <a href="https://git.xpub.nl/XPUB/xpub.nl" target="_blank">just in case</a> -->
</p>
</section>
</div>
</body>
</html>

@ -0,0 +1,86 @@
/*
.-'''-.
' _ \ .---.
__ __ ___ / /` '. \ /| .--.| | __.....__
| |/ `.' `. . | \ ' || |__|| | .-'' '.
| .-. .-. '| ' | '|| .--.| | / .-''"'-. `.
| | | | | |\ \ / / || __ | || |/ /________\ \
| | | | | | `. ` ..' / ||/'__ '. | || || |
| | | | | | '-...-'` |:/` '. '| || |\ .-------------'
| | | | | | || | || || | \ '-.____...---.
|__| |__| |__| ||\ / '|__|| | `. .'
|/\'..' / '---' `''-...... -'
' `'-'`
*/
/* responsive rules for mobile */
body{
min-width: 0 !important;
width: 100% !important;
}
div#wrapping{
width: 100% !important;
max-width: 100% !important;
margin: 3em 0 !important;
}
section#intro.endpoint,
section#info.endpoint,
section#credits{
position: relative !important;
width: calc(100% - 50px) !important;
left: 0 !important;
height: auto !important;
margin: 10px 20px 80px 30px !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 1.9 !important;
hyphens: auto !important;
}
body section#issues .issue[data-cycle="1"],
body section#issues .issue[data-cycle="2"],
body section#issues .issue[data-cycle="3"],
body section#issues .issue[data-cycle="4"],
body section#issues .issue[data-cycle="5"],
body section#issues .issue[data-cycle="6"]{
margin-top: 0 !important;
}
section#issues .issue{
width: 100% !important;
margin: 0 0 50px 0 !important;
}
section#issues .issue.future{
display: none !important;
}
section#issues .issue-title,
section#issues .issue-nr,
section#issues .issue-abstract,
section#issues .issue-date,
section#issues .issue-text{
margin:20px;
padding:0;
height: auto;
}
section#issues .issue-title,
section#issues .issue-nr{
line-height: 50px;
margin-left: 60px
}
section#issues .issue-nr{
max-width: 75%;
}
section#issues .issue-abstract{
margin-bottom:0;
}
section#issues .issue-date{
margin-top:0;
margin-left: 60px
}
section#issues .issue.future div.issue-img{
min-height: 0;
}
a:hover{
opacity: 1;
}

@ -1,55 +1,110 @@
/*
.---.
| | __.....__
.-. .-| | .-'' '.
.|\ \ / /| | / .-''"'-. `.
.' |_\ \ / / | |/ /________\ \
_ .' |\ \ / / | || | _
.' |'--. .-' \ \ / / | |\ .-------------' .' |
. | / | | \ ` / | | \ '-.____...---. . | /
.'.'| |// | | \ / | | `. .'.'.'| |//
.'.'.-' / | '.' / / '---' `''-...... -'.'.'.-' /
.' \_.' | /|`-' / .' \_.'
`'-' '..'
*/
@import 'fonts.css';
@import 'mobile.css' screen and (max-width: 900px);
body{
min-width: 1024px;
min-width: 720px;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 22px;
background-color: rgb(254,247,220);
/*background-color: #fdd7d7;*/
background:
linear-gradient(150deg, lightyellow, transparent, lightblue),
linear-gradient(190deg, yellow, transparent, pink),
linear-gradient(230deg, lightgreen, transparent, purple);
background-size: 100% 100%;
/*background: linear-gradient(180deg, lightyellow 25%, pink 25%, pink 50%, lightblue 50%, lightblue 75%, lime 75%, lime 100%);*/
/*background: linear-gradient(90deg, yellow 25%, #e3e000 25%, #f4da73 50%, 50%, #ffe86b 75%, yellow 75%, gold 100%);*/
/*background: linear-gradient(90deg, #a466ff 0%, #dd9fff 25%, pink 25%, pink 50%, #e5c0ff 50%, #e5c0ff 75%, #fb62fb 75%, #fbf 100%);*/
/*background: linear-gradient(90deg, #a466ff 0%, #dd9fff 25%, pink 25%, pink 50%, #e5c0ff 50%, #e5c0ff 75%, #fb62fb 75%, #fbf 100%);*/
/*background-size: 100% 1.9em;*/
}
/* header, intro (on the left), future (for future issues) */
.intro, .issue.future{
font-family: 'default';
div#wrapping{
max-width: 1280px;
margin: 5em auto 6em;
}
header{
position: absolute;
width: 100%;
height: 10px;
top:0;
padding:0;
z-index: 1;
background-image: url('img/header.png');
overflow: hidden;
}
.intro{
position: absolute;
width: 160px;
height:100vh;
top:20px;
padding:10px;
font-size: 10pt;
line-height: 14pt;
color:rgb(15,15,93);
}
.intro p{
margin:0 0 10px;
/* SECTIONS: INTRO + INFO */
section#intro.endpoint,
section#info.endpoint,
section#credits{
position: relative;
width: calc(33.3% + 180px);
left: calc(33.3% - 90px);
margin: 0;
padding: 0 15px;
border:0px solid black;
font-family: monospace;
font-size: 14px;
line-height: 1.9;
/*hyphens: auto;*/
}
section#intro h1,
section#info h1{
margin: 0 0 80px;
font-family: 'header', sans-serif;
font-size: 650%;
line-height: 0.9;
text-align: center;
font-weight: normal;
letter-spacing: 0.015em;
color: #b32dff;
}
.intro b{
letter-spacing: 0.05em;
section#intro p,
section#intro p{
margin:0 0 1em;
}
.intro a{
font-size:14px;
section#intro em,
section#intro em{
font-family: 'italic';
font-size: 122.5%;
line-height: 1.0;
}
.issue.future{
opacity: 0.2;
}
.issue.future div.issue-img{
width: 100%;
border:1px solid;
section#intro hr,
section#info hr{
margin: 2em 0;
border: 0;
border-bottom: 1px solid black;
}
section#credits{
text-align: center;
color: #b32dff;
margin: 5em 0;
}
section#credits a{
text-decoration: underline;
}
/* custom rules per issue */
/* the font size is adjusted here in % to balance the differences in size between fonts out. */
/* SECTION: SPECIAL ISSUES */
section#issues{
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: 14px;
line-height: 20px;
}
/* Custom rules per issue */
/* The font size is adjusted here in % to balance the differences in size between the different fonts. */
.issue#special-issue-1{
font-family: 'special-issue-1';
letter-spacing: 0.2px;
@ -88,12 +143,11 @@ header{
font-weight: bold;
letter-spacing: -0.1em;
font-size: 110%;
}
}
.issue#special-issue-7 .issue-text{
font-weight: normal;
letter-spacing: 0em;
}
.issue#special-issue-10{
font-family: 'special-issue-10';
}
@ -101,7 +155,6 @@ header{
font-family: 'special-issue-10';
letter-spacing: -0.1em;
}
.issue#special-issue-11{
font-family: 'special-issue-11';
}
@ -109,8 +162,6 @@ header{
font-family: 'special-issue-11';
letter-spacing: -0.1em;
}
.issue#special-issue-12{
font-family: 'special-issue-12';
}
@ -118,222 +169,96 @@ header{
font-family: 'special-issue-12';
letter-spacing: -0.1em;
}
.issue#special-issue-13{
font-family: 'special-issue-13-t';
}
.issue#special-issue-13 .issue-date,
.issue#special-issue-13 .issue-text{
font-family: 'special-issue-13';
letter-spacing: -0.1em;
font-size: 20px;
line-height: 26px;
letter-spacing: .6px;
}
/* rules for the general structural elements */
section{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin:0 14px;
padding-top:80px;
padding-left:170px;
}
.issue{
flex:3 3 auto;
/* Rules for the general structural elements */
section#issues .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);
margin: 0 0 80px;
padding: 2em 15px;
color: rgb(40,40,40);
}
.issue-title, .issue-nr{
section#issues .issue[data-cycle='1']{
margin-top:0 !important;
}
section#issues .issue[data-cycle='2']{
margin-top: 200px !important;
}
section#issues .issue[data-cycle='3']{
margin-top: 400px !important;
}
section#issues .issue[data-cycle='4']{
margin-top: 400px !important;
}
section#issues .issue[data-cycle='5']{
margin-top: 200px !important;
}
section#issues .issue[data-cycle='6']{
margin-top: 0 !important;
}
section#issues .issue-title,
section#issues .issue-nr{
font-size: 275%;
line-height: 40px;
}
.issue-title, .issue-nr, .issue-date{
margin:15px 0 15px 20px;
section#issues .issue-title,
section#issues .issue-nr,
section#issues .issue-date{
margin: 30px;
}
.issue-nr{
section#issues .issue-nr{
margin-top:0;
}
.issue-date{
section#issues .issue-date{
height: 22px;
}
.issue-img{
section#issues .issue-img{
line-height: 0;
}
.issue-img img{
section#issues .issue-img img{
width: 100%;
}
.issue-text{
section#issues .issue-text{
margin:15px 10px 0 20px;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.issue-text p{
section#issues .issue-text p{
margin:13px 0;
}
/* prevent hyphens in the list of names */
.issue-text p:last-of-type{
section#issues .issue-text p:last-of-type{
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
section#issues .issue.future .issue-img{
border:1px solid black;
}
/* links */
a, a:active, a:visited{
color:inherit;
a, a:active, a:visited{
color: inherit;
text-decoration: none;
}
a img{
-webkit-filter:grayscale(100%);
-webkit-filter: grayscale(100%);
}
a img:hover{
-webkit-filter:grayscale(0%);
}
.issue-img-13 img:hover{
-webkit-filter:invert(100%);
}
/* responsive rules for 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
}
.issue.future div.issue-img{
min-height: 0;
}
a:hover{
opacity: 1;
}
}
/* fonts */
@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('fonts/LibreBaskerville-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/LibreBaskerville-Regular.woff') format('woff'), url('fonts/LibreBaskerville-Regular.ttf') format('truetype'), url('fonts/LibreBaskerville-Regular.svg#LibreBaskerville-Regular') format('svg');
}
@font-face {
font-family: 'special-issue-5';
src: url('fonts/PinyonScript.eot?#iefix') format('embedded-opentype'), url('fonts/PinyonScript.woff') format('woff'), url('fonts/PinyonScript.ttf') format('truetype'), url('fonts/PinyonScript.svg#PinyonScript') format('svg');
}
@font-face {
font-family: 'special-issue-5-desc';
src: url('fonts/NotCourierSans.eot?#iefix') format('embedded-opentype'), url('fonts/NotCourierSans.woff') format('woff'), url('fonts/NotCourierSans.ttf') format('truetype'), url('fonts/NotCourierSans.svg#NotCourierSans') format('svg');
}
@font-face {
font-family: 'special-issue-6';
src: url('fonts/ArchivoNarrow-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/ArchivoNarrow-Regular.woff') format('woff'), url('fonts/ArchivoNarrow-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'special-issue-7';
src: url('07/fonts/Vegur-Regular.otf');
}
@font-face{
font-family:'default';
src:url('fonts/cmunvt.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family:'default';
src:url('fonts/cmunvi.ttf') format('truetype');
font-style: italic;
}
@font-face {
font-family: "special-issue-10";
src: url("10/font/OCR_A.ttf");
font-style: normal;
}
@font-face {
font-family: 'special-issue-11';
src: url('11/font/compagnon/compagnon-light.woff') format('woff');
font-style: normal;
}
@font-face {
font-family: 'special-issue-12';
src: url('12/font/RobotoMono-Regular.ttf') format('truetype');
font-style: normal;
}
@font-face {
font-family: 'special-issue-13-t';
src: url('fonts/Roboto-Regular.ttf');
font-style: normal;
}
@font-face {
font-family: 'special-issue-13';
src: url('fonts/EBGaramond-Regular.ttf');
font-style: normal;
}
@font-face {
font-family: 'special-issue-13-custom';
src: url('fonts/WFTF_custom-Regular.otf');
font-style: normal;
-webkit-filter: grayscale(0%);
}

Loading…
Cancel
Save