commit bb51be94e0f5a0a34eabb7f999c87826907e8869
parent 0ef049208225aaa2845abb0c384e94faf0499529
Author: Luke Willis <lukejw@loquat.dev>
Date: Sun, 31 Aug 2025 19:12:25 -0400
Update style
Diffstat:
| D | css/reset.css | | | 41 | ----------------------------------------- |
| M | css/style.css | | | 139 | +++++++++++++++++++++++++++++++++++++------------------------------------------ |
| M | grug.scm | | | 58 | +++++++++++++++++++++++++++++++++++++--------------------- |
3 files changed, 102 insertions(+), 136 deletions(-)
diff --git a/css/reset.css b/css/reset.css
@@ -1,41 +0,0 @@
-/*
- 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
@@ -1,111 +1,102 @@
+:root {
+ --bg: #FFFCF0;
+ --bg-2: #F2F0E5;
+ --ui: #E6E4D9;
+ --tx: #100F0F;
+ --tx-2: #6F6E69;
+ --ye: #AD8301;
+ --ye-2: #D0A215;
+ --cy: #24837B;
+ --cy-2: #3AA99F;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg: #100F0F;
+ --bg-2: #1C1B1A;
+ --tx: #CECDC3;
+ --tx-2: #878580;
+ --ye: #D0A215;
+ --ye-2: #AD8301;
+ --cy: #3AA99F;
+ --cy-2: #24837B;
+ }
+}
+
html {
scrollbar-gutter: stable both-edges;
- font-family: serif;
+ font-family: sans-serif;
+ background-color: var(--bg-2);
}
-/* Page sizing */
-
-.container {
+body {
+ background-color: var(--bg);
+ color: var(--tx);
max-width: 46rem;
- padding-inline: 3rem;
- margin-inline: auto;
-}
-
-/* General */
-
-h1, h2, h3, h4, h5, h6 {
- margin-block: 1rem;
+ padding: 1rem 3rem 1rem;
+ margin: 1rem auto 1rem;
}
-p {
- margin-block: 1rem;
-}
-
-li {
- margin-block: 0.3rem;
-}
-
-li p {
- margin-block: 0;
+.hidden {
+ display: none;
}
a {
+ color: var(--cy);
text-decoration: none;
- color: #83a598;
}
-a:visited {
- color: #458588;
+a:hover {
+ color: var(--cy-2);
}
-/* Article previews */
-
-article {
- margin-bottom: 1rem;
+img {
+ display: block;
+ max-width: 100%;
}
-.date {
- margin-top: -1rem;
+#header {
+ padding: 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;
+#headerLink {
+ font-size: 2rem;
+ font-weight: bold;
+ color: var(--tx);
padding-right: 1rem;
}
-nav li:first-child {
- padding-left: 0;
+#headerSubtitle {
+ color: var(--tx-2);
}
-nav li:last-child {
- padding-right: 0;
+nav {
+ background-color: var(--ye);
+ padding-block: 0.6rem;
+ padding-left: 0.2rem;
}
nav a {
- display: inline-block;
- color: #000;
+ color: var(--bg);
+ padding: 0.4rem;
+ margin-right: 0.2rem;
}
-nav a:visited {
- color: #000;
+nav a:hover {
+ background-color: var(--ye-2);
+ color: var(--bg);
}
-/* Footer */
-footer {
- padding-block: 1rem;
- margin-top: 3rem;
- border-top: 0.15rem solid #000;
+article p {
+ color: var(--tx-2);
}
-.copyright {
- text-align: center;
+#content {
+ padding: 1rem;
+ line-height: 1.5;
}
-.copyright a {
- vertical-align: middle;
- margin-left: 0.4rem;
+.hidden {
+ display: none;
}
-
-.copyright img {
- display: inline;
- height: 1rem;
-}
-
diff --git a/grug.scm b/grug.scm
@@ -10,37 +10,52 @@
(define (link name uri)
`(a (@ (href ,uri)) ,name))
+(define (hspan contents)
+ `(span (@ (class "hidden")) ,contents))
+
+(define (hhr)
+ `(hr (@ (class "hidden"))))
+
(define (blog-template site-metadata metadata body)
- `(*TOP* (*DECL* DOCTYPE html)
+ `(*TOP*
+ (*DECL* DOCTYPE html)
(head
- (meta (@ (charset "utf-8")))
+ (meta (@ (harset "utf-8")))
(meta (@ (name "viewport")
(content "width=device-width, initial-scale=1")))
(title ,(string-append (assoc-ref metadata 'title)
" - "
(assoc-ref site-metadata 'title)))
- ,(stylesheet "reset")
- ,(stylesheet "style"))
- (body
- (div (@ (class "container"))
- (nav
- (ul (li ,(link (assoc-ref site-metadata 'title) "/")))
- (ul (li ,(link "My Setup(s)" "/setups.html"))
- (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 "/img/by-sa.svg"))))))))))
-
+ ,(stylesheet "style"))
+ (body
+ (div (@ (id "header"))
+ (a (@ (id "headerLink")
+ (href "/"))
+ ,(assoc-ref site-metadata 'title))
+ ,(hspan " - ")
+ (span (@ (id "headerSubtitle"))
+ ,(assoc-ref site-metadata 'subtitle)))
+ ,(hhr)
+ (nav
+ ,(link "Home" "/")
+ ,(hspan " | ")
+ ,(link "Setup(s)" "/setups.html")
+ ,(hspan " | ")
+ ,(link "About" "/about.html"))
+ ,(hhr)
+ (div (@ (id "content"))
+ ,@body)
+ ,(hhr)
+ (footer
+ (p "Copyright 2025 Luke Willis")))))
+
(define (blog-collection-template posts)
- `(,@(map
+ `((h1 "Recent Posts")
+ ,@(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
+ ;; 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"))))
@@ -49,7 +64,8 @@
(string>? (assoc-ref a 'date)
(assoc-ref b 'date)))))))
-(site #:metadata `((title . "Luke Willis"))
+(site #:metadata `((title . "Luke Willis")
+ (subtitle . "Orthodox Christian Technology"))
#:builders (list (simple-pages
"pages"
#:template blog-template)
