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 (on the left), future (for future issues) */
.intro, .issue.future{
	font-family: 'default';
}
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;
	}
	.intro b{
		letter-spacing: 0.05em;
	}
	.intro a{
		font-size:14px;
	}
.issue.future{
	opacity: 0.2;
}
	.issue.future div.issue-img{
		width: 100%;
		border:1px solid;
	}

/* custom rules per issue */
/* the font size is adjusted here in % to balance the differences in size between fonts out. */
.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: 90%;
}
.issue#special-issue-5{
	font-family: 'special-issue-5';
	font-size: 100%;
}
.issue#special-issue-5 .issue-text {
    font-family: 'special-issue-5-desc';
}

/* rules for the general structural elements */
section{
	display: flex;
	flex-direction: columns;
	flex-wrap: wrap;
	margin:0 14px;
	padding-top:80px;
	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 list of 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;
}
a img{
	-webkit-filter:grayscale(100%);
}
a img:hover{
	-webkit-filter:grayscale(0%);
}

/* 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:'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;
}