Add list page

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

assets/sass/header.scss

@@ -2,7 +2,7 @@
   padding: 2rem;
 
   .header-container {
-    max-width: $width-max;
+    max-width: $width-wide;
 
     width: 100%;
     margin: 0 auto;

assets/sass/hero.scss

@@ -3,6 +3,10 @@
   margin: 0 auto;
   padding: 2rem 2rem 0 2rem;
 
+  h1 {
+    font-size: 2.5rem;
+  }
+
   .meta {
     font-size: 0.8rem;
 
@@ -14,6 +18,10 @@
       color: color-mix(in srgb, var(--text) 50%, var(--background));
     }
   }
+
+  .image {
+    padding-top: 1.5rem;
+  }
 }
 
 .hero + .content {

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

assets/sass/main.scss

@@ -1,6 +1,6 @@
 $width-mobile: 30rem;
 $width-content: 45rem;
-$width-max: 60rem;
+$width-wide: 75rem;
 
 @import "colors";
 @import "fonts";
@@ -9,8 +9,9 @@ $width-max: 60rem;
 @import "heading";
 @import "image";
 
+@import "list";
+
 @import "header";
-@import "posts";
 @import "content";
 @import "hero";
 @import "footer";

assets/sass/posts.scss

@@ -1,42 +0,0 @@
-.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;
-      }
-    }
-  }
-}

layouts/_default/list.html

@@ -0,0 +1,12 @@
+{{ define "main" }}
+  <main class="with-meta">
+    <section class="meta">
+      <h1>{{ .Page.Title }}</h1>
+      <p class="length">A {{ .Kind }} with {{ len .Pages }} items</p>
+      {{ .Content }}
+    </section>
+    <div class="content">
+      {{ partial "posts/list.html" . }}
+    </div>
+  </main>
+{{ end }}