Theme siteHEADmaster

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;
+}
+
diff --git a/grug.scm b/grug.scm
index 5029807..a8bdab0 100644
--- a/grug.scm
+++ b/grug.scm
@@ -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")))