Small tweaks to the styling. Uses a global max width on the theme

.eleventy.js

@@ -28,7 +28,7 @@ module.exports = function(eleventyConfig) {
   });
 
   eleventyConfig.addFilter("readableDate", dateObj => {
-    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
+    return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("LLLL yyyy");
   });
 
   // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-date-string

_includes/layouts/post.njk

@@ -4,11 +4,13 @@ templateClass: tmpl-post
 ---
 <h1>{{ title }}</h1>
 
-<time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
+<ul class="post-metadata">
-{%- for tag in tags | filterTagList %}
+  <li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
-{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
+  {%- for tag in tags | filterTagList %}
-<a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
+  {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-{%- endfor %}
+  <li><a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}</li>
+  {%- endfor %}
+</ul>
 
 {{ content | safe }}
 

_includes/postslist.njk

@@ -3,10 +3,6 @@
   <li class="postlist-item{% if post.url == url %} postlist-item-active{% endif %}">
     <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
     <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
-    {% for tag in post.data.tags | filterTagList %}
-      {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-      <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
-    {% endfor %}
   </li>
 {% endfor %}
 </ol>

en/blog/secondpost.md

@@ -1,5 +1,5 @@
 ---
-title: This is my second post.
+title: This is my second post with a much longer title.
 description: This is a post on My Blog about leveraging agile frameworks.
 date: 2018-07-04
 tags:

en/tags-list.njk

@@ -4,7 +4,9 @@ layout: layouts/home.njk
 ---
 <h1>Tags</h1>
 
+<ul>
 {% for tag in collections.all | getAllTags | filterTagList %}
   {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
-  <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
+  <li><a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a></li>
 {% endfor %}
+</ul>

public/css/index.css

@@ -14,6 +14,7 @@
 
   --text-color: var(--color-gray-90);
   --text-color-link: #082840;
+  --text-color-link-active: #5f2b48;
   --text-color-link-visited: #17050F;
 }
 
@@ -25,6 +26,7 @@
 
     /* --text-color is assigned to --color-gray-_ above */
     --text-color-link: #1493fb;
+    --text-color-link-active: #6969f7;
     --text-color-link-visited: #a6a6f8;
 
     --background-color: #15202b;
@@ -40,23 +42,27 @@
 html,
 body {
   padding: 0;
-  margin: 0;
+  margin: 0 auto;
   font-family: var(--font-family);
   color: var(--text-color);
   background-color: var(--background-color);
 }
+html {
+  overflow-y: scroll;
+}
+body {
+  max-width: 40em;
+}
 
 p:last-child {
   margin-bottom: 0;
 }
-p,
+p {
-.tmpl-post li,
+  line-height: 1.5;
-img {
-  max-width: 37.5em; /* 600px /16 */
 }
-p,
+
-.tmpl-post li {
+li {
-  line-height: 1.45;
+  line-height: 1.5;
 }
 
 a[href] {
@@ -65,6 +71,10 @@ a[href] {
 a[href]:visited {
   color: var(--text-color-link-visited);
 }
+a[href]:hover,
+a[href]:active {
+  color: var(--text-color-link-active);
+}
 
 main {
   padding: 1rem;
@@ -114,11 +124,15 @@ code {
 }
 
 /* Header */
+header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 1em;
+}
 .home {
-  padding: 0 1rem;
-  float: left;
-  margin: 1rem 0; /* 16px /16 */
   font-size: 1em; /* 16px /16 */
+  margin-right: 2em;
 }
 .home :link:not(:hover) {
   text-decoration: none;
@@ -126,10 +140,10 @@ code {
 
 /* Nav */
 .nav {
+  display: flex;
   padding: 0;
+  margin: 0;
   list-style: none;
-  float: left;
-  margin-left: 1em;
 }
 .nav-item {
   display: inline-block;
@@ -147,13 +161,14 @@ code {
 .postlist {
   list-style: none;
   padding: 0;
+  padding-left: 1.5rem;
 }
 .postlist-item {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   counter-increment: start-from -1;
-  line-height: 1.8;
+  margin-bottom: 1em;
 }
 .postlist-item:before {
   display: inline-block;
@@ -161,6 +176,7 @@ code {
   content: "" counter(start-from, decimal-leading-zero) ". ";
   line-height: 100%;
   text-align: right;
+  margin-left: -1.5rem;
 }
 .postlist-date,
 .postlist-item:before {
@@ -171,8 +187,9 @@ code {
   word-spacing: -0.5px;
 }
 .postlist-link {
+  flex-basis: calc(100% - 1.5rem);
   padding-left: .25em;
-  padding-right: .25em;
+  padding-right: .5em;
   text-underline-position: from-font;
   text-underline-offset: 0;
   text-decoration-thickness: 1px;
@@ -191,30 +208,25 @@ code {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  text-transform: uppercase;
+  text-transform: capitalize;
-  font-size: 0.75em; /* 12px /16 */
-  padding: 0.08333333333333em 0.3333333333333em; /* 1px 4px /12 */
-  margin-left: 0.6666666666667em; /* 8px /12 */
-  margin-top: 0.5em; /* 6px /12 */
-  margin-bottom: 0.5em; /* 6px /12 */
-  color: var(--color-gray-90);
-  border: 1px solid var(--color-gray-50);
-  border-radius: 0.25em; /* 3px /12 */
-  text-decoration: none;
-  line-height: 1.8;
-}
-a[href].post-tag,
-a[href].post-tag:visited {
-  color: inherit;
-}
-a[href].post-tag:hover,
-a[href].post-tag:focus {
-  background-color: var(--color-gray-20);
 }
 .postlist-item > .post-tag {
   align-self: center;
 }
 
+/* Tags list */
+.post-metadata {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: .5em;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.post-metadata time {
+  margin-right: 1em;
+}
+
 /* Infobox */
 :root {
   --color-infobox: #ffc;