diff options
| -rw-r--r-- | css/reset.css | 41 | ||||
| -rw-r--r-- | css/style.css | 110 | ||||
| -rw-r--r-- | grug.scm | 63 |
3 files changed, 211 insertions, 3 deletions
diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..ce0f06c --- /dev/null +++ b/css/reset.css @@ -0,0 +1,41 @@ +/* + Josh's Custom CSS Reset + https://www.joshwcomeau.com/css/custom-css-reset/ +*/ + +*, *::before, *::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +body { + line-height: 1.5; + -webkit-font-smoothing: antialiased; +} + +img, picture, video, canvas, svg { + display: block; + max-width: 100%; +} + +input, button, textarea, select { + font: inherit; +} + +p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; +} + +p { + text-wrap: pretty; +} +h1, h2, h3, h4, h5, h6 { + text-wrap: balance; +} + +#root, #__next { + isolation: isolate; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..57adde7 --- /dev/null +++ b/css/style.css @@ -0,0 +1,110 @@ +html { + scrollbar-gutter: stable both-edges; +} + +/* Page sizing */ + +.container { + max-width: 46rem; + padding-inline: 3rem; + margin-inline: auto; +} + +/* General */ + +h1, h2, h3, h4, h5, h6 { + margin-block: 1rem; +} + +p { + margin-block: 1rem; +} + +li { + margin-block: 0.3rem; +} + +li p { + margin-block: 0; +} + +a { + text-decoration: none; + color: #83a598; +} + +a:visited { + color: #458588; +} + +/* Article previews */ + +article { + margin-bottom: 1rem; +} + +.date { + margin-top: -1rem; +} + +/* Navigation bar */ + +nav { + display: flex; + justify-content: space-between; + padding-block: 1rem; + margin-bottom: 3rem; + border-bottom: 0.15rem solid #000; +} + +nav ul { + list-style-type: none; + display: flex; + margin: 0; + padding: 0; +} + +nav li { + display: inline; + padding-right: 1rem; +} + +nav li:first-child { + padding-left: 0; +} + +nav li:last-child { + padding-right: 0; +} + +nav a { + display: inline-block; + color: #000; +} + +nav a:visited { + color: #000; +} + +/* Footer */ + +footer { + padding-block: 1rem; + margin-top: 3rem; + border-top: 0.15rem solid #000; +} + +.copyright { + text-align: center; +} + +.copyright a { + vertical-align: middle; + margin-left: 0.4rem; +} + +.copyright img { + display: inline; + height: 1rem; +} + @@ -1,6 +1,63 @@ (use-modules (grug site) - (grug builders)) + (grug builders) + (srfi srfi-19)) + +(define (stylesheet name) + `(link (@ (rel "stylesheet") + (href ,(string-append "/css/" name ".css"))))) + +(define (link name uri) + `(a (@ (href ,uri)) ,name)) + +(define (blog-template site-metadata metadata body) + `(*TOP* (*DECL* DOCTYPE html) + (head + (meta (@ (charset "utf-8"))) + (meta (@ (name "viewport") + (content "width=device-width, initial-scale=1"))) + (title ,(string-append (assoc-ref metadata 'title) + " — " + (assoc-ref site-metadata 'title))) + (link (@ (rel "shortcut icon") + (type "image/png") + (href "https://codeberg.org/loquatdev.png"))) + ,(stylesheet "reset") + ,(stylesheet "style")) + (body + (div (@ (class "container")) + (nav + (ul (li ,(link (assoc-ref site-metadata 'title) "/"))) + (ul (li ,(link "About" "/about.html")))) + (h1 ,(assoc-ref metadata 'title)) + ,@body + (footer + (p (@ (class "copyright")) + "© 2025 Luke Willis" + (a (@ (href "https://creativecommons.org/licenses/by-sa/4.0/")) + (img (@ (src "https://mirrors.creativecommons.org/presskit/buttons/80x15/svg/by-sa.svg")))))))))) + +(define (blog-collection-template posts) + (sort posts + (lambda (a b) + (string>? (assoc-ref a 'date) + (assoc-ref b 'date)))) + `(,@(map + (lambda (post) + `(article (h2 (a (@ (href ,(assoc-ref post 'uri))) + ,(assoc-ref post 'title))) + ;; Parse ISO 8601 date from 'date and reformat it to look nice + (p (@ (class "date")) + ,(date->string + (string->date (assoc-ref post 'date) "~Y~m~d") "~B ~d, ~Y")))) + posts))) (site #:metadata `((title . "Luke Willis")) - #:builders (list (simple-pages "pages") - (blog "posts"))) + #:builders (list (simple-pages + "pages" + #:template blog-template) + (blog + "posts" + #:template blog-template + #:collection-template blog-collection-template) + (copy-directory + "css"))) |