Add post list, 404

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/colors.scss

@@ -141,8 +141,3 @@
     --accent-950: #f8eeec;
   }
 }
-
-html {
-  background: var(--background);
-  color: var(--text);
-}

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;
+  }
+}

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);
-}

assets/sass/header.scss

@@ -22,6 +22,7 @@
 
     .site-title {
       font-size: 1.5rem;
+      font-weight: 500;
     }
 
     .nav {

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";

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 h1,
+  .post:hover p {
+    color: var(--text-900);
+  }
+}

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;
+    }
+  }
+}

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 }}

layouts/index.html

@@ -1,2 +1,7 @@
 {{ define "main" }}
+  <main>
+    <div class="content">
+      {{ partial "posts/list.html" . }}
+    </div>
+  </main>
 {{ end }}

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 }}

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>