diff --git a/assets/static/style.css b/assets/static/style.css index a5c7f6d..6da41a5 100644 --- a/assets/static/style.css +++ b/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; } } - diff --git a/content/blog/hello-world/contents.lr b/content/blog/hello-world/contents.lr index c459b6a..353e960 100644 --- a/content/blog/hello-world/contents.lr +++ b/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. - diff --git a/models/entry.ini b/models/entry.ini index 9b6e55e..fccb931 100644 --- a/models/entry.ini +++ b/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 - diff --git a/templates/entry.html b/templates/entry.html index d68cd2a..01defd6 100644 --- a/templates/entry.html +++ b/templates/entry.html @@ -1,5 +1,39 @@ {% extends "base.html" %} {% block body %} +{% if this.parent._id == 'blog' %} +
+
+

{{ this.kicker }}

+

{{ this.title }}

+

{{ this.summary }}

+
+ + + +
+ {{ this.body }} + {% if this.external_url %}

Visit project →

{% endif %} +
+
+{% else %}
@@ -15,5 +49,5 @@
+{% endif %} {% endblock %} -