Add list page

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

assets/sass/list.scss

@@ -0,0 +1,96 @@
+main.with-meta {
+  max-width: $width-wide;
+  margin: 0 auto;
+  padding: 2rem;
+
+  > .content {
+    padding: 0;
+  }
+
+  $width-sidebar: ($width-wide - $width-content) / 2 - 2rem;
+  display: grid;
+  grid-template-columns: $width-sidebar $width-content $width-sidebar;
+  column-gap: 2rem;
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  .length {
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+    margin: 0.25rem 0;
+    font-size: 0.8rem;
+  }
+}
+
+@media (max-width: $width-wide) {
+  main.with-meta {
+    display: block;
+    padding: 0;
+
+    > .meta {
+      max-width: $width-content;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+
+    > .content {
+      padding: 2rem;
+    }
+  }
+}
+
+@media (max-width: $width-mobile) {
+  main.with-meta {
+    > .meta {
+      padding: 1rem;
+    }
+
+    > .content {
+      padding: 0 1rem 1rem 1rem;
+    }
+  }
+}
+
+.posts-list {
+  .post {
+    display: block;
+    color: inherit;
+    text-decoration: none;
+
+    &:not(:first-child) {
+      margin-top: 4rem;
+    }
+
+    .title {
+      font-size: 2.25rem;
+    }
+
+    .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);
+  }
+}
+
+@media (max-width: $width-mobile) {
+  .posts-list {
+    .post {
+      &:not(:first-child) {
+        margin-top: 2rem;
+      }
+    }
+  }
+}