[Design] Style Archives page. Make header a link.

archives.html

@@ -1,7 +1,6 @@
 {% extends "base.html" %}
 {% block left_content %}
-<h1>Redacted Life</h1>
-<ul>
+<ul class="archives">
 {% for episode in episodes %}
 	<li><a href="{{ episode.slug }}">{{ episode.title }}</a></li>
 {% endfor %}

base.html

@@ -50,8 +50,8 @@
 	<div class="top">
 		<div class="wrapper">
 			<div class="content">
+				<h1><a href=".">Redacted Life</a></h1>
 				{% block left_content %}
-				<h1>Redacted Life</h1>
 				{% endblock %}
 			</div>
 		</div>

index.html

@@ -1,6 +1,5 @@
 {% extends "base.html" %}
 {% block left_content %}
-<h1>Redacted Life</h1>
 <div class="player">
 	<video id="player" poster="{{ thumbnail_src }}" controls>
 		<source src="{{ video_src }}" type="video/mp4" />

scss/index.scss

@@ -73,6 +73,27 @@ body {
 				margin: auto;
 				width: 80%;
 			}
+			ul.archives {
+				list-style-type: none;
+				width: 100%;
+				padding: 0;
+				text-align: center;
+				li {
+					a {
+						text-decoration: none;
+						color: #000;
+						transition-duration: 0.2s;
+					}
+					a:hover, a:active {
+						transition-duration: 0.2s;
+						background-color: #000;
+						color: #FFF;
+						padding: 0.3em;
+						border-radius: 1.6em;
+					}
+					margin: 0.5em 1em;
+				}
+			}
 		}
 	}
 
@@ -99,6 +120,7 @@ body {
 					border-style: solid;
 					border-radius: 1.5em;
 					text-decoration: none;
+					transition-duration: 0.4s;
 				}
 				.button:hover, .button:active {
 					transition-duration: 0.4s;
@@ -115,11 +137,13 @@ body {
 					color: #292929;
 					padding: 0.3em;
 					border-radius: 1.6em;
+					transition-duration: 0.2s;
 				}
 				a:hover {
 					color: #FFF;
 					background-color: #000;
 					text-decoration: none;
+					transition-duration: 0.2s;
 				}
 			}
 		}
@@ -143,6 +167,10 @@ h1 {
 	@include title-font;
 	font-size: 4em;
 	text-align: center;
+	a {
+		color: #000;
+		text-decoration: none;
+	}
 }
 
 @media (max-width: 600px) {