_includes/layouts/post.njk

@@ -5,15 +5,13 @@ layout: layouts/base.njk
 {%- css %}{% include "public/css/code.css" %}{% endcss %}
 <h1>{{ title }}</h1>
 
-<div class="post-metadata">
+<ul class="post-metadata">
-	<p>{% if author.name %}{{ author.name }}, {% else %}{{ metadata.author.name }}, {% endif %}<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></p>
+	<li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
-	<ul>
+	{%- for tag in tags | filterTagList %}
-		{%- for tag in tags | filterTagList %}
+	{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-		{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+	<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
-		<li><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a></li>
+	{%- endfor %}
-		{%- endfor %}
+</ul>
-	</ul>
-</div>
 
 {{ content | safe }}
 

content/blog.njk

@@ -4,11 +4,11 @@ eleventyNavigation:
   key: Blog
   order: 2
 ---
-<h1>Nathan’s Blog.</h1>
+<h1>Nathan Upchurch’s Personal Blog: Latest Posts.</h1>
 
 <p class="page-block nodropcap">
 Looking for something in particular? Have a look at <a href="/tags/">this convenient list of post categories</a> to filter results by topic.
 </p>
-<h2>What’s New:</h2>
+
 {% set postslist = collections.posts %}
 {% include "postslist.njk" %}

public/css/index.css

@@ -18,12 +18,11 @@
 	--text-color-link: var(--text-color);
 	--text-color-tag: var(--contrast-color);
 
-	/* Corners */
-	--corner-radius: .3rem;
-
 	/* Space & Size */
 	--syntax-tab-size: 2;
-	--half-gap: .5rem;
+	--corner-radius: .3rem;
+
+	/* Spacing */
 	--single-gap: 1rem;
 	--double-gap: 2rem;
 	--triple-gap: 3rem;
@@ -36,7 +35,7 @@
 	--font-xl: 2rem;
 	--font-l: 1.5rem;
 	--font-n: 1rem;
-	--font-s: .85rem;
+	--font-s: .75rem;
 	--font-xs: .65rem;
 
 	/* Font Weights */
@@ -67,9 +66,6 @@
 
 @media(max-width: 556px) {
 	:root {
-		/* Borders */
-		--border-nav-currentpage: 15px solid var(--contrast-color);
-
 		/* Font Sizes */
 		--font-xxl: 2.25rem;
 		--font-xl: 1.5rem;
@@ -138,8 +134,7 @@ h3 {
 hr {
 	border-top: var(--border-thin);
 }
-main {		--border-nav-currentpage: 15px solid var(--contrast-color);
+main {
-
 	padding: var(--single-gap);
 }
 main > p > img, main > p > a > img {
@@ -365,10 +360,14 @@ nav ul {
 }
 
 /* Tags */
-a.post-tag {
+.post-tag, a.post-tag, .taglist li a {
+	align-items: center;
 	color: var(--text-color-tag);
-	padding-right: var(--half-gap);
+	display: inline-flex;
+	justify-content: center;
+	padding: .2rem .4rem .2rem .4rem;
 	text-decoration: none;
+	text-transform: capitalize;
 }
 a.post-tag:before {
 	content: "#";
@@ -395,20 +394,20 @@ a.post-tag:hover {
 	align-self: center;
 }
 
-/* Post Metadata */
+/* Tags list */
 .post-metadata {
-	margin-bottom: var(--triple-gap);
+	align-items: center;
-	margin-top: var(--single-gap);
+	display: inline-flex;
-	padding: 0 0 0 .4rem;
+	flex-wrap: wrap;
-}
+	font-size: var(--font-n);
-.post-metadata p, .post-metadata ul, .post-metadata ul li, .post-metadata time {
+	gap: .5em;
-	display: flex;
-	flex-flow: row wrap;
-	font-size: var(--font-s);
-	font-weight: var(--weight-heavy);
 	list-style: none;
-	margin: 0;
+	margin-bottom: var(--triple-gap);
-	padding-left: 0em;
+	padding: 0 0 0 .4em;
+}
+.post-metadata time {
+	margin-right: .5em;
+	font-size: var(--font-n);
 }
 
 /* Direct Links / Markdown Headers */
@@ -443,9 +442,8 @@ h2 + .header-anchor {
 	}
 	h1 {
 		font-size: var(--font-xxl);
-		line-height: 2.75rem;
-		margin-top: var(--single-gap);
 		padding-top: 0;
+		line-height: 2.75rem;
 	}
 	h2, .postlist h2, main h2 {
 		font-size: var(--font-xl);
@@ -457,8 +455,8 @@ h2 + .header-anchor {
 
 	/* Header */
 	header {
-		padding: 0rem var(--half-gap) var(--single-gap) var(--half-gap);
+		padding: 0rem .5rem var(--single-gap) .5rem;
-		margin-bottom: 0;
+		margin-bottom: var(--single-gap);
 	}
 	.home-link {
 		max-width: 1rem;
@@ -470,7 +468,7 @@ h2 + .header-anchor {
 		flex-flow: row wrap;
 	}
 	.nav-item {
-		margin-right: var(--half-gap);
+		margin-right: .5rem;
 	}
 	.nav-item li {
 		height: 2rem;
@@ -479,16 +477,15 @@ h2 + .header-anchor {
 		border-top: 2px solid var(--contrast-color);
 	}
 	nav ul {
-		align-items: end;
 		display: flex;
-		flex-flow: row nowrap;
+		align-items: end;
 		justify-content: auto;
 		width: auto;
 	}
 
 	/* Posts List */
 	.post-copy a h3 {
-		margin-top: var(--half-gap);
+		margin-top: .5em;
 	}
 	.postlist {
 		padding-top: 0;