1
0
mirror of https://github.com/osmarks/website synced 2025-05-09 10:54:08 +00:00

new style

This commit is contained in:
osmarks 2025-04-12 19:22:39 +01:00
parent 2cd0718a70
commit a4e2f37ba4
13 changed files with 55 additions and 74 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 2.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

View File

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

12
src/dither.sh Executable file
View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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