image placeholder for future issues added

index/img/unknown.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="170mm"
+   height="170mm"
+   viewBox="0 0 170 170"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.1 r15371"
+   sodipodi:docname="unknown.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="20.82179"
+     inkscape:cy="630.12817"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1280"
+     inkscape:window-height="736"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-127)">
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 2.8655718,130.1158 h 4.7289546 v 2.47176 h 2.6043506 v 1.95932 l -0.6510878,0.63301 -0.6168196,-1.1153 -0.2398752,0.33157 -0.5825514,-0.84401 -0.7538921,0.96459 -0.4454809,-0.75358 -1.0965691,-0.0302 -1.062301,1.38659 -1.1308371,-1.26602 H 2.8998395 Z"
+       id="path21"
+       inkscape:connector-curvature="0" />
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.25;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       d="m 10.16461,136.0842 v 1.89903 H 2.8313041 v -1.74832 l 0.5482843,-0.72344 1.4049792,1.35645 1.130837,-1.44689 0.4797489,0.57273 0.2741423,-0.24114 0.6853551,1.02487 0.6168204,-0.99473 0.7538908,0.9043 0.5482852,-0.78373 z"
+       id="path23"
+       inkscape:connector-curvature="0" />
+  </g>
+</svg>

index/index.html

@@ -85,7 +85,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 5</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>
@@ -93,7 +93,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 6</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>
@@ -103,7 +103,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 7</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>
@@ -111,7 +111,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 8</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>
@@ -119,7 +119,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 9</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>
@@ -129,7 +129,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 10</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>
@@ -137,7 +137,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 11</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>
@@ -145,7 +145,7 @@
 			<a href="#">
 				<div class="issue-nr">Special<br> Issue 12</div>
 				<div class="issue-date"></div>
-				<div class="issue-img"><img src="img/unknown.png"></div>
+				<div class="issue-img"><img src="img/unknown.svg"></div>
 				<div class="issue-title"></div>
 			</a>
 		</div>

index/stylesheet.css

@@ -18,21 +18,18 @@ header{
 	top:0;
 	padding:0;
 	z-index: 1;
-	background-image: url('img/pix.png');
+	background-image: url('img/header.png');
 	overflow: hidden;
 }
 .intro{
 	position: absolute;
-	width: 150px;
+	width: 160px;
 	height:100vh;
 	top:20px;
 	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;
@@ -46,6 +43,10 @@ header{
 .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. */
@@ -185,6 +186,9 @@ a img:hover{
 			margin-top:0;
 			margin-left: 60px
 		}
+		.issue.future div.issue-img{
+			min-height: 0;
+		}
 	a:hover{
 		opacity: 1;
 	}