new style

src/avif_compact.sh

@@ -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"

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"

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",

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 `<div class="emphasis" style="${md.utils.escapeHtml(hashBG("blog", 0, 180))}">`
+            return `<div class="emphasis box">`
         }
     } 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 dither = await writeFormat("dither-png-small", ".png", path.join(srcDir, "dither.sh"), ["128x128"])
-                const avifc = await writeFormat("avif-compact", ".c.avif", path.join(srcDir, "avif_compact.sh"), [])
+                globalData.images[stripped] = dither
-                const jpeg = await writeFormat("jpeg-scaled", ".jpg", "convert", ["-resize", "25%", "-format", "jpeg"])
-                globalData.images[stripped] = [
-                    ["image/avif", `${avifc}, ${avif} 2x`],
-                    ["_fallback", jpeg]
-                ]
             } else {
                 globalData.images[image.split(".").slice(0, -1).join(".")] = "/assets/images/" + image
             }

src/style.sass

@@ -7,9 +7,12 @@ $navbar-width: 20rem
     box-sizing: border-box
 
 :root
-    --autocol-lightness: 65%
+    --box-bg: #d0faab
-    --autocol-saturation: 85%
+    --box-border: black
-    --autocol-border: 0%
+    // 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%
+        --box-bg: #001009
-        --autocol-saturation: 50%
+        --box-border: #004020
-        --autocol-border: 35%
+        // 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

templates/activitypub.pug

@@ -1,4 +1,4 @@
-div.autocol(style=hashBG("microblog", i, 300))
+.box
     div
         a.title(href=permalink)= renderDate(date)
-    div!= content
+    div!= content

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

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

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"

templates/remoteFeedEntry.pug

@@ -1,4 +1,4 @@
-div.autocol(style=hashBG("remoteFeedEntry", i, 30))
+.box
     div
         a.title(href=link)= title
     div.deemph