Add editorial layout for blog posts

assets/static/style.css

@@ -65,6 +65,54 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
 .prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
 .button-link { display: inline-block; margin-top: 20px; font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
 
+.blog-post-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 640px) minmax(230px, 280px);
+  grid-template-areas:
+    "header info"
+    "body info";
+  gap: 34px clamp(54px, 7vw, 92px);
+  align-items: start;
+  padding-block: 68px 90px;
+}
+.blog-entry-header { grid-area: header; }
+.blog-entry-header h1 { font-style: normal; }
+.blog-entry-header .dek { margin-bottom: 0; }
+.blog-entry-body { grid-area: body; width: 100%; }
+.post-info {
+  grid-area: info;
+  border: 1px solid var(--rule);
+  background: var(--panel);
+  padding: 24px;
+}
+.post-info-title {
+  margin: 0 0 8px;
+  color: var(--magenta);
+  font: 500 10px var(--mono);
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+.post-info dl { margin: 0; }
+.post-info-row { padding: 18px 0; border-bottom: 1px solid var(--rule); }
+.post-info-row:last-child { padding-bottom: 0; border-bottom: 0; }
+.post-info dt {
+  margin-bottom: 7px;
+  color: var(--dim);
+  font: 500 9px var(--mono);
+  letter-spacing: .14em;
+  text-transform: uppercase;
+}
+.post-info dd { margin: 0; color: var(--ink); font-size: 14px; }
+.post-tags { display: flex; flex-wrap: wrap; gap: 7px; }
+.post-tags span {
+  border: 1px solid var(--teal);
+  padding: 3px 7px;
+  color: var(--teal);
+  font: 500 9px var(--mono);
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
 .site-footer { border-top: 1px solid var(--rule); color: var(--muted); font-size: 9px; }
 .footer-inner { min-height: 105px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
 .site-footer nav { display: flex; gap: 22px; }
@@ -79,7 +127,16 @@ h1 { max-width: 650px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
   .hero, .hero.compact { padding-block: 44px; }
   h1 { font-size: 30px; }
   .card-grid { grid-template-columns: 1fr; }
+  .blog-post-layout {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "info"
+      "body";
+    gap: 30px;
+    padding-block: 44px 65px;
+  }
+  .post-info { padding: 20px; }
   .footer-inner { align-items: flex-start; flex-direction: column; padding-block: 28px; }
   .site-footer nav { flex-wrap: wrap; }
 }
-

content/blog/hello-world/contents.lr

@@ -4,6 +4,14 @@ title: Hello from Labyricorn
 ---
 date: 2026-08-11
 ---
+author: Labyricorn
+---
+tags:
+
+Lektor
+Git
+Publishing
+---
 kicker: Blog
 ---
 summary: The first entry from the new Git-backed Lektor site.
@@ -13,4 +21,3 @@ The new Labyricorn site starts here: an intentionally small publishing system
 with content that is easy to edit, review, build, deploy, and roll back.
 
 More project notes, articles, and experiments will follow.
-

models/entry.ini

@@ -10,6 +10,14 @@ type = string
 label = Date
 type = date
 
+[fields.author]
+label = Author
+type = string
+
+[fields.tags]
+label = Tags
+type = strings
+
 [fields.kicker]
 label = Type
 type = select
@@ -27,4 +35,3 @@ type = markdown
 [fields.external_url]
 label = External URL
 type = url
-

templates/entry.html

@@ -1,5 +1,39 @@
 {% extends "base.html" %}
 {% block body %}
+{% if this.parent._id == 'blog' %}
+<article class="blog-post-layout shell">
+  <header class="blog-entry-header">
+    <p class="eyebrow">{{ this.kicker }}</p>
+    <h1>{{ this.title }}</h1>
+    <p class="dek">{{ this.summary }}</p>
+  </header>
+
+  <aside class="post-info" aria-label="Post information">
+    <p class="post-info-title">Post information</p>
+    <dl>
+      <div class="post-info-row">
+        <dt>Author</dt>
+        <dd>{{ this.author }}</dd>
+      </div>
+      <div class="post-info-row">
+        <dt>Published</dt>
+        <dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
+      </div>
+      <div class="post-info-row">
+        <dt>Tags</dt>
+        <dd class="post-tags">
+          {% for tag in this.tags %}<span>{{ tag }}</span>{% endfor %}
+        </dd>
+      </div>
+    </dl>
+  </aside>
+
+  <div class="blog-entry-body prose">
+    {{ this.body }}
+    {% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
+  </div>
+</article>
+{% else %}
 <article>
   <header class="hero compact entry-hero">
     <div class="shell narrow">
@@ -15,5 +49,5 @@
     </div>
   </section>
 </article>
+{% endif %}
 {% endblock %}
-