From 93bdd1885dab7d940c3a0042c7a5124df0349284 Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Wed, 29 Jan 2020 17:55:22 +0530
Subject: [PATCH] [Design] Style Archives page. Make header a link.

---
 archives.html   |  3 +--
 base.html       |  2 +-
 index.html      |  1 -
 scss/index.scss | 28 ++++++++++++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/archives.html b/archives.html
index 620a2bf..5fd738f 100644
--- a/archives.html
+++ b/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 %}
diff --git a/base.html b/base.html
index e1ee08b..2aeb64f 100644
--- a/base.html
+++ b/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>
diff --git a/index.html b/index.html
index 2f5a502..06307cd 100644
--- a/index.html
+++ b/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" />
diff --git a/scss/index.scss b/scss/index.scss
index 0ba124d..218f928 100644
--- a/scss/index.scss
+++ b/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) {