From 7c35081ca94b9c840969775e38ab3e7ad933435f Mon Sep 17 00:00:00 2001 From: eltrac Date: Sun, 25 Oct 2026 18:45:40 +0800 Subject: basic layouts; some content on index page initial home page --- .gitignore | 1 + builder/base.scm | 29 ++++ builder/components.scm | 43 ++++++ content/pages.scm | 44 ++++++ haunt.scm | 16 +- static/avatar.jpg | Bin 0 -> 42156 bytes static/brcn.png | Bin 0 -> 1151 bytes static/codeberg.svg | 15 ++ static/confetti-doodles.svg | 1 + static/main.css | 139 ++++++++++++++++++ static/normalize.css | 351 ++++++++++++++++++++++++++++++++++++++++++++ static/reset.css | 48 ++++++ static/weepinbell.png | Bin 0 -> 170105 bytes 13 files changed, 683 insertions(+), 4 deletions(-) create mode 100644 builder/base.scm create mode 100644 builder/components.scm create mode 100644 content/pages.scm create mode 100644 static/avatar.jpg create mode 100644 static/brcn.png create mode 100644 static/codeberg.svg create mode 100644 static/confetti-doodles.svg create mode 100644 static/main.css create mode 100644 static/normalize.css create mode 100644 static/reset.css create mode 100644 static/weepinbell.png diff --git a/.gitignore b/.gitignore index c9490a5..0e60903 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ /site +.DS_Store diff --git a/builder/base.scm b/builder/base.scm new file mode 100644 index 0000000..3ce2536 --- /dev/null +++ b/builder/base.scm @@ -0,0 +1,29 @@ +(define-module (builder base) + #:use-module (haunt site) + #:export (base-template + contained-template)) + +(define (base-template site . content) + `((doctype "html") + (html (@ (lang "en")) + (head + (meta (@ (charset "utf-8"))) + (meta (@ (content "width=device-width,initial-scale=1") + (name "viewport"))) + ;; fonts + (link (@ (rel "preconnect") + (href "https://fonts.bunny.net"))) + (link (@ (rel "stylesheet") + (href "https://fonts.bunny.net/css?family=alegreya:400,400i,800,800i"))) + ;; stylesheet + (link (@ (rel "stylesheet") (href "/static/normalize.css"))) + (link (@ (rel "stylesheet") (href "/static/reset.css"))) + (link (@ (rel "stylesheet") (href "/static/main.css"))) + (title ,(site-title site))) + (body ,@content)))) + +(define (contained-template site . content) + (base-template site + `(div (@ (class "container")) + ,@content))) + diff --git a/builder/components.scm b/builder/components.scm new file mode 100644 index 0000000..1e0d9fe --- /dev/null +++ b/builder/components.scm @@ -0,0 +1,43 @@ +(define-module (builder components) + #:export (header badge prose small-prose linkbox + linkline slash link elink)) + +(define (header name desc image) + `(header (@ (class "header")) + (div (img (@ (src ,image) (class "header-image")))) + (div (@ (class "header-text")) + (h2 (@ (class "header-title")) ,name) + (div (@ (class "header-desc")) ,desc)))) + +(define (badge name icon link) + `(a (@ (class "badge") (target "_blank") (href ,link)) + (img (@ (src ,icon))) + (span ,name))) + +(define (prose . content) + `(div (@ (class "prose-container")) + ,@content)) +(define (small-prose . content) + `(div (@ (class "prose-container small")) + ,@content)) + +(define (linkbox name desc link image) + `(a (@ (class "linkbox") (href ,link) (target "_blank")) + (img (@ (src ,image))) + (div + (h4 ,name) + (p ,desc)))) + +(define (link url text) + `(a (@ (href ,url)) ,text)) +(define (elink url text) + `(a (@ (href ,url) (target "_blank")) ,text)) + +(define (linkline . links) + `(ul (@ (class "linkline")) + ,(map (lambda (link) + `(li (a (@ (href ,(car link))) ,(cdr link)))) + links))) +(define (slash url) + (cons url url)) + diff --git a/content/pages.scm b/content/pages.scm new file mode 100644 index 0000000..a1d67d1 --- /dev/null +++ b/content/pages.scm @@ -0,0 +1,44 @@ +(define-module (content pages) + #:use-module (haunt page) + #:use-module (haunt html) + #:use-module (builder base) + #:use-module (builder components) + #:export (index-page)) + +(define (index-page) + (lambda (site posts) + (make-page "index.html" + (contained-template site + (header "Hi, Eltrac here 👋" + `(p "I write software, fictions and non-fictions.") + "/static/avatar.jpg") + (prose + `(p "Member of " ,(badge "Codeberg e.V." "/static/codeberg.svg" + "https://codeberg.org/Codeberg-e.V./") ", " + "I maintain and contribute to FOSS projects, mostly in Go, Clojure, and JavaScript.")) + (small-prose + `(p "Recently, I've been developing weepinbell, a Webmention receiver.") + (linkbox "weepinbell" "A Webmention receiver written in Clojure." + "https://codeberg.org/eltrac/weepinbell" "/static/weepinbell.png")) + (prose + `(p "Former moderator of " + ,(badge "Backrooms Wiki CN" "/static/brcn.png" + "https://backrooms-wiki-cn.wikidot.com/") ", " + "I wrote some " ,(elink "https://backrooms-wiki-cn.wikidot.com/author:eltrac" "fictions") " there in Chinese. " + "Now I write some " ,(elink "https://www.geedea.pro/fiction/" "short stories") " on my own blog.")) + (prose + `(p "Indie web blogger, I write in both " ,(elink "https://geedea.pro/" "Chinese") " and " ,(elink "https://geedea.pro/en/" "English") ", " + "about computer science, software freedom, philosophy, literature and my life. My blog is named " (em (@ (style "font-style: italic")) "Geek Death Project") ". " + "Consider this a monologue of a committed observer.")) + (small-prose + `(p "Check out some of my " ,(elink "https://slashpages.net/" "slash pages") " :3") + (linkline + (slash "/contact") + (slash "/uses") + (slash "/elsewhere") + (slash "/donates"))) + `(footer (@ (style "text-align: right; line-height: 1.5")) + (p "This page is still under construction. 🚧") + (p "Built using " ,(elink "https://dthompson.dev/projects/haunt.html" "haunt") ", " + "with " (em (@ (style "font-style: italic")) "Lisp") " magic. 👻"))) + sxml->html))) diff --git a/haunt.scm b/haunt.scm index 65eb760..3fc75bd 100644 --- a/haunt.scm +++ b/haunt.scm @@ -1,9 +1,15 @@ (use-modules (haunt asset) (haunt builder blog) + (haunt builder flat-pages) (haunt builder atom) - ;(haunt builder assets) + (haunt builder assets) (haunt reader commonmark) - (haunt site)) + (haunt html) + (haunt page) + (haunt site) + (builder base) + (builder components) + (content pages)) (site #:title "Eltrac" #:domain "eltr.ac" @@ -12,6 +18,8 @@ (email . "hi@eltr.ac")) #:readers (list commonmark-reader) #:builders (list (blog) - ;(static-directory "images") + (flat-pages) + (static-directory "static") (atom-feed) - (atom-feeds-by-tag))) + (atom-feeds-by-tag) + (index-page))) diff --git a/static/avatar.jpg b/static/avatar.jpg new file mode 100644 index 0000000..4430627 Binary files /dev/null and b/static/avatar.jpg differ diff --git a/static/brcn.png b/static/brcn.png new file mode 100644 index 0000000..2d1d60e Binary files /dev/null and b/static/brcn.png differ diff --git a/static/codeberg.svg b/static/codeberg.svg new file mode 100644 index 0000000..cdcc6cb --- /dev/null +++ b/static/codeberg.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/static/confetti-doodles.svg b/static/confetti-doodles.svg new file mode 100644 index 0000000..d1c4965 --- /dev/null +++ b/static/confetti-doodles.svg @@ -0,0 +1 @@ + diff --git a/static/main.css b/static/main.css new file mode 100644 index 0000000..41381a9 --- /dev/null +++ b/static/main.css @@ -0,0 +1,139 @@ +:root { + --foreground-color: hsl(355, 26%, 21%); + --background-color: hsl(27, 45%, 91%); + --decorative-color: hsl(20, 43%, 84%); +} +body { + font-family: 'Alegreya', serif; + color: var(--foreground-color); + background-color: var(--background-color); + background-size: 20vw; + background-image: url('/static/confetti-doodles.svg'); +} + +a { + color: var(--foreground-color); + text-decoration-style: wavy; + text-decoration-color: var(--decorative-color); + text-underline-offset: 0.25rem; + transition: text-decoration-color 0.3s; + &:hover { + text-decoration-color: var(--foreground-color); + } +} + +.container { + width: 500px; + margin: 5rem auto; +} + +.header { + @media screen and (min-width: 786px) { + display: flex; + align-items: center; + gap: 3rem; + } + + .header-image { + width: 80px; + height: 80px; + border-radius: 50%; + filter: sepia(50%); + transition: filter 0.3s + } + + .header-image:hover { + filter: sepia(0) + } + + .header-text { + display: flex; + flex-direction: column; + line-height: 2; + + .header-title { + font-weight: 800; + font-size: 2rem; + } + + .header-desc { + font-size: 1.25rem; + } + } +} + +.badge { + padding: 0.35rem 0.5rem; + background-color: hsl(from var(--decorative-color) h s calc(l + 3)); + border-radius: 1rem; + display: inline-flex; + align-items: center; + gap: 0.25rem; + line-height: 1; + text-decoration: none; + font-size: 95%; + margin: 0 0.25rem; + transition: background 0.3; + img { + display: inline-block; + width: 1rem; + height: 1rem; + } + span { + display: inline-block; + } + &:hover { + background-color: var(--decorative-color); + } +} + +.prose-container { + font-size: 1.25rem; + line-height: 2; + width: 500px; + margin: 2rem auto; + &.small { + font-size: 1.15rem; + color: hsl(from var(--foreground-color) h calc(s - 10) calc(l + 30)); + } +} + +.linkbox { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.5rem 1rem; + + text-decoration: none; + border: 1px dashed hsl(from var(--foreground-color) h 15% 76%); + + &:hover { + border-style: solid; + } + + h4 { + font-weight: 800; + font-size: 1.1rem; + } + + p { + font-size: 1rem; + } + + img { + filter: sepia(50%); + width: 60px; + height: 60px; + } +} + +.linkline { + --gap: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: var(--gap); + li:not(:last-child):after { + margin-left: var(--gap); + content: "·" + } +} diff --git a/static/normalize.css b/static/normalize.css new file mode 100644 index 0000000..e710298 --- /dev/null +++ b/static/normalize.css @@ -0,0 +1,351 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} + + diff --git a/static/reset.css b/static/reset.css new file mode 100644 index 0000000..e29c0f5 --- /dev/null +++ b/static/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/static/weepinbell.png b/static/weepinbell.png new file mode 100644 index 0000000..a07342f Binary files /dev/null and b/static/weepinbell.png differ -- cgit v1.2.3