∂f/∂x

This might be helpful for someone else besides me that also found the haunt docs impenetrable at first. The original clue was from here: https://fpsd.codes/customizing-haunts-base-layout.html

Instead of defining the style inline like I did in this example you could add a e.g. (link (@ (rel "stylesheet") (href "style.css"))) in the layout function of your theme and then deploy a static style.css file to your site.

(use-modules (haunt asset)
             (haunt builder blog)
             (haunt builder atom)
             (haunt builder assets)
             (haunt reader commonmark)
             (haunt site)
             (haunt post))

;; These next three functions are copied from the haunt source:
;; https://git.dthompson.us/haunt/tree/haunt/builder/blog.scm
;; and then slightly changed..

;; Add some styling
(define (less-ugly-default-layout site title body)
  `((doctype "html")
    (head
     (meta (@ (charset "utf-8")))
     (meta (@ (name "viewport") (content "width=device-width, initial-scale=1.0")))
     (style "pre { overflow: auto; background-color: linen; border-radius: 0.5rem; padding: 0.2rem; }")
     (style "body { max-width: 50rem; font-family: system-ui; }")
     (style "h1 { background-color: steelblue; color: white; border-radius: 0.5rem; padding: 0.2rem; text-align: center; }")
     (style "h2 { color: steelblue; }")
     (style "h3 { color: steelblue; }")
     (style "h4 { color: steelblue; }")
     (style "a { color: steelblue; }")
     (title ,(string-append title " — " (site-title site))))
    (body
     (h1 ,(site-title site))
     ,body)))

;; Use some more headings :)
(define (less-ugly-default-post-template post)
  `((h2 ,(post-ref post 'title))
    (h3 "by " ,(post-ref post 'author))
    (h4 ,(date->string* (post-date post)))
    (div ,(post-sxml post))))

;; Here we just changed the order of date and title...
(define (less-ugly-default-collection-template site title posts prefix)
  (define (post-uri post)
    (string-append (or prefix "") "/"
                   (site-post-slug site post) ".html"))

  `((h3 ,title)
    (ul
     ,@(map (lambda (post)
              `(li
                (a (@ (href ,(post-uri post)))
                   ,(date->string* (post-date post))
                   " — "
                   ,(post-ref post 'title))))
            posts))))

;; Finally we define a theme
(define less-ugly-theme
  (theme #:name "Less ugly"
         #:layout less-ugly-default-layout
         #:post-template less-ugly-default-post-template
         #:collection-template less-ugly-default-collection-template))

;; And use it in the #:builders argument
(site #:title "Built with Guile"
      #:domain "example.com"
      #:default-metadata
      '((author . "Eva Luator")
        (email  . "eva@example.com"))
      #:readers (list commonmark-reader)
      #:builders (list (blog #:theme less-ugly-theme)
                       (atom-feed)
                       (atom-feeds-by-tag)
                       (static-directory "images")))