Highlight recent post dates on homepage and article metadata (#793)

- Display post dates on homepage.

This helps make recent articles more noticeable. The highlight is applied
to post dates less than 48 hours old on the client side.

_includes/footer.html

@@ -82,6 +82,13 @@
 			hljs.highlightBlock(block);
 		});
 
+		document.querySelectorAll('[data-post-date]').forEach((postDate) => {
+			// Highlight post dates that are less than 48 hours old.
+			if (Date.parse(postDate.dataset.postDate) > (Date.now() - 1000 * 60 * 60 * 96)) {
+				postDate.classList.add("post-recent-highlight");
+			};
+		});
+
 		// Initialize lightbox.
 		new Tobii({
 			zoom: false,

_layouts/article.html

@@ -115,6 +115,19 @@ layout: default
 		color: var(--base-color-text-subtitle-date);
 	}
 
+	.article-metadata .date.post-recent-highlight {
+		color: var(--post-recent-highlight-color);
+		opacity: 0.8;
+	}
+
+	.article-metadata .date.post-recent-highlight::after {
+		font-size: 80%;
+		content: "NEW";
+		border: 2px solid var(--post-recent-highlight-color);
+		padding: 2px 3px;
+		margin-left: 8px;
+	}
+
 	.tag.active {
 		filter: saturate(0.75);
 	}
@@ -176,7 +189,7 @@ layout: default
 						{% endif %}
 						<span class="by">{{ page.author }}</span>
 					</div>
-					<span class="date"> {{ page.date | date: "%e %B %Y" }}</span>
+					<span class="date" data-post-date="{{ page.date }}"> {{ page.date | date: "%e %B %Y" }}</span>
 				</div>
 
 				<div class="tags">

assets/css/main.css

@@ -24,6 +24,7 @@
   --accent-color: #f57389;
 
   --secondary-color-text: #546b99;
+  --post-recent-highlight-color: #ea580c;
 
   --link-color: hsl(206, 58%, 50%);
   --link-underline-color: hsla(206, 58%, 50%, 0.3);
@@ -117,6 +118,7 @@
     --accent-color: #5b5491;
 
     --secondary-color-text: #a6a6a6;
+    --post-recent-highlight-color: #fb923c;
 
     --link-color: hsl(200, 60%, 70%);
     --link-underline-color: hsla(200, 60%, 70%, 0.3);
@@ -1336,6 +1338,23 @@ article.article-card p.excerpt {
   font-size: 16px;
   opacity: 0.8;
   margin-top: 0;
+  margin-bottom: 6px;
+}
+article.article-card span.date {
+  color: var(--base-color-text);
+  font-size: 15px;
+  opacity: 0.65;
+}
+article.article-card span.date.post-recent-highlight {
+  color: var(--post-recent-highlight-color);
+  opacity: 1.0;
+}
+article.article-card span.date.post-recent-highlight::after {
+  font-size: 80%;
+  content: "NEW";
+  border: 1px solid var(--post-recent-highlight-color);
+  padding: 2px 3px;
+  margin-left: 8px;
 }
 article.article-card h3 {
   font-size: 22px;

pages/home.html

@@ -210,6 +210,7 @@ layout: default
 				<div class="content">
 					<h3>{{ post.title }}</h3>
 					<p class="excerpt">{{ post.excerpt }}</p>
+					<span class="date" data-post-date="{{ post.date }}">{{ post.date | date: "%e %B %Y" }}</span>
 				</div>
 			</article>
 		</a>
@@ -225,6 +226,7 @@ layout: default
 						<div>
 							<h3>{{ post.title }}</h3>
 							<p class="excerpt">{{ post.excerpt | truncate: 103 }}</p>
+							<span class="date" data-post-date="{{ post.date }}">{{ post.date | date: "%e %B %Y" }}</span>
 						</div>
 					</article>
 				</a>