theming and art

did a bit more work on the site! it’s now got

green and yellow era

my profile picture was purple and blue on cohost and while i did like it i think it would have been a bit too rich and heavy for the vibe i was going for here. for the main colour i’ve chosen a kind of cool green which is one of my favourite colours. for the secondary colour, i’ve chosen yellow, a colour that i’ve found looks great on me, and i really liked seeing the yellow underlines on Stéphanie Walter’s site. i’m hoping it still works with the more muted yellows i’ve chosen here.

tangentially, if you’re ever curious about your perception of what counts as blue or green compared to other people, i found ismy.blue to be neat. apparently html turquoise (hue 175) is roughly where most people put the boundary, and the nominal boundary is html cyan (hue 180). i end putting it at around hue 169, greener than allegedly than 77% of people.

dark theme implementation notes

it turns out it’s fairly simple nowadays to implement an automatic dark mode just with css using css variables and media queries!

:root {
	--text: black;
	--background: white;
}

@media (prefers-color-scheme: dark) {
	:root {
		--text: white;
		--background: black;
	}
}

html,
body {
	background: var(--background);
	color: var(--text);
}

dark reader

however one problem is that it’s not always detectable by dark reader and the colours might get mangled by the extension. luckily you can tell the extension that you’re handling the dark theme just fine by including this in your html head

<meta name="darkreader-lock" />

indicating external links

matching by attributes is cool! the[href*="//"] matches any link with a “//” in it, which means it’ll match any full link because those need to start with “http://” or “https://”. it won’t match any relative links, like “/posts”. the :not part catches any full link that is going to this site.

i’m using the svg version of this icon from font awesome. i could have used a unicode character like “⤴” instead but i didn’t

you can recolour the svg using a combination of mask-image and background-color, which is kind of cool. mask-image still a new-ish feature but given this is just a fun little icon i figure it’s okay if this breaks

a[href*="//"]:not([href*="ant.computer"])::after
{
	display: inline-block;
	content: "";
	mask-image: url("fa/arrow-up-right-from-square.svg");
	background-color: var(--link);
}

favicons more like fafficons

to be fair this is my fault for wanting a pixelated favicon. if you are more competent than me and also just want a regular non-pixelated icon, you can just do the bolded steps

  1. use real favicon generator dot net
  2. download the zip
  3. extract the zip in the wrong place
  4. clean up the mess and extract in the right place
  5. find that the scaling messed with some of the pixels
  6. edit every png
  7. extract the images from the .ico with icotool -x favicon.ico
  8. edit each of those images
  9. repack into an .ico with icotool -c [list of image paths] -o favicon.ico
  10. sort of just trust that the svg worked out okay because you’re tired and kind of doubt that anyone will want to pin this site on an iphone anyway
  11. link the favicons in your html head with the code they give you
  12. (optional) check using their favicon checker

the usual anxieties

as i run out of things to tinker with on the site i am left with the dread of figuring out what, if anything, i have to post here. the looming weight of that one meme about blogs that only have posts titled “migrating from [x blogging framework] to [y blogging framework]” hangs over me. i don’t wanna be that person… even though as i think about it, what’s so bad about being that person? sure, it can be kind of boring as a reader, but idk if it’s worth being so caught up in making sure that i’m not being boring to someone out there that i prevent myself from having fun making a website

to counteract my anxiety i remind myself:

  1. post hog
  2. who cares if i’m not posting if i’m trying to get out there and live my life and have experiences[1]. maybe even those experiences will plant a seed for a post but there’s more out there than posting

footnotes

  1. i kind of hate the way that this phrase has been co-opted by people doing things like denying covid and judging disabled people. this footnote is here to clarify that like, watching the birds in the tree outside your bedroom window can count as an experience. or eating a really spicy noodle soup. or finding a tiny, shriveled piece of corn under the refrigerator ↩︎