another header + some cleaning up

index/index.html

@@ -87,7 +87,6 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 		<div id="special-issue-6" class="issue future">
@@ -96,7 +95,6 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 
@@ -107,7 +105,6 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 		<div id="special-issue-8" class="issue future">
@@ -116,7 +113,6 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 		<div id="special-issue-9" class="issue future">
@@ -125,7 +121,6 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 
@@ -136,7 +131,6 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 		<div id="special-issue-11" class="issue future">
@@ -145,7 +139,6 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 		<div id="special-issue-12" class="issue future">
@@ -154,12 +147,8 @@
 				<div class="issue-date"></div>
 				<div class="issue-img"><img src="img/unknown.png"></div>
 				<div class="issue-title"></div>
-				
 			</a>
 		</div>
 	</section>
-	<footer>
-		
-	</footer>
 </body>
 </html>

index/stylesheet.css

@@ -7,30 +7,25 @@ body{
 	background-color: rgb(254,247,220);
 }
 
-/* header, intro, footer, future */
+/* header, intro (on the left), future (for future issues) */
-header, .intro, .issue.future, footer{
+.intro, .issue.future{
 	font-family: 'default';
 }
 header{
 	position: absolute;
 	width: 100%;
-	height: 30px;
+	height: 10px;
 	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;
+	top:20px;
 	padding:10px;
 	font-size: 10pt;
 	line-height: 14pt;
@@ -51,17 +46,9 @@ footer{
 	.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 */
+/* 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;
@@ -87,7 +74,7 @@ section{
 	flex-direction: columns;
 	flex-wrap: wrap;
 	margin:0 14px;
-	padding-top:90px;
+	padding-top:80px;
 	padding-left:170px;
 }
 .issue{
@@ -127,7 +114,7 @@ section{
 	.issue-text p{
 		margin:13px 0;
 	}
-	/* prevent hyphens in the names */
+	/* prevent hyphens in the list of names */
 	.issue-text p:last-of-type{
 		-webkit-hyphens: none;
 		-ms-hyphens: none;
@@ -146,7 +133,7 @@ a:hover{
 	-webkit-filter:grayscale(0%);
 }
 
-/* mobile */
+/* responsive rules for mobile */
 @media (max-width: 500px) {
 	body{
 		min-width: 0;
@@ -203,6 +190,7 @@ a:hover{
 	}
 }
 
+/* fonts */
 @font-face{
 	font-family:'special-issue-1';
 	src:url('fonts/GT-Cinetype-Bold.otf');
@@ -221,7 +209,6 @@ a:hover{
 	font-weight: normal;
 	font-style: normal;
 }
-
 @font-face{
 	font-family:'default';
 	src:url('fonts/cmunvt.ttf');