issue.xpub.nl/stylesheet.css

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;
}