From f5a737bf981a8fe0cf2999a3773b37bc6dd85acc Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Wed, 6 Aug 2025 23:05:36 +0200
Subject: [PATCH] Add post list, 404

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 assets/sass/colors.scss          |  5 -----
 assets/sass/common.scss          | 23 ++++++++++++++++++++
 assets/sass/fonts.scss           |  6 ------
 assets/sass/header.scss          |  1 +
 assets/sass/main.scss            |  7 +++++--
 assets/sass/posts.scss           | 36 ++++++++++++++++++++++++++++++++
 assets/sass/size.scss            | 16 ++++++++++++++
 layouts/404.html                 | 11 ++++++++++
 layouts/index.html               |  5 +++++
 layouts/partials/posts/item.html | 11 ++++++++++
 layouts/partials/posts/list.html |  7 +++++++
 11 files changed, 115 insertions(+), 13 deletions(-)
 create mode 100644 assets/sass/common.scss
 create mode 100644 assets/sass/posts.scss
 create mode 100644 assets/sass/size.scss
 create mode 100644 layouts/404.html
 create mode 100644 layouts/partials/posts/item.html
 create mode 100644 layouts/partials/posts/list.html

diff --git a/assets/sass/colors.scss b/assets/sass/colors.scss
index 4cfdf55..c9c38c7 100644
--- a/assets/sass/colors.scss
+++ b/assets/sass/colors.scss
@@ -141,8 +141,3 @@
     --accent-950: #f8eeec;
   }
 }
-
-html {
-  background: var(--background);
-  color: var(--text);
-}
diff --git a/assets/sass/common.scss b/assets/sass/common.scss
new file mode 100644
index 0000000..cc57c71
--- /dev/null
+++ b/assets/sass/common.scss
@@ -0,0 +1,23 @@
+:root {
+  background: var(--background);
+  color: var(--text);
+
+  font-size: 100%;
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+}
+
+a {
+  text-decoration: none;
+  color: var(--text-600);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  font-weight: 500;
+}
diff --git a/assets/sass/fonts.scss b/assets/sass/fonts.scss
index 05c9eaa..15ea57f 100644
--- a/assets/sass/fonts.scss
+++ b/assets/sass/fonts.scss
@@ -173,9 +173,3 @@
     font-optical-sizing: auto;
   }
 }
-
-html {
-  font-size: 100%;
-  font-family: var(--font-family);
-  line-height: var(--line-height);
-}
diff --git a/assets/sass/header.scss b/assets/sass/header.scss
index 85efd3b..d649faa 100644
--- a/assets/sass/header.scss
+++ b/assets/sass/header.scss
@@ -22,6 +22,7 @@
 
     .site-title {
       font-size: 1.5rem;
+      font-weight: 500;
     }
 
     .nav {
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index a1402bd..43f2ed2 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,9 +1,12 @@
-$width-mobile: 32rem;
-$width-content: 48rem;
+$width-mobile: 30rem;
+$width-content: 45rem;
 $width-max: 60rem;
 
 @import "colors";
 @import "fonts";
+@import "size";
+@import "common";
 
 @import "header";
+@import "posts";
 @import "footer";
diff --git a/assets/sass/posts.scss b/assets/sass/posts.scss
new file mode 100644
index 0000000..a66f208
--- /dev/null
+++ b/assets/sass/posts.scss
@@ -0,0 +1,36 @@
+.posts-list {
+  .post {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+
+    &:not(:first-child) {
+      margin-top: 4rem;
+    }
+
+    .title {
+      font-size: 2.25rem;
+    }
+
+    .summary {
+      font-size: 1.1rem;
+    }
+
+    .meta {
+      font-size: 0.8rem;
+
+      .date {
+        color: var(--text-600);
+      }
+
+      .duration {
+        color: color-mix(in srgb, var(--text) 50%, var(--background));
+      }
+    }
+  }
+
+  .post:hover .title,
+  .post:hover .summary {
+    color: var(--text-900);
+  }
+}
diff --git a/assets/sass/size.scss b/assets/sass/size.scss
new file mode 100644
index 0000000..8da0787
--- /dev/null
+++ b/assets/sass/size.scss
@@ -0,0 +1,16 @@
+body {
+  margin: 0.5rem;
+  min-height: calc(100vh - 1rem);
+  display: flex;
+  flex-direction: column;
+
+  main {
+    flex: 1;
+
+    .content {
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2.5rem;
+    }
+  }
+}
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..808b8e5
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,11 @@
+{{ define "main" }}
+  <main>
+    <div class="content">
+      <h1>404</h1>
+      <p>This is a dead link. Whatever was here, it&apos;s gone now.</p>
+      <p>
+        <a href="{{ .Site.BaseURL }}">Let&apos;s pretend this never happened</a>.
+      </p>
+    </div>
+  </main>
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index e4e4a83..99f07ea 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,2 +1,7 @@
 {{ define "main" }}
+  <main>
+    <div class="content">
+      {{ partial "posts/list.html" . }}
+    </div>
+  </main>
 {{ end }}
diff --git a/layouts/partials/posts/item.html b/layouts/partials/posts/item.html
new file mode 100644
index 0000000..4bb83dc
--- /dev/null
+++ b/layouts/partials/posts/item.html
@@ -0,0 +1,11 @@
+{{ if not .Params.private }}
+  <a href="{{ .Permalink }}" class="post">
+    <h1 class="title">{{ .Title }}</h1>
+    <div class="summary">{{ .Summary }}</div>
+    <div class="meta">
+      <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+      &middot;
+      <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
+    </div>
+  </a>
+{{ end }}
diff --git a/layouts/partials/posts/list.html b/layouts/partials/posts/list.html
new file mode 100644
index 0000000..9e5b0fa
--- /dev/null
+++ b/layouts/partials/posts/list.html
@@ -0,0 +1,7 @@
+<div class="posts-list">
+  {{ with .Site.GetPage "/posts" }}
+    {{ range sort .Pages "Date" "desc" }}
+      {{ partial "posts/item.html" . }}
+    {{ end }}
+  {{ end }}
+</div>