git.iko.soy/htmlang
on v2026.9.25170201 help sign in
htmlang/examples/blog.hl
49 lines 1.4 kB history raw
1-- A minimal blog template: header + list of posts + post template.
2@page My Blog
3@lang en
4@let primary #3b82f6
5@let ink #1f2937
6@let muted #6b7280
8@let card [
9 padding 24,
10 background white,
11 rounded 10,
12 border 1 #e5e7eb,
13 shadow 0 1px 3px rgba(0,0,0,0.05),
14 transition all 0.15s ease
17@let post $title $date $excerpt
18 @article [$card, spacing 8]
19 @text [bold, size 20, color $ink] $title
20 @text [size 13, color $muted] $date
21 @paragraph [color $ink, line-height 1.6]
22 $excerpt
23 @link [color $primary, bold] /posts/$title
24 Read more
26@column [max-width 720, center-x, padding 40, spacing 32]
27 @header [spacing 8]
28 @text [bold, size 36, color $ink] My Blog
29 @text [color $muted] Thoughts on static HTML, layout, and nice defaults.
31 @main [spacing 20]
32 @post [
33 title First post,
34 date April 16 2026,
35 excerpt "A short introduction to how I think about static site generators."
36 ]
37 @post [
38 title Why flexbox is enough,
39 date April 10 2026,
40 excerpt "Most layouts don't need CSS Grid. A walk through the cases where flexbox wins."
41 ]
42 @post [
43 title Tight feedback loops,
44 date April 2 2026,
45 excerpt "Dev-loop ergonomics beat feature counts. Here's the setup I use."
46 ]
48 @footer [padding-y 24, text-align center, color $muted, size 13]
49 Built with htmlang.