Code for possible fun and doubtful profit

Basic stuff

I wanted to make some notes on what I did but I keep changing things, plus I'm not good at keeping notes for myself, much less anyone else lol.

So if you don't know, if you're on laptop/desktop F12 opens the web developer console, and CTRL+U open the source code of the page in a new tab. There you can click on the CSS link at top and see the CSS used in a page.

Toggle colors and stuff!

Dark theme toggle I started with, and then this other one was useful. I used some of the "safe rules" like desaturated colors instead of pure black/white. I tested having light and dark modes apart from the main palettes but certain ones just worked better either way so I combined light/dark into each. There was just too much contrast with some of them, had a glare. Honestly to be practical there should be 4 at most, but I was aiming for ROYGBIV plus white and black. Note that yellow can be hard to work with, a yellow that isn't fully saturated just looks dingy and dirty.

For the patterns, the squares came from one on here like a decade ago and evolved into that. For the stars I just took this since there's math. And from there also cubes looked good. The main page is based on an example here

If I was being serious I'd have a custom settings page that would work all over the site.

If you're thinking about this, I'd say look at cleaner ways to do the palette. I ended up duplicating the light and dark default themes which is too annoying to do in a fresh project. In fact, although this seems clever at first, and is useful for two or three items, it gets out of hand fast!

This is part of why I was changing the colors from RGB to HSL, to use calc() and other functions in 2020's CSS to automagically and programatically offer options.

Of course we have to worry about choice paralysis. I tested using the color picker on this page but it's kind of a mess to have as default. Also there's ways to use sliders but I'm not sure about that.

Centering shenanigans

You can't beat old "margin zero auto" to center things 100% of the time, no worries about wrappers or boxes, just THIS THING will be in the center. Other stuff may be broken on IE6 or whatever, but it's in the middle gosh darn it. And all you have to do is slap "center-margin" on the /main/. If you want something newer, or don't want the margin to be zero, there's "margin-inline" which is in all major browsers since 2021.

Using flexbox or grid is possible, BUT! it applies to items inside, not the box itself, so you'd need to set the class on the body, or have a wrapper div like oldskool has forever.

Images

Another thing where the defaults are mediocre, but at least it's simple to fix.

img, 
picture, 
svg, 
video {
    /* display: block; */
    max-width: 100%;
    object-fit: contain;
    aspect-ratio: 1;
}
            

I had it as a block level element for a reason I have forgotten, it works fine standalone but it breaks text-align which I was being lazy and using to center everything.

Object-fit is handy, and I had it as cover at first, BUT I found on mobile the image is clipped. You'll just have to test for yourself.

Fonts!

Very important on a personal site. For the main body text i decided sans serif would work best, and the Noto family is good, even if I don't expect to use odd characters. For monospace I went with Fira Code to start, I've been using it in command line. For serif, Source. However, I like the other fonts in the Source family and choice #2 is to simply use Source family for all of them. That would be harmonious but hardly quirky. On top of that I want to self host, more private and practical. Dig through here to start. In fact it's a good time to also make some css for list styling.

• amusing for X Files
• Anonymous, maybe
• Atomic Age, nice retro
• Baloo, maybe too soft
• Calligraffiti, nice.
• Henry Morgan Hand is perfect for any pirate themed site.
• Hornswoggled has character but a little too kiddie
• Libre Baskerville and Caslon are both good dignified choices

It took some work to find ones that I can self host with license but Calligraffiti works. It's script that is legible and "grown up" enough. I like "rock salt" also but it's a little too messy. That seems to be a problem with handwriting fonts, but then my handwriting is terrible so I can't talk.