WIP: Lay out the article page

Set up the headings and the meta block that goes under the title.

assets/sass/_article.scss

@@ -0,0 +1,57 @@
+@import './vars';
+@import './mixins';
+@import './typography';
+
+.article {
+  h1.article--title {
+    font-size: 2.5rem;
+    margin-bottom: 2rem;
+  }
+
+  h2 {
+    font-size: 1.75rem;
+    margin-top: 2.5rem;
+  }
+
+  h3 {
+    font-size: 1.225rem;
+    margin-top: 1.28rem;
+  }
+
+  &--subtitle {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: .75rem;
+    justify-content: space-between;
+    margin-bottom: 2.625rem;
+    font-size: .875rem;
+  }
+
+  &--meta {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: .75rem;
+  }
+
+  &--author {
+    font-weight: 600;
+  }
+
+  &--userpic {
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.75rem;
+  }
+
+  &--follow {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+
+  img {
+    max-width: 100%;
+  }
+}

assets/sass/_typography.scss

@@ -18,6 +18,13 @@
   width: 100%;
 }
 
+.narrow-container {
+  margin: 0 auto;
+  max-width: $container-narrow-max-width;
+  padding: 0 1.25rem;
+  width: 100%;
+}
+
 @mixin a-no-underline {
   background-size: 0 1px;
 }

assets/sass/_vars.scss

@@ -32,6 +32,7 @@ $grid-breakpoints: (
 
 // Layout
 $container-default-max-width: 1120px;
+$container-narrow-max-width: 738px;
 $header-height-mobile: 70px;
 
 // Other

assets/sass/main.scss

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

i18n/en.toml

@@ -0,0 +1,3 @@
+[minute_with_count]
+one = '{{ . }} minute'
+other = '{{ . }} minutes'

layouts/blog/single.html

@@ -1,5 +1,48 @@
-<h1>{{ .Title }}</h1>
-<time datetime="{{ .Date | time.Format "2006-01-02" }}">
-  {{ .Date | time.Format ":date_medium" }}
-</time>
-{{ .Content }}
+{{- define "main" }}
+  <div class="page article">
+    <article class="narrow-container">
+      <h1 class="article--title">{{ .Title }}</h1>
+
+      <div class="article--subtitle">
+        <div class="article--meta">
+          <div>
+            <img
+              class="article--userpic"
+              src="{{ printf "/img/userpics/%s.png" (urlize .Params.author) }}"
+            />
+          </div>
+
+          <div class="article--author">{{ .Params.author }}</div>
+
+          <time datetime="{{ .Date | time.Format "2006-01-02" }}">
+            {{ .Date | time.Format ":date_long" }}
+          </time>
+
+          <div>|</div>
+
+          <div>
+            {{
+              T "minute_with_count" .ReadingTime
+              | printf "Estimated %s read"
+            }}
+          </div>
+        </div>
+
+        <div class="article--follow">
+          <div>Follow us:</div>
+          <div>
+            <img src="{{ (resources.Get "img/ico-x.svg").RelPermalink }}" />
+          </div>
+          <div>
+            <img
+              src="{{ (resources.Get "img/ico-youtube.svg").RelPermalink }}"
+            />
+          </div>
+          {{- /* TODO: Social links */}}
+        </div>
+      </div>
+
+      {{ .Content }}
+    </article>
+  </div>
+{{- end }}