Layout the blog list page

I shortened the descriptions to make the blog entries less tall. Also,
all font sizes are scaled by $font-size-bigger in xl media to make it
consistent with the paragraph style.

assets/sass/_blog.scss

@@ -0,0 +1,119 @@
+@import './vars';
+@import './mixins';
+@import './typography';
+
+.blog {
+  &--list {
+    display: flex;
+    flex-direction: column;
+
+    gap: 2.667rem;
+    @include media-up(lg) {
+      gap: 4rem;
+    }
+    @include media-up(xl) {
+      gap: 5rem;
+    }
+  }
+
+  &--item {
+    display: flex;
+    border: 1px solid #D9D9D9;
+    border-radius: 0.375rem;
+
+    flex-direction: column;
+    @include media-up(lg) {
+      flex-direction: row;
+    }
+
+    font-size: $font-size-default;
+    @include media-up(xl) {
+      font-size: $font-size-bigger;
+    }
+  }
+
+  &--item-poster {
+    flex-shrink: 0;
+    object-fit: cover;
+    object-position: center;
+
+    max-inline-size: 100%;
+    max-height: 18.75rem;
+    border-radius: 0.375rem 0.375rem 0 0;
+    @include media-up(lg) {
+      width: 28.125rem;
+      max-inline-size: unset;
+      max-height: unset;
+      border-radius: 0.375rem 0 0 0.375rem;
+    }
+  }
+
+  &--item-content {
+    padding: 1.333rem;
+    @include media-up(lg) {
+      padding: 2rem;
+    }
+    @include media-up(xl) {
+      padding: 2.5rem;
+    }
+  }
+
+  &--item-title {
+    font-size: 1.5em;
+    font-weight: 600;
+    margin-bottom: 1rem;
+  }
+
+  &--item-footer {
+    margin-top: 1.25rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: .625rem;
+  }
+
+  &--item-meta {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .625rem;
+    font-size: .875em;
+  }
+
+  &--item-author {
+    display: flex;
+    font-weight: 600;
+    align-items: center;
+    gap: .625rem;
+  }
+
+  &--item-userpic {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 1rem;
+  }
+
+  &--item-date-long {
+    display: none;
+    @include media-up(xl) {
+      display: unset;
+    }
+  }
+
+  &--item-date-medium {
+    display: unset;
+    @include media-up(xl) {
+      display: none;
+    }
+  }
+
+  &--item-link {
+    font-size: 1.125em;
+
+    &::after {
+      content: "↗";
+    }
+  }
+}

assets/sass/main.scss

@@ -1,4 +1,5 @@
 @import './about';
+@import './blog';
 @import './btn';
 @import './contact';
 @import './contact-form';

content/blog/three-steps/index.md

@@ -1,6 +1,7 @@
 ---
 title: Three important steps before jumping to the code
-description: As a developer, how do you start building a new feature? You may think, "It depends," and it certainly does. However, there could be frameworks that fit many situations, and I'd like to suggest one.
+description: Once you decide which feature you want to build, it’s time to decide how to actually build it.
+author: Denis Stebunov
 date: 2024-07-08T14:37:00+0200
 ---
 

content/blog/why-go-full-stack/index.md

@@ -1,6 +1,7 @@
 ---
 title: Why go full-stack?
 description: What does it mean to be a full-stack web developer today, and what are their pros and cons for team productivity?
+author: Denis Stebunov
 date: 2023-02-01T12:40:00+0300
 ---
 

content/blog/why-public-chats-are-better-than-direct-messages/index.md

@@ -1,6 +1,7 @@
 ---
 title: Why public chats are better than direct messages
-description: How we communicate makes an enormous impact on our work. One of the best strategies for improving communication in a team is making it open
+description: How we communicate makes an enormous impact on our work. One of the best strategies for improving communication in a team is making it open.
+author: Denis Stebunov
 date: 2022-09-07T17:38:00+0200
 ---
 

content/blog/zero-downtime-DB-migrations/index.md

@@ -1,6 +1,7 @@
 ---
 title: Migrating a production database without any downtime
-description: The basic principles of zero-downtime DB migrations and quick recipes for the most common scenarios for MySQL and Postgres
+description: The basic principles of zero-downtime DB migrations and quick recipes for the most common scenarios.
+author: Denis Stebunov
 date: 2024-10-16T14:32:00+0200
 ---
 

layouts/blog/blog.html

@@ -1,7 +1,56 @@
-{{- range where .Pages.ByDate.Reverse "Params.sitemap.disable" "ne" true }}
-  <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
-  <time datetime="{{ .Date | time.Format "2006-01-02" }}">
-    {{ .Date | time.Format ":date_medium" }}
-  </time>
-  <p>{{ .Description }}</p>
+{{- define "main" }}
+  {{- $logs := slice }}
+  {{- if hugo.IsDevelopment }}
+    {{- $logs = .Pages.ByDate.Reverse }}
+  {{- else }}
+    {{- $logs = where .Pages.ByDate.Reverse "Params.sitemap.disable" "ne" true }}
+  {{- end }}
+  <div class="page blog">
+    <div class="container">
+      <h1>Blog</h1>
+
+      <div class="blog--list">
+        {{- range $logs }}
+        <div class="blog--item">
+          {{- with .Resources.Get "poster.svg" }}
+            <img class="blog--item-poster" src="{{ .RelPermalink }}" />
+          {{- end }}
+
+          <div class="blog--item-content">
+            <h2 class=blog--item-title>{{ .Title }}</h2>
+
+            <p>{{ .Description }}</p>
+
+            <div class="blog--item-footer">
+              <div class="blog--item-meta">
+                <div class="blog--item-author">
+                  <img
+                    class="blog--item-userpic"
+                    src="{{ printf "/img/userpics/%s.png" (urlize .Params.author) }}"
+                  />
+                  {{ .Params.author }}
+                </div>
+
+                <div>
+                  <span class="blog--item-date-long">
+                    {{ time.Format ":date_long" .Params.date }}
+                  </span>
+
+                  <span class="blog--item-date-medium">
+                    {{ time.Format ":date_medium" .Params.date }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="blog--item-link">
+                <a href="{{ .RelPermalink }}">Read full article</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        {{- end }}
+      </div>
+    </div>
+  </div>
 {{- end }}
+{{- /* TODO: Change the footer. */}}