issue.xpub.nl/stylesheet.css

/*                                                              
                              .---.                             
                              |   |      __.....__              
               .-.          .-|   |  .-''         '.            
              .|\ \        / /|   | /     .-''"'-.  `.          
            .' |_\ \      / / |   |/     /________\   \         
       _  .'     |\ \    / /  |   ||                  |    _    
     .' |'--.  .-' \ \  / /   |   |\    .-------------'  .' |   
    .   | / |  |    \ `  /    |   | \    '-.____...---. .   | / 
  .'.'| |// |  |     \  /     |   |  `.             .'.'.'| |// 
.'.'.-'  /  |  '.'   / /      '---'    `''-...... -'.'.'.-'  /  
.'   \_.'   |   /|`-' /                             .'   \_.'   
            `'-'  '..'                                          
*/


@import 'fonts.css';
@import 'mobile.css' screen and (max-width: 900px);

body{
	min-width: 720px;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	background: 
		linear-gradient(150deg, lightyellow, transparent, lightblue),
		linear-gradient(190deg, yellow, transparent, pink),
		linear-gradient(230deg, lightgreen, transparent, purple);
	background-size: 100% 100%;
}
div#wrapping{
	max-width: 1280px;
	margin: 5em auto 6em;
}

/* SECTION: SPECIAL ISSUES */

section#issues{
	display: grid;
	grid-template-columns: repeat(3, calc(33.3% - 42px));
	grid-template-rows: repeat(3, 1fr);	
	grid-auto-flow: column;
	font-size: 14px;
	line-height: 20px;
}

/* Custom typographic 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;
}
.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';
}
.issue#special-issue-6{
	font-family: 'special-issue-6';
	font-size: 95%;
}
.issue#special-issue-6 .issue-text{
	font-family: 'special-issue-6';
	font-size: 115%;
}
.issue#special-issue-7 {
	font-family: 'special-issue-7';
	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';
}
.issue#special-issue-10 .issue-text{
	font-family: 'special-issue-10';
	letter-spacing: -0.1em;
}
.issue#special-issue-11{
	font-family: 'special-issue-11';
}
.issue#special-issue-11 .issue-text{
	font-family: 'special-issue-11';
	letter-spacing: -0.1em;
}
.issue#special-issue-12{
	font-family: 'special-issue-12';
}
.issue#special-issue-12 .issue-text{
	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';
	font-size: 20px; 
	line-height: 26px; 
	letter-spacing: .6px;
}

/* SECTIONS: INTRO + INFO */

section#intro.endpoint,
section#info.endpoint{
	position: relative;
	width: calc(33.3% + 180px);
	left: calc(33.3% - 90px);
	margin: 0;
	padding: 0 15px;
	font-family: monospace;
	font-size: 14px;
	line-height: 1.9;
}
section#intro.endpoint{
	margin-bottom: 100px;
}
section#info.endpoint{
	margin-top: 100px;
}
	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;
	}
	section#intro p,
	section#intro p{
		margin:0 0 1em;
	}
	section#intro em,
	section#intro em{
		font-family: 'italic';
		font-size: 122.5%;
		line-height: 0.0;
	}
	section#intro hr,
	section#info hr{
		margin: 2em 0; 
		border: 0;
		border-bottom: 1px solid black;
	}
	section#info p#xpubsite{
		text-align: center;
		color: #b32dff;
		margin: 5em 0;
	}
	section#info p#xpubsite a{
		text-decoration: underline;
	}

/* GENERAL ELEMENTS */

section#issues .issue{
	margin: 0;
	padding: 2em 15px;
	color: rgb(40,40,40);
}
section#issues .issue[data-cycle='1']{
	margin-top:0 !important;
	grid-column: 1;
}
section#issues .issue[data-cycle='2']{
	margin-top: 200px !important;
	grid-column: 2;
}
section#issues .issue[data-cycle='3']{
	margin-top: 400px !important;
	grid-column: 3;
}
section#issues .issue[data-cycle='6']{
	margin-top: 400px !important;
	grid-column: 1;
}
section#issues .issue[data-cycle='5']{
	margin-top: 200px !important;
	grid-column: 2;
}
section#issues .issue[data-cycle='4']{
	margin-top: 0 !important;
	grid-column: 3;
}


section#issues .issue-title, 
section#issues .issue-nr{
	font-size: 275%;
	line-height: 40px;
}
section#issues .issue-title, 
section#issues .issue-nr, 
section#issues .issue-date{
	margin: 30px;
}
	section#issues .issue-nr{
		margin-top:0;
	}
	section#issues .issue-date{
		height: 22px;
	}
section#issues .issue-img{
	line-height: 0;
}
	section#issues .issue-img img{
		width: 100%;
	}
section#issues .issue-text{
	margin:15px 10px 0 20px;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
	section#issues .issue-text p{
		margin:13px 0;
	}
	/* prevent hyphens in the list of names */
	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;
	text-decoration: none;
}
a img{
	-webkit-filter: grayscale(100%);
}
a img:hover{
	-webkit-filter: grayscale(0%);
}