feat: Updates styles for sidebar and articles list view.

Sources/Docs/Templates/ArticleGrid.swift

@@ -2,8 +2,6 @@ import Foundation
 import HTML
 import Saga
 
-// TODO: Try a sidebar with navigation to tags & years.
-
 /// Displays lists of articles sectioned by a key.
 ///
 ///
@@ -66,9 +64,9 @@ struct ArticleGrid: NodeConvertible {
       rssLink: rssLink,
       extraHeader: extraHeader
     ) {
-      div(class: "grid grid-cols-4 mt-10 mb-10") {
+      div(class: "grid grid-cols-4 -mt-2") {
         // Sidebar
-        div(class: "overflow-auto bg-slate-800 rounded-l-lg border border-slate-200") {
+        div(class: "overflow-auto border-r border-slate-200") {
           // Years
           section(class: "pt-2") {
             div(class: "flex ps-2") {
@@ -90,7 +88,7 @@ struct ArticleGrid: NodeConvertible {
         }
 
         // Articles
-        div(class: "col-span-3 bg-slate-800 border border-slate-200 rounded-r-lg") {
+        div(class: "col-span-3") {
           articles.map { key, articles in
             section {
               header(key)

Sources/Docs/Templates/BaseLayout.swift

@@ -58,7 +58,10 @@ private func siteHeader(_ section: Section) -> Node {
           }
         }
       }
+      // TODO: Explore search being hidden / triggered by a button and hover above
+      //       the page content.
       div(class: "font-avenir w-full pt-4 px-8", id: "search") {}
+      div(class: "mt-2 mb-0 w-full border-b border-slate-200")
     }
   }
 }

Sources/Docs/Templates/RenderArticle.swift

@@ -156,7 +156,8 @@ func renderArticle(context: ItemRenderingContext<ArticleMetadata>) -> Node {
 }
 
 func renderArticleForGrid(article: Item<ArticleMetadata>, border: Bool = true) -> Node {
-  div(class: "p-4 bg-slate-800\(border ? " border border-slate-400 rounded-lg" : "")") {
+  // bg-slate-800
+  div(class: "p-4\(border ? " border border-slate-400 rounded-lg" : "")") {
     section {
       h3(class: "text-2xl font-bold") {
         a(class: "[&:hover]:border-b border-green-500", href: article.url) { article.title }

Sources/Docs/Templates/RenderArticles.swift

@@ -34,7 +34,7 @@ func renderTag<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) -> N
     rssLink: "tag/\(context.key.slugified)/",
     extraHeader: extraHeader
   ) { tag in
-    div(class: "border-b border-light mb-12 px-6 pt-6") {
+    div(class: "mb-12 px-6 pt-6") {
       a(href: "/articles") {
         div(class: "flex flex-row gap-4") {
           img(src: "/static/img/tag.svg", width: "40")
@@ -52,7 +52,7 @@ func renderYear<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) ->
     canocicalURL: "/articles/\(context.key)/",
     title: "Articles in \(context.key)",
     label: { year in
-      div(class: "border-b border-light pt-6 w-full") {
+      div(class: "pt-6 w-full") {
         a(href: "/articles/") {
           div(class: "px-6 flex flex-row gap-4 ") {
             img(src: "/static/img/calendar.svg", width: "40")
@@ -66,7 +66,7 @@ func renderYear<T>(context: PartitionedRenderingContext<T, ArticleMetadata>) ->
 }
 
 private func yearHeader(_ year: String) -> Node {
-  div(class: "border-b border-light pt-6 w-full") {
+  div(class: "pt-6 w-full") {
     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 }