Code for possible fun and doubtful profit

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

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. Note that here I'm keeping in mind my /p/ tag has a max-width and there's a margin inside each /article/ to add in.

            
.center-margin {
    margin: 0 auto;
    max-width: 70em;
}

.center-inline {
    width: min(70em, 100%);
    margin-inline: auto;
}
            
        

Using flexbox or grid is possible, BUT! it applies to items inside, not the box itself, so like here I have the header at 100% width of the page just because. Put "center-grid" on the /main/ and it just sits on the left side. Put it on /body/ and we shrink the /header/ as well. Wrapping /main/ in a /div/ puts us on the path to div soup. Of course, if you are using grid, then you could put the header as a sidebar when the page is over 800px or whatever. I have several test pages like that, experimenting with sticky positioning etc. so I'm saving grid positioning for when I use it all over.

Misc

One of the first sites I used for inspiration was CSS zen garden and I even had the book back in like 2010. It planted the idea of HTML and CSS being flexible even before "responsive" was a thing. I think. It all blurs together now.

Speaking of clarity, fonts need to be clear and legible. For the code I went with Fira Code, though I like Oxygen Mono and Source Sans Code also. For the body text, a basic bitch sans serif that's legible is good enough, and Noto Sans should cover everything. It is tempting to stay simple and keep all in the same family for mono, sans, and serif, though. For serif, since that's more decorative here, can be a little more creative. Source is a good family overall, but can we get zestier?

It took some work to find fonts that I can self host (at least, throw in here) with license but Calligraffiti works. It's script that is legible and "grown up" enough without being too formal. I like "rock salt" also but it's a little too messy to be easily legible.