adding next and prev in css buttons

themes/default/static/css/main.css

@@ -63,7 +63,7 @@ article{
 		padding:2em 3em;
 	}
 	article:first-of-type:before{
-		content: "Introduction";
+		content: "Start of Section";
 		display: block;
 		margin:0 auto;
 		position: relative;
@@ -80,6 +80,53 @@ h1.category{
 	text-align: center;
 }
 
+ul.navprevnext{
+	width: calc(100% + 0em);
+	margin:3em 0;
+}
+	ul.navprevnext li.prev,
+	ul.navprevnext li.next,
+	ul.navprevnext li.done{
+		width: calc(50% - 9em);
+		height: 150px;
+		background-color: lightgrey;
+		border-radius: 1em;
+		padding:1em 3em;
+		font-size: 13pt;
+		line-height: 1.4;
+		color:white;
+		display: inline-block;
+		vertical-align: top;
+	}
+	ul.navprevnext a{
+		text-decoration: none;
+	}
+	ul.navprevnext li.prev:before,
+	ul.navprevnext li.next:before{
+		display: block;
+		font-style:italic;
+		margin:0 0 1em 0;
+	}
+	ul.navprevnext li.prev:before{
+		content:'← Go to the previous page';
+		margin-left:-1.25em;
+	}
+	ul.navprevnext li.next:before{
+		content:'Go to the next page →';
+		margin-right:-1em;
+	}
+	ul.navprevnext li.prev{
+	}
+	ul.navprevnext li.next,
+	ul.navprevnext li.done{
+		text-align: right;
+	}
+	ul.navprevnext li.done{
+		background-color: beige;
+		color: #ec25ec;
+	}
+
+
 footer{
 	font-style: normal;
 	font-size: smaller;

themes/default/templates/article.html

@@ -48,20 +48,18 @@
 		{{ article.content }}
 	</div>
 
-	<ul>
+	<ul class="navprevnext">
 	{% if article.prev_article_in_category %}
-		<li>
-			<a href="{{ SITEURL }}/{{ article.prev_article_in_category.url}}">
-				{{ article.prev_article_in_category.title }}
-			</a>
-		</li>
+		<a href="{{ SITEURL }}/{{ article.prev_article_in_category.url}}">
+			<li class="prev">{{ article.prev_article_in_category.title }}</li>
+		</a>
 	{% endif %}
 	{% if article.next_article_in_category %}
-		<li>
-			<a href="{{ SITEURL }}/{{ article.next_article_in_category.url}}">
-				{{ article.next_article_in_category.title }}
-			</a>
-		</li>
+		<a href="{{ SITEURL }}/{{ article.next_article_in_category.url}}">
+			<li class="next">{{ article.next_article_in_category.title }}</li>
+		</a>
+	{% else %}
+		<li class="done">You finished this section!</li>
 	{% endif %}
 	</ul>