More refinement & cleanup

.gitignore

@@ -1,4 +1,5 @@
 _site
+feeds.json
 
 # Created by https://www.toptal.com/developers/gitignore/api/node,git
 # Edit at https://www.toptal.com/developers/gitignore?templates=node,git

src/_includes/main.njk

@@ -38,14 +38,12 @@ description: "Hull Blogs provides aggregated content from University of Hull stu
 			<p>{{ tagline }}</p>
 		</header>
 		<nav>
-			<ul>
-				{% for navitem in collections.navigable %}
-				<li {% if page.url == navitem.url %}aria-current="page"{% endif %}>
-					<a href="{{ navitem.url }}" class="nav invisilink">{{ navitem.data.title }}</a>
-				</li>
-				{% endfor %}
-				<li><a href="https://github.com/sbrl/Minetest-WorldEditAdditions/" class="nav image"><img class="large-icon invert-when-light" src="{% asset 'images/github.svg' %}" alt="GitHub" title="GitHub" /></a></li>
-			</ul>
+			{% for navitem in collections.navigable %}
+			<span {% if page.url == navitem.url %}aria-current="page"{% endif %}>
+				<a href="{{ navitem.url }}" class="nav invisilink">{{ navitem.data.title }}</a>
+			</span>
+			{% endfor %}
+			<span><a href="https://github.com/sbrl/Minetest-WorldEditAdditions/" class="nav image"><img class="large-icon invert-when-light" src="{% asset 'images/github.svg' %}" alt="GitHub" title="GitHub" /></a></span>
 		</nav>
 		
 		<main>

src/about.html

@@ -0,0 +1,7 @@
+---
+layout: "main.njk"
+title: "About"
+tags: "navigable"
+date: "2001-01-01"
+---
+<p>Hull Blogs provides aggregated content from University of Hull students and alumni irrespective of department. Read how students are developing themselves and exploring their subjects throughout their time at Hull, be it through coursework, experiments or side projects. Explore how Alumni are utilising their skills and knowledge in the professional world and see how Hull has impacted the world around you.</p>

src/css/theme.css

@@ -45,8 +45,9 @@
 /* rem is relative to the html element, and em is relative to the current element. */
 html, body { font-size: 100%; margin: 0; padding: 0; }
 
-body
-{
+body {
+	min-height: 100vh;
+	
 	font-family: "Open Sans", "Roboto", "Helvetica", sans-serif; /* Serif is awful :( */
 	
 	background: var(--bg-main); /* Don't forget to update the @page one too for paged media */
@@ -54,7 +55,7 @@ body
 	
 	display: grid;
 	grid-template-columns: 10% auto 10%;
-	grid-template-rows: auto auto auto auto;
+	grid-template-rows: auto auto 1fr auto;
 	grid-template-areas: "header header header"
 		"nav nav nav"
 		". content ."
@@ -93,18 +94,19 @@ body > nav {
 	background: var(--text-main);
 	color: var(--bg-bright);
 }
-body > nav > ul {
+body > nav {
 	margin: 0;
 	padding: 0;
-	list-style-type: none;
 	font-size: 1.25em; font-weight: bold;
 	
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
-body > nav > ul > li {
-	padding: 0.5em;
+body > nav > span {
+	/* HACK: We don't know why there's a couple of pixels fo white space there :-/ */
+	margin-bottom: -0.13em;
+	padding: 0.6em;
 }
 main {
 	grid-area: content;
@@ -145,6 +147,10 @@ main {
 	grid-area: footer;
 	margin: 0 0 var(--margin-vertical-content) 0;
 }
+.post > .post-footer time {
+	display: inline-block;
+	margin-right: 0.5em;
+}
 
 nav.pagination {
 	margin: 5em 0 0 0;
@@ -156,11 +162,14 @@ nav.pagination {
 	color: var(--bg-bright);
 }
 nav.pagination > span {
-	margin: 0.5em;
+	padding: 0.5em;
 }
-nav.paginatioon > span[aria-current] {
+nav > span[aria-current],
+nav > span[aria-current] > a {
+	background: var(--bg-bright);
+	color: var(--text-alt);
 	font-weight: bolder;
-	font-size: 1.25em;
+	text-decoration: none;
 }
 
 footer {
@@ -246,6 +255,7 @@ input[type=text], input[type=number], textarea
 .invisilink		{ text-decoration: none; color: inherit;			}
 .invisilist		{ list-style-type: none; margin: 5px; padding: 5px; }
 
+.medium-icon-abs { width: 1.25em; height: 1.25em; vertical-align: middle; }
 .large-icon		{ max-width: 1.5em; max-height: 1.5em; vertical-align: middle; }
 .tiny-image		{ max-width: 5em; max-height: 5em; }
 .small-image	{ max-width: 10em; max-height: 10em; }

src/index.html

@@ -11,9 +11,9 @@
 		</div>
 		<div class="post-footer">
 			<span><a href="{{ post.parent.data.link | htmlentities }}"><img class="large-icon" src="{{ post.author_image }}" alt="{{ post.author_name | htmlentities }} avatar" aria-hidden="true" /> {{ post.author_name | htmlentities }}</a></span>
-			<span>
-				<img class="large-icon open-iconic invert-when-dark" src="{% asset 'images/clock.svg' %}" alt="Clock icon" aria-hidden="hidden" /> 
+			<span class="float right">
 				<time datetime="{{ post.pubdate_iso }}">{{ post.pubdate_display | htmlentities }}</time>
+				<img class="medium-icon-abs invert-when-dark" src="{% asset 'images/clock.svg' %}" alt="Clock icon" aria-hidden="hidden" /> 
 			</span>
 		</div>
 	</article>
@@ -28,7 +28,7 @@
 	<span>{% if pagination.href.previous %}<a href="{{ pagination.href.previous }}">Previous</a>{% else %}Previous{% endif %}</span>
 	
 	{% for pageKey in pagination.pages %}
-		<span><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if pagination.hrefs[ loop.index0 ] == page.url %} aria-current="page"{% endif %}>{{ loop.index }}</a></span>
+		<span{% if pagination.hrefs[ loop.index0 ] == page.url %} aria-current="page"{% endif %}><a href="{{ pagination.hrefs[ loop.index0 ] }}">{{ loop.index }}</a></span>
 	{% endfor %}
 	
 	<span>{% if pagination.href.next %}<a href="{{ pagination.href.next }}">Next</a>{% else %}Next{% endif %}</span>