mirror of
https://github.com/osmarks/website
synced 2025-05-09 10:54:08 +00:00
new style
This commit is contained in:
parent
2cd0718a70
commit
a4e2f37ba4
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 |
@ -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
12
src/dither.sh
Executable 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"
|
@ -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",
|
||||
|
46
src/index.js
46
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 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
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -1,4 +1,4 @@
|
||||
div.autocol(style=hashBG("microblog", i, 300))
|
||||
.box
|
||||
div
|
||||
a.title(href=permalink)= renderDate(date)
|
||||
div!= content
|
||||
div!= content
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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"
|
||||
|
@ -1,4 +1,4 @@
|
||||
div.autocol(style=hashBG("remoteFeedEntry", i, 30))
|
||||
.box
|
||||
div
|
||||
a.title(href=link)= title
|
||||
div.deemph
|
||||
|
Loading…
x
Reference in New Issue
Block a user