commit 2bc692c108f601b53ae6713e68aca262267ca585
parent 58b974e1deb600259ab0188400aee43e03e849f8
Author: Luke Willis <lukejw@loquat.dev>
Date: Mon, 25 Aug 2025 09:10:50 -0400
Iterate design
Diffstat:
6 files changed, 107 insertions(+), 98 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,34 +1,92 @@
+: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);
}
body {
+ background-color: var(--bg);
+ color: var(--tx);
max-width: 46rem;
- padding-inline: 3rem;
- margin-inline: auto;
+ padding: 1rem 3rem 1rem;
+ margin: 1rem auto 1rem;
+}
+
+.hidden {
+ display: none;
}
-table {
- width: 100%;
+a {
+ color: var(--cy);
+ text-decoration: none;
}
-nav > table {
- width: 100%;
+a:hover {
+ color: var(--cy-2);
}
-hr {
- margin-block: 1rem;
+#header {
+ padding: 1rem;
}
-footer {
- text-align: center;
+#headerLink {
+ font-size: 2rem;
+ font-weight: bold;
+ color: var(--tx);
+ padding-right: 1rem;
}
-.hidden {
- display: none;
+#headerSubtitle {
+ color: var(--tx-2);
}
-p {
- margin-block: 1rem;
+nav {
+ background-color: var(--ye);
+ padding-block: 0.6rem;
+ padding-left: 0.2rem;
+}
+
+nav a {
+ color: var(--bg);
+ padding: 0.4rem;
+ margin-right: 0.2rem;
+}
+
+nav a:hover {
+ background-color: var(--ye-2);
+ color: var(--bg);
+}
+
+#content {
+ padding: 1.5rem;
+ line-height: 1.5;
+}
+
+.hidden {
+ display: none;
}
diff --git a/grug.scm b/grug.scm
@@ -10,6 +10,9 @@
(define (link name uri)
`(a (@ (href ,uri)) ,name))
+(define (hspan contents)
+ `(span (@ (class "hidden")) ,contents))
+
(define (site-template site-metadata metadata body)
`(*TOP* (*DECL* DOCTYPE html)
(head
@@ -19,29 +22,26 @@
(title ,(string-append (assoc-ref metadata 'title)
" - "
(assoc-ref site-metadata 'title)))
- ,(stylesheet "reset")
- ,(stylesheet "style"))
+ ,(stylesheet "style"))
(body
+ (div (@ (id "header"))
+ (a (@ (id "headerLink")
+ (href "/"))
+ ,(assoc-ref site-metadata 'title))
+ (span (@ (class "hidden")) " - ")
+ (span (@ (id "headerSubtitle"))
+ ,(assoc-ref metadata 'subtitle)))
+ (hr (@ (class "hidden")))
(nav
- (table
- (tbody
- (tr
- (td (@ (align "left"))
- (a (@ (href "/"))
- "Home")
- " | "
- (a (@ (href "/about.html"))
- "About"))
- (td (@ (align "right"))
- (span (@ (class "hidden")) " | ")
- (a (@ (href "/contact.html"))
- "Contact"))))))
- (hr)
- (article
- (header
- (h1 ,(assoc-ref metadata 'title)))
- ,@body)
- (hr)
+ ,(link "Home" "/")
+ ,(hspan " | ")
+ ,(link "About" "/about.html")
+ ,(hspan " | ")
+ ,(link "Contact" "/contact.html"))
+ (hr (@ (class "hidden")))
+ (div (@ (id "content"))
+ ,@body)
+ (hr (@ (class "hidden")))
(footer
(p "© 2025 Luke Willis")))))
diff --git a/pages/about.md b/pages/about.md
@@ -1,4 +1,4 @@
-`((title . "About"));`
+`((title . "About") (subtitle . "What is this, anyway?"));`
## TL;DR
I want to help people make their technology serve them, rather than the other
way around. Technology "in the world, not of the world".
diff --git a/pages/contact.md b/pages/contact.md
@@ -1,16 +1,9 @@
-`((title . "Contact"));`
+`((title . "Contact") (subtitle . "Where to reach me"));`
I'm still setting everything up. If you've somehow managed to find me already,
feel free to contact me.
-## E-mail
-[lukejw@loquat.dev](mailto:lukejw@loquat.dev)
+- E-mail: lukejw@AT@loquat.DOT.dev
+- Signal: @loquatdev.07
-## Signal
-@loquatdev.07
-
-I don't use anything else, because everything else is bad, frankly. If I can
-confirm you're a real human being via one of these forms of contact, I can give
-you my phone number if you prefer.
-
-I am considering setting up IRC or Matrix for communication as well. All in good
-time, of course.
+The strange formatting is to prevent spam. If you are a human being, you should
+be able to figure out the correct email address.
diff --git a/pages/index.md b/pages/index.md
@@ -1,8 +1,7 @@
-`((title . "Home"));`
-Hello, world!
-
-This website is a work in progress.
-
-Come back soon!
-
-P.S. This site should render well in `lynx`
+`((title . "Home") (subtitle . "Technology in the world, not of the world"));`
+We live in a world full of technology. This technology is often out of your
+control. You might 'own' a computer of some kind, but you don't control what it
+does. The underlying systems and components used to make your laptop or your
+phone work are managed by a company, making every action with technology
+dependent on someone (or something) else. This is how a 'normal' user interacts
+with their technology.
