feat: Style updates to articles list view.

Sources/Docs/Templates/BaseLayout.swift

@@ -24,7 +24,7 @@ func baseLayout(
       body(class: "text-white text-lg font-avenir \(section.rawValue)") {
         siteHeader(section)
 
-        div(class: "mb-auto") {
+        div(class: "mb-auto\(section == .articles ? " mx-10" : "")") {
           children()
         }
         if section == .articles {

Sources/Docs/Templates/RenderArticle.swift

@@ -13,8 +13,13 @@ func tagPrefix(index: Int, totalTags: Int) -> Node {
   return ""
 }
 
-func renderArticleInfo(_ article: Item<ArticleMetadata>) -> Node {
+enum RenderArticleInfoContext {
-  div(class: "text-slate-400 text-sm mb-8") {
+  case article
+  case preview
+}
+
+func renderArticleInfo(_ article: Item<ArticleMetadata>, context: RenderArticleInfoContext = .article) -> Node {
+  div(class: "text-slate-400 text-sm mb-8\(context == .preview ? " -mt-2" : "")") {
     span(class: "border-r border-gray pr-2 mr-2") {
       article.getDate().formatted("MMMM dd, yyyy")
     }
@@ -151,12 +156,12 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
 }
 
 func renderArticleForGrid(article: Item<ArticleMetadata>, border: Bool = true) -> Node {
-  div(class: "bg-slate-800\(border ? " border border-slate-400 rounded-lg" : "")") {
+  div(class: "p-4 bg-slate-800\(border ? " border border-slate-400 rounded-lg" : "")") {
-    section(class: "m-4") {
+    section {
-      h3(class: "post-title text-2xl font-bold mb-2") {
+      h3(class: "text-2xl font-bold") {
         a(class: "[&:hover]:border-b border-green-500", href: article.url) { article.title }
       }
-      renderArticleInfo(article)
+      renderArticleInfo(article, context: .preview)
       p {
         a(href: article.url) {
           div {

Sources/Docs/Templates/RenderArticles.swift

@@ -18,16 +18,15 @@ func renderArticles(context: ItemsRenderingContext<ArticleMetadata>) -> Node {
   return baseLayout(canocicalURL: "/articles/", section: .articles, title: "Articles", rssLink: "", extraHeader: "") {
     // TODO: Add list of tags here that can be navigated to.
     sortedByYearDescending.map { year, articles in
-      div(class: "mt-8 bg-slate-800") {
+      div(class: "mt-8 bg-slate-800 rounded-lg") {
-        div(class: "pt-8 mx-10") {
+        div(class: "border-b border-light pt-6 w-full") {
-          div(class: "border-b border-light flex flex-row gap-4 mb-12") {
+          div(class: "px-6 flex flex-row gap-4 ") {
             img(src: "/static/img/calendar.svg", width: "40")
             h1(class: "text-4xl font-extrabold pt-3") { year }
           }
-
-          div(class: "grid gap-10 mb-16") {
-            articles.map { renderArticleForGrid(article: $0, border: false) }
         }
+        div(class: "grid gap-10 mx-6 mb-16") {
+          articles.map { renderArticleForGrid(article: $0, border: false) }
         }
       }
     }
@@ -82,12 +81,12 @@ private func baseRenderArticles(
   ) {
     label()
     articles.map { article in
-      section(class: "mb-10") {
+      section {
-        h1(class: "post-title text-2xl font-bold mb-2") {
+        h1(class: "text-2xl font-bold") {
           a(class: "[&:hover]:border-b border-orange", href: article.url) { article.title }
         }
         renderArticleInfo(article)
-        p(class: "mt-4") {
+        p {
           a(href: article.url) { article.summary }
         }
       }

content/static/input.css

@@ -134,7 +134,7 @@ section h3 {
   @apply text-orange-400;
 }
 
-p {
+article p {
   @apply mb-8;
 }