[SSG][Design] Add Subscribe page.

base.html

@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<title>{{ title }} | Redacted Life</title>
+	<title>{% block title %}{{ title }} | Redacted Life{% endblock %}</title>
 	<link href="assets/css/index.css" rel="stylesheet" type="text/css">
 	<link rel="stylesheet" href="assets/plyr/plyr.css" />
 
@@ -14,6 +14,7 @@
 	<link rel="canonical" href="https://redacted.life/">
 	<link rel="me" href="https://masto.nixnet.xyz/@amolith">
 	<link rel="me" href="https://masto.nixnet.xyz/@RedactedLife">
+	{% block stylesheets %}{% endblock %}
 
 	<!-- Social: Twitter -->
 	<meta name="twitter:card" content="summary_large_image" />
@@ -59,7 +60,7 @@
 	<div class="bottom">
 		<div class="wrapper">
 			<div class="content">
-				<a class="button" href="feed.xml">Subscribe</a>
+				<a class="button" href="subscribe.html">Subscribe</a>
 				<a class="button" href="mailto:hello@redacted.life">Contact</a>
 				<a class="button" href="archives.html">Archives</a>
 			</div>

nova.py

@@ -4,6 +4,7 @@
 import argparse
 from collections import UserList
 from datetime import datetime
+import json
 import os
 import os.path as path
 import re
@@ -52,7 +53,7 @@ class EpisodeList(UserList):
             episodes = [{
                 "slug": gen_name(i.date, i.slug) + ".html",
                 "title": i.title
-            } for i in self.data]
+            } for i in self.data[::-1]]
             file.write(self.archives.render(episodes=episodes,
                                             title="Archives"))
 
@@ -214,6 +215,12 @@ def main(args):
             )
         )
 
+    with open(input_dir + "subscribe.json") as subscribe, \
+            open(output_dir + "subscribe.html", "w") as html:
+        html.write(env.get_template("subscribe.html").render(
+            subscribtions=json.load(subscribe)
+        ))
+
     podcast.sort()
     podcast.generate_thumbnails()
     podcast.generate_archives()

scss/index.scss

@@ -94,6 +94,35 @@ body {
 					margin: 0.5em 1em;
 				}
 			}
+			.subscribe {
+				display: flex;
+				width: 600px;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				margin: auto;
+				a {
+					color: #000;
+					font-size: 100px;
+					text-align: center;
+					padding: 50px 50px;
+					transition-duration: 0.2em;
+					text-decoration: none;
+				}
+				a:hover, a:active {
+					font-size: 0;
+					color: #FFF;
+					background-color: #000;
+					text-decoration: none;
+					transition-duration: 0.2em;
+				}
+				a:hover::after {
+					content: attr(x-text);
+					position: relative;
+					top: 50px;
+					font-size: 1rem;
+					text-decoration: none;
+				}
+			}
 		}
 	}
 
@@ -173,6 +202,17 @@ h1 {
 	}
 }
 
+@media (max-width: 800px) {
+	body {
+		.top {
+			.wrapper {
+				.subscribe {
+					width: 400px;
+				}
+			}
+		}
+	}
+}
 @media (max-width: 600px) {
 	body {
 		.top_bg {
@@ -213,6 +253,17 @@ h1 {
 	}
 }
 
+@media (max-width: 480px) {
+	body {
+		.top {
+			.wrapper {
+				.subscribe {
+					width: 200px;
+				}
+			}
+		}
+	}
+}
 
 @keyframes move_right {
 	from {left: 0}

subscribe.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}Subscribe | Redacted Life{% endblock %}
+{% block stylesheets %}
+	<link href="assets/fork-awesome/css/fork-awesome.min.css" rel="stylesheet" type="text/css">
+{% endblock %}
+{% block left_content %}
+<div class="subscribe">
+	{% for subscribtion in subscribtions %}
+	<a href={{subscribtion.link}} x-text="{{subscribtion.text}}"><span class="fa fa-{{subscribtion.icon}}"></a>
+	{% endfor %}
+</div>
+{% endblock %}