From 99ba2c3b34e2a610175769f35ee1e658cde6ead0 Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Wed, 22 Jan 2020 02:24:07 +0530
Subject: [PATCH] [Design] Update footer. Refactor SCSS. More responsive on
 mobile.

---
 index.html      |  7 ++++++-
 scss/index.scss | 19 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 0ab7958..c6983f0 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,9 @@
 						<source src="assets/videos/sample.mp4" type="video/mp4" />
 					</video>
 				</div>
+				<details class="shownotes">
+					<summary>Show Notes</summary>
+				</details>
 			</div>
 		</div>
 	</div>
@@ -32,7 +35,9 @@
 				<a class="button" href="/archives/">Archives</a>
 			</div>
 			<footer>
-				<a href="https://git.webionite.com/ceda_ei/redacted.life">This website</a>, designed by <a href="https://webionite.com">Ceda EI</a>, is licensed under <a href="https://git.webionite.com/ceda_ei/redacted.life/src/branch/master/LICENSE">MIT License</a>. Content licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a>
+				Designed by <a href="https://webionite.com">Ceda EI</a><br />
+				Source available on <a href="https://git.webionite.com/ceda_ei/redacted.life">Webionite</a><br />
+				Licensed under <a href="https://git.webionite.com/ceda_ei/redacted.life/src/branch/master/LICENSE">MIT</a>
 			</footer>
 		</div>
 	</div>
diff --git a/scss/index.scss b/scss/index.scss
index c2e51cc..dbba5b5 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -1,4 +1,6 @@
 $cloud_width: 200px;
+$top-height: 70vh;
+$top-height-phone: 64vh;
 
 @import 'fonts';
 
@@ -35,11 +37,11 @@ body {
 	}
 	.top {
 		background-image: linear-gradient(#24d3ff, #aaeeff);
-		min-height: 70vh;
+		min-height: $top-height;
 		display: flex;
 		align-items: end;
 		.wrapper {
-			min-height: 70vh;
+			min-height: $top-height;
 			align-items: flex-end;
 			padding-bottom: 2em;
 			.player {
@@ -53,14 +55,19 @@ body {
 					border-radius: 2em;
 				}
 			}
+			.shownotes {
+				padding: 1em;
+				margin: auto;
+				width: 80%;
+			}
 		}
 	}
 
 	.bottom {
 		background-image: linear-gradient(#26a4c4, #afdde9);
-		min-height: 30vh;
+		min-height: 100vh - $top-height;
 		.wrapper {
-			min-height: 30vh;
+			min-height: 100vh - $top-height;
 			align-items: center;
 			justify-content: space-around;
 			flex-direction: column;
@@ -127,14 +134,18 @@ h1 {
 @media (max-width: 600px) {
 	body {
 		.top {
+			min-height: $top-height-phone;
 			.wrapper {
+				min-height: $top-height-phone;
 				.player {
 					width: 100%;
 				}
 			}
 		}
 		.bottom {
+			min-height: 100vh - $top-height-phone;
 			.wrapper {
+				min-height: 100vh - $top-height-phone;
 				.content {
 					.button {
 						font-size: 1em;