tissue.scm: Add CSS.

* website/style.css: New file.
* tissue.scm (#:web-files): Copy CSS to website.
(#:web-css): Use it.

2 files changed, 63 insertions, 14 deletions

diff --git a/tissue.scm b/tissue.scm
index 711e015..f069c1e 100644
--- a/tissue.scm
+++ b/tissue.scm
@@ -11,17 +11,20 @@
                                               (string-append "https://git.systemreboot.net/tissue/commit/?id="
                                                              (commit-hash commit))))
                                   (commits-in-current-repository)))
- #:web-files (cons (file "index.html"
-                         (skribe-exporter "website/index.skb"))
-                   (append (map (lambda (font-file)
-                                  (file (string-append "fonts/" font-file)
-                                        (copier (string-append (getenv "GUIX_ENVIRONMENT")
-                                                               "/share/fonts/web/" font-file))))
-                                (list "IBMPlexSans-Regular-Latin1.woff2"
-                                      "IBMPlexSans-Bold-Latin1.woff2"
-                                      "IBMPlexMono-Regular-Latin1.woff2"
-                                      "IBMPlexMono-Bold-Latin1.woff2"))
-                           (filter-map (lambda (filename)
-                                         (file (replace-extension filename "html")
-                                               (gemtext-exporter filename)))
-                                       (gemtext-files-in-directory "issues")))))
+ #:web-css "/style.css"
+ #:web-files (cons* (file "index.html"
+                          (skribe-exporter "website/index.skb"))
+                    (file "style.css"
+                          (copier "website/style.css"))
+                    (append (map (lambda (font-file)
+                                   (file (string-append "fonts/" font-file)
+                                         (copier (string-append (getenv "GUIX_ENVIRONMENT")
+                                                                "/share/fonts/web/" font-file))))
+                                 (list "IBMPlexSans-Regular-Latin1.woff2"
+                                       "IBMPlexSans-Bold-Latin1.woff2"
+                                       "IBMPlexMono-Regular-Latin1.woff2"
+                                       "IBMPlexMono-Bold-Latin1.woff2"))
+                            (filter-map (lambda (filename)
+                                          (file (replace-extension filename "html")
+                                                (gemtext-exporter filename)))
+                                        (gemtext-files-in-directory "issues")))))
diff --git a/website/style.css b/website/style.css
new file mode 100644
index 0000000..907de70
--- /dev/null
+++ b/website/style.css
@@ -0,0 +1,46 @@
+@font-face {
+    font-family: 'IBM Plex Sans';
+    src: url('/fonts/IBMPlexSans-Regular-Latin1.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBM Plex Sans';
+    src: url('/fonts/IBMPlexSans-Bold-Latin1.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('/fonts/IBMPlexMono-Regular-Latin1.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'IBM Plex Mono';
+    src: url('/fonts/IBMPlexMono-Bold-Latin1.woff2') format('woff2');
+    font-weight: bold;
+    font-style: normal;
+}
+
+body {
+    margin: 0 auto;
+    max-width: 1000px;
+    line-height: 1.6;
+    font-family: 'IBM Plex Sans', sans-serif;
+    padding: 0 10px;
+}
+
+pre, code, samp {
+    font-family: 'IBM Plex Mono', monospace;
+}
+
+pre {
+    background-color: #f0f0f0;
+    padding: 1em;
+}
+
+h1, h3 { font-variant: small-caps; }