diff --git a/assets/images/f380b.png.original b/assets/images/f380b.png.original index aac212d..1a9f975 100644 Binary files a/assets/images/f380b.png.original and b/assets/images/f380b.png.original differ diff --git a/assets/images/memesae.png.original b/assets/images/memesae.png.original index f4ad84f..f14e81b 100644 Binary files a/assets/images/memesae.png.original and b/assets/images/memesae.png.original differ diff --git a/assets/images/minoteaur.png.original b/assets/images/minoteaur.png.original index ec50f82..fe930aa 100644 Binary files a/assets/images/minoteaur.png.original and b/assets/images/minoteaur.png.original differ diff --git a/src/avif_compact.sh b/src/avif_compact.sh deleted file mode 100755 index 5f36af1..0000000 --- a/src/avif_compact.sh +++ /dev/null @@ -1,5 +0,0 @@ -#!/bin/sh -file=$(mktemp /tmp/tmp.XXXXXXXXXX.png) -convert "$1" -resize 25% "$file" -avifenc -s 0 -q 50 "$file" $2 -rm "$file" \ No newline at end of file diff --git a/src/dither.sh b/src/dither.sh new file mode 100755 index 0000000..613ac4f --- /dev/null +++ b/src/dither.sh @@ -0,0 +1,12 @@ +#!/bin/sh +tmp1=$(mktemp /tmp/tmp.XXXXXXXXXX.png) +tmp2=$(mktemp /tmp/tmp.XXXXXXXXXX.png) +tmp3=$(mktemp /tmp/tmp.XXXXXXXXXX.png) +convert "$2" -resize "$1" "$tmp1" +#dither "$file" "$3" -c 12e193 +dither "$tmp1" "$tmp2" -c B2D2FF +convert "$tmp2" -transparent black "$tmp3" +pngquant --force --strip --speed 1 "$tmp3" -o "$3" +rm "$tmp1" +rm "$tmp2" +rm "$tmp3" diff --git a/src/global.json b/src/global.json index c85ff66..1919fac 100644 --- a/src/global.json +++ b/src/global.json @@ -26,7 +26,8 @@ "All processes that are stable we shall predict. All processes that are unstable we shall control.", "This website doesn't exist. This is a Boltzmann website.", "Paperclip rights are human rights.", - "Humans aren't even AGI." + "Humans aren't even AGI.", + "The goal is whatever the outcome is. It'll be decided retroactively." ], "feeds": { "In the Pipeline": "https://www.science.org/blogs/pipeline/feed", diff --git a/src/index.js b/src/index.js index e092e4f..80e1744 100644 --- a/src/index.js +++ b/src/index.js @@ -64,39 +64,6 @@ globalData.buildID = buildID const randomPick = xs => xs[Math.floor(Math.random() * xs.length)] globalData.siteDescription = randomPick(globalData.taglines) -const hexPad = x => Math.round(x).toString(16).padStart(2, "0") -function hslToRgb(h, s, l) { - var r, g, b; - - if (s == 0) { - r = g = b = l; // achromatic - } else { - function hue2rgb(p, q, t) { - if (t < 0) t += 1; - if (t > 1) t -= 1; - if (t < 1/6) return p + (q - p) * 6 * t; - if (t < 1/2) return q; - if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; - return p; - } - - var q = l < 0.5 ? l * (1 + s) : l + s - l * s; - var p = 2 * l - q; - - r = hue2rgb(p, q, h + 1/3); - g = hue2rgb(p, q, h); - b = hue2rgb(p, q, h - 1/3); - } - - return `#${hexPad(r * 255)}${hexPad(g * 255)}${hexPad(b * 255)}` -} -const hashBG = (cls, i, hue) => { - const buf = crypto.createHash("md5").update(cls).digest() - const base = buf[0] + 256 * buf[1] - return `background: ${hslToRgb(hue / 360, 0.85, 0.65)}; background: hsl(${hue}deg, var(--autocol-saturation), var(--autocol-lightness)); border: 4px solid black; border-color: hsl(${hue}deg, 80%, var(--autocol-border))` -} -globalData.hashBG = hashBG - const links = {} // Retrieve cached (automatically fetched, but version-controlled) link metadata @@ -219,7 +186,7 @@ const renderContainer = (tokens, idx) => { } return out } else if (blockType === "emphasis") { - return `
` + return `
` } } else { if (blockType === "captioned") { @@ -710,7 +677,7 @@ const doImages = async () => { const destFilename = stripped + ext const destPath = path.join(outAssets, "images", destFilename) if (!bytes) { - console.log(chalk.keyword("orange")(`Compressing image ${stripped} (${name})`)) + console.log(chalk.keyword("orange")(`Processing image ${stripped} (${name})`)) await util.promisify(childProcess.execFile)(cmd, supplementaryArgs.concat([ fullPath, destPath @@ -722,13 +689,8 @@ const doImages = async () => { return "/assets/images/" + destFilename } - const avif = await writeFormat("avif", ".avif", "avifenc", ["-s", "0", "-q", "20"], " 2x") - const avifc = await writeFormat("avif-compact", ".c.avif", path.join(srcDir, "avif_compact.sh"), []) - const jpeg = await writeFormat("jpeg-scaled", ".jpg", "convert", ["-resize", "25%", "-format", "jpeg"]) - globalData.images[stripped] = [ - ["image/avif", `${avifc}, ${avif} 2x`], - ["_fallback", jpeg] - ] + const dither = await writeFormat("dither-png-small", ".png", path.join(srcDir, "dither.sh"), ["128x128"]) + globalData.images[stripped] = dither } else { globalData.images[image.split(".").slice(0, -1).join(".")] = "/assets/images/" + image } diff --git a/src/style.sass b/src/style.sass index e05154b..941b5df 100644 --- a/src/style.sass +++ b/src/style.sass @@ -7,9 +7,12 @@ $navbar-width: 20rem box-sizing: border-box :root - --autocol-lightness: 65% - --autocol-saturation: 85% - --autocol-border: 0% + --box-bg: #d0faab + --box-border: black + // xkcd bluegreen + --link: #017a79 + // xkcd dark blue green + --visited-link: #005249 --block-lightness: 85% --overlay-opacity: 0.8 @@ -64,6 +67,9 @@ pre, code, .deemph a text-decoration: none + color: var(--link) + &:visited + color: var(--visited-link) .blog-post a, .sidenotes a text-decoration: underline @@ -98,6 +104,9 @@ nav a margin-left: 0.5em + .nav-a + color: #6dedfd + h1, h2, h3, h4, h5, h6 margin: 0 font-weight: 600 @@ -135,8 +144,6 @@ main > div min-width: 20em - background: #eee - padding: 12px flex: 1 1 20% .microblog > div @@ -185,6 +192,8 @@ button, select, input, textarea, .textarea height: 8em width: 8em margin-bottom: auto + background: black + aspect-ratio: 1/1 .caption background: lightgray @@ -308,18 +317,16 @@ $hl-border: 3px .achievement color: black - a - color: lightblue - &:visited - color: #e17701 - .caption background: #333 :root - --autocol-lightness: 10% - --autocol-saturation: 50% - --autocol-border: 35% + --box-bg: #001009 + --box-border: #004020 + // bright teal + --link: #01f9c6 + // aqua green + --visited-link: #12e193 --block-lightness: 20% --overlay-opacity: 0.5 @@ -333,6 +340,10 @@ $hl-border: 3px background: #333 color: white + .imbox + img, picture + background: transparent + .sidenotes img, .footnotes img width: 100% max-width: 15em @@ -424,8 +435,13 @@ table .description font-style: italic -.autocol +.box margin: 4px + border: 4px solid black + border-color: var(--box-border) + background: #b1d1fc + background: var(--box-bg) + padding: 12px .title font-size: 1.1em font-family: $headers @@ -469,11 +485,6 @@ textarea.squiggle text-wrap: wrap .ref - border: 4px solid black - border-color: hsl(300deg, 80%, var(--autocol-border)) - background: #f2a65a - background: hsl(30deg, var(--autocol-saturation), var(--autocol-lightness)) - padding: 12px .excerpt font-size: 0.9em font-style: italic diff --git a/templates/activitypub.pug b/templates/activitypub.pug index 2185fe0..2987c12 100644 --- a/templates/activitypub.pug +++ b/templates/activitypub.pug @@ -1,4 +1,4 @@ -div.autocol(style=hashBG("microblog", i, 300)) +.box div a.title(href=permalink)= renderDate(date) - div!= content \ No newline at end of file + div!= content diff --git a/templates/blogPost.pug b/templates/blogPost.pug index 74b780a..703eb22 100644 --- a/templates/blogPost.pug +++ b/templates/blogPost.pug @@ -7,7 +7,7 @@ block content h2 See also div each ref in references - div.autocol.ref + div.box.ref a.title(href=ref.url)= ref.title div.deemph if ref.author diff --git a/templates/index.pug b/templates/index.pug index da62b80..b1edb6f 100644 --- a/templates/index.pug +++ b/templates/index.pug @@ -7,7 +7,7 @@ block content Read my opinions via the internet. div.blog each post, i in posts - .autocol.imbox(style=hashBG("blog", i, 180)) + .box.imbox if images.hasOwnProperty(post.slug) +image(images[post.slug]) div @@ -28,7 +28,7 @@ block content Various web projects I have put together over many years. Made with at least four different JS frameworks. Some of them are bad. div.experiments each experiment, i in experiments - .autocol.imbox(style=hashBG("experiments", i, 120)) + .box.imbox if images.hasOwnProperty(experiment.slug) +image(images[experiment.slug]) div diff --git a/templates/layout.pug b/templates/layout.pug index a4387ae..69e9317 100644 --- a/templates/layout.pug +++ b/templates/layout.pug @@ -1,5 +1,5 @@ mixin nav-item(url, name, color) - a(href=url, style=`color: ${color}`)= name + " " + a.nav-a(href=url)= name + " " mixin image(src) if typeof src === "string" diff --git a/templates/remoteFeedEntry.pug b/templates/remoteFeedEntry.pug index 75dae6c..19faf6a 100644 --- a/templates/remoteFeedEntry.pug +++ b/templates/remoteFeedEntry.pug @@ -1,4 +1,4 @@ -div.autocol(style=hashBG("remoteFeedEntry", i, 30)) +.box div a.title(href=link)= title div.deemph