posted

website thoughts

i promised myself to limit the number of posts about the website. something something health of a platform inversely correlated with posts about said platform. part truth part superstition

but there were still a bunch of thoughts i wanted to get out of the way so uh here they are

dotted grid background

spent a while making the post background have a dotted square pattern like in the hobonichi techo. i’ve never even owned one of these notebooks, but i used this pattern as a background on my digital notebook and i’m a convert from dot grid now.

making the background was pretty fun, though it took me a while to figure out how to get the dasharray juuuuust right so that you get that beautiful cross at the corners of the squares

the hard part is making all the elements actually align to the grid. luckily, i found out that someone else had already done the hard work of figuring out how it worked when they made the monospace web a couple of months ago.

here’s some implementation details:

  • CSS round came around in May 2024, and that allows me to control the width of the post so that none of the squares get cut off
    • unfortunately this doesn’t work when mixing types, so you can’t round e.g. height: auto. this is probably why the monospace web uses javascript to make images and video fit neatly. on their writeup they mention that it could be possible to do this purely in CSS if we know the image’s ratio and width
  • lh is a new CSS unit that equal to the line-height. (the monospace web doesn’t use this, possibly because caniuse reports <90% availability. they use CSS variables and calc)
  • line-height is weird. one problem i got was that reducing the font size for some elements (e.g. superscript), increased the actual height. completely counterintuitive!! it’s solved by using a unitless line-height e.g. line-height: 1 rather than line-height: 28px.
  • the text didn’t actually sit on the line so i had to nudge everything down a bit. this meant that things that should be on the line (like horizontal rules) came off the line and i had to readjust. this was extremely messy
  • horizontal rules have two spaces above and one space below, to account for how the text is bottom-heavy. i love when something that looks more even is actually more uneven mathematically.

it was a bit of a challenge to implement and i hope it strikes the right balance between whimsy and legibility… i’m pretty happy with it, even if sometimes it sorta looks more like a craft cutting board than a paper notebook

crispy pixel buttons

delighted to discover 88×31px button walls and started my own. (send me buttons!)

less delighted to discover that my screen uses non-fractional scaling, so even image-rendering: pixelated doesn’t work to make these beautifully pixelly

so i added the first bit of javascript to this site to resize these buttons so they’ll always be pixelly

const ratio = window.devicePixelRatio || 1;
const width = (88 / ratio) * Math.round(ratio);
const height = (31 / ratio) * Math.round(ratio);

const style = document.createElement("style");
style.textContent = `
	img.button-88-31 {
		width: ${width}px;
		height: ${height}px;
	}
`;

document.head.appendChild(style);

i am trying to use less javascript here. there’s ideological reasons to reduce js, but honestly part of it is that pure html/css criming is a fun challenge

but some things have just gotta be js

apparently media queries aren’t just a css thing?

you can use them for light/dark stylesheets

<link rel="stylesheet" href="/style-light.css" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="/style-dark.css" media="(prefers-color-scheme: dark)">

and for light/dark versions of images (inspired by this technique used for prefers-reduced-motion).

<picture>
	<source srcset="/dark-pic.png" media="(prefers-color-scheme: dark)">
	<img alt="alt text" src="/light-pic.png">
</picture>

speaking of light/dark mode though, i’ve seen a lot of (neocities) sites with a manual light/dark toggle on their sites. i can’t figure out if this would be useful in addition to using the system setting…

drafts

it’s my emotional support drafts page

— me (cohost 2022, banger post that was not recognised in its time)

i implemented drafts!! and now i have twice as many posts in drafts as on the site proper. though after this gets posted i’ll be able to delete a bunch

i’m using eleventy and uh for a reason i forgot i decided not to use their base-blog starter project so it’s all a bit of (a lot of) a hack job

work in progress

oh **** it’s terrifying to be working on this in real time when like, anyone can see? mortifying ordeal of being known and all that

like it feels like im inviting people in without having cleaned up?? and then i have to take a deep breath and remind myself that the mess is also me. and im choosing to be me.

ALL RIGHT

that’s it thanks for reading/skimming i hope you have a great day