Change subscribe page style. Fix typo. Fix spacing. Change anchor style

nova.py

@@ -359,7 +359,7 @@ def main(args):
             open(output_dir + "subscribe/index.html", "w") as html:
         html.write(env.get_template("subscribe.html").render(
             relative="..",
-            subscribtions=json.load(subscribe)
+            subscriptions=json.load(subscribe)
         ))
 
     if not path.isdir(output_dir + "donate"):

scss/index.scss

@@ -56,7 +56,7 @@ body {
 		.wrapper {
 			min-height: $top-height;
 			align-items: flex-end;
-			padding-bottom: 2em;
+			padding-bottom: 1em;
 			.player {
 				margin: auto;
 				width: 80%;
@@ -69,9 +69,21 @@ body {
 				}
 			}
 			.shownotes {
-				padding: 2em 1em 1em 1em;
+				padding: 2em 1em 0;
 				margin: auto;
 				width: 80%;
+				a {
+					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;
+				}
 			}
 			ul.archives, ul.donate {
 				list-style-type: none;
@@ -100,29 +112,30 @@ body {
 				justify-content: space-between;
 				flex-wrap: wrap;
 				margin: auto;
-				a {
+				.subscription {
+					width: 200px;
 					color: #000;
-					font-size: 100px;
 					text-align: center;
-					padding: 50px 50px;
 					transition-duration: 0.2em;
-					text-decoration: none;
+					padding: 1rem 0;
+					span {
+						color: inherit;
+						font-size: 100px;
+						text-decoration: none;
+					}
+					p {
+						@include title-font;
+						width: 100%;
+						font-size: 1rem;
+					}
 				}
-				a:hover, a:active {
-					font-size: 0;
+				.subscription:hover, .subscription:active {
 					text-decoration: none;
 					transition-duration: 0.2em;
-					background-color: rgba(0, 0, 0, 0.25);
+					background-color: #000;
+					color: #FFF;
 					border-radius: 30px;
 				}
-				a:hover::after {
-					transition-duration: 0.2em;
-					content: attr(x-text);
-					position: relative;
-					top: 50px;
-					font-size: 1.1rem;
-					text-decoration: bold;
-				}
 			}
 		}
 	}
@@ -135,7 +148,7 @@ body {
 			align-items: center;
 			justify-content: space-between;
 			flex-direction: column;
-			padding-top: 2em;
+			padding-top: 1em;
 			height: 100%;
 			.content {
 				display: flex;
@@ -159,6 +172,7 @@ body {
 				}
 			}
 			a.donate-link {
+				margin: 1em 0;
 				color: #292929;
 				padding: 0.3em;
 				border-radius: 1.6em;

subscribe.html

@@ -5,8 +5,11 @@
 {% 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>
+	{% for subscription in subscriptions %}
+		<a href={{subscription.link}} class="subscription">
+			<span class="fa fa-{{subscription.icon}}">
+			<p>{{subscription.text}}</p>
+		</a>
 	{% endfor %}
 </div>
 {% endblock %}