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

I used this thing to mess with the radio buttons, I hope it works right.

I still need a way to get the whole box to be in the header or a sidebar or something.

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, just look at this crap.

/* start with variables, make light default just because */
:root {
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg2: rgb(240, 241, 244);
    --bg1: rgb(220, 225, 238);
    --border1: rgb(150, 186, 219);
    --border2: rgb(0, 192, 0);
    /* I added in stuff from another file and didn't notice it was HSL instead of RGB. Oops! */
    --banner: hsl(165, 100%, 72%);
    --border3: hsl(39, 100%, 70%);

    --font-sans: Cantarell, 'Noto Sans', 'Open Sans', sans-serif; 
    /* I can never settle on a sans font */
    --font-serif: 'Source Serif 4', serif;
    --font-mono: 'Fira Code', monospace; 
    --font-script: 'calligraffitiregular', script;

    --percent1: 12.5%;
    --percent2: 25%; 

    --size: 32px; 
}

@media (prefers-color-scheme: dark) {
    :root {
      --ink: rgb(245, 244, 244);
      --paper: rgb(24, 20, 20);
      --bg1: rgb(20, 17, 17);
      --bg2: rgb(30, 28, 28);
      --border1: rgb(38, 38, 59);
      --border2: rgb(74, 139, 74);
      --banner: hsl(166, 100%, 6%);
      --border3: hsl(39, 74%, 72%);
    }
}

:root:has(#light:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 247, 248); 
    --bg2: rgb(240, 240, 248);
    --bg1: rgb(220, 226, 228); 
    --border1: rgb(155, 186, 219);
    --border2: rgb(0, 192, 0);
    --banner: hsl(165, 100%, 72%);
    --border3: hsl(39, 100%, 70%);
    /* this is just the default light scheme lol */
}

:root:has(#fire:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg1: rgb(255, 61, 47);
    --bg2: rgb(253, 116, 53);
    --border1: rgb(241, 173, 44);
    --border2: rgb(119, 207, 79);
}

:root:has(#sage:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg1: rgb(159, 197, 159);
    --bg2: rgb(192, 214, 194);
    --border1: rgb(191, 233, 182);
    --border2: rgb(39, 172, 94);
}

:root:has(#sky:checked) {
    color-scheme: light;
    --ink: rgb(20, 20, 20); 
    --paper: rgb(243, 243, 243); 
    --bg1: rgb(54, 131, 185);
    --bg2: rgb(153, 191, 224);
    --border1: rgb(108, 190, 253);
    --border2: rgb(24, 206, 78);
}

:root:has(#amethyst:checked) {
    color-scheme: dark; 
    --ink: rgb(245, 244, 244);
    --paper: rgb(22, 13, 22);
    --bg1: rgb(48, 22, 58);
    --bg2: rgb(80, 27, 95);
    --border1: rgb(120, 37, 156);
    --border2: rgb(74, 139, 74);
}

:root:has(#obsidian:checked) {
    color-scheme: dark; 
    --ink: rgb(245, 244, 244);
    --paper: rgb(24, 20, 20);
    --bg1: rgb(20, 17, 17);
    --bg2: rgb(30, 28, 28);
    --border1: rgb(38, 38, 59);
    --border2: rgb(74, 139, 74);
}

/* 
* I thought having about 7 color themes was high, but should be managable, with  a simple palette- 
* BUT looking at, I didn't factor in things like using color functions like color-mix()
* Perhaps using HSL instead of RGB (there's too many new ones) might be useful. 
*/

:root:has(#pa:checked) {
    --percent1: 12.5%;
    --percent2: 25%; 
}

:root:has(#pb:checked) {
    --percent1: 6.25%;
    --percent2: 12.5%; 
}

:root:has(#pc:checked) {
    --percent1: 3%;
    --percent2: 6.25%; 
}

/* Here is where it needs a programmatic solution like JS/TS, not typing all this crap out manually */

:root:has(#size8:checked) {
    --size: 8px;
}

:root:has(#size16:checked) {
    --size: 16px;
}

:root:has(#size32:checked) {
    --size: 32px;
}

:root:has(#size48:checked) {
    --size: 48px;
}

:root:has(#size64:checked) {
    --size: 64px;
}

:root:has(#size98:checked) {
    --size: 98px;
}

/* 
 * That was absurd! All those lines of code just to iterate over some variables! 
 * Instead of stealing that code, go find some that's better. 
*/

Here's the different patterns.

.checkers {
    background-image: 
        linear-gradient(90deg, var(--bg2) 50%, transparent 50%), 
        linear-gradient(var(--bg2) 50%, transparent 50%);
    background-size: var(--size) var(--size);
}
/*
So yes I liked that one at a certain size and didn't want to fool around with adding the size controls, 
even if all I had to do is copypaste. 
But now I worry about being inconsistent with design. 
*/
.checkersmall {
    background-image: 
        linear-gradient(90deg, var(--bg2) 50%, transparent 50%), 
        linear-gradient(var(--bg2) 50%, transparent 50%);
    background-size: 8px 8px;
}

.kaleido {
    background-image: 
        repeating-conic-gradient(var(--bg1) 0 var(--percent1), var(--bg2) 0 var(--percent2));
    background-size: var(--size) var(--size);
}

/* The others I made playing around with tutorials but this one I yanked from css-pattern.com to edit */
.stars {
    --d: calc(var(--size)/10);  /* control the gap between stars */
    --_g: var(--bg2) 36deg, #0000 0;
    background:
      conic-gradient(from 162deg at calc(var(--size) * .5)  calc(var(--size) * .68), var(--_g)),
      conic-gradient(from 18deg  at calc(var(--size) * .19) calc(var(--size) * .59), var(--_g)),
      conic-gradient(from 306deg at calc(var(--size) * .81) calc(var(--size) * .59), var(--_g)),
      var(--bg1);
    background-position: 0 calc(var(--size) * 0.35);
    background-size: calc(var(--size) + var(--d)) calc(var(--size) + var(--d));
}

/* I finally used my art brain and noticed the light theme doesn't match the lighting direction of the rest. */

.cubes {
    background:
        repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--bg2) 0 50%) calc(var(--size)/2) calc(var(--size)*tan(30deg)/2),
        repeating-conic-gradient(from 30deg,var(--bg1) 0 60deg,var(--border1) 0 120deg,var(--bg2) 0 50%);
    background-size: var(--size) calc(var(--size)*tan(30deg));
}
        

Basic stuff

I keep it simple for the html and body, though honestly I'm never sure where to put the font stuff. I always reset the font size there though, I HATE tiny 8 pixel fonts so always reset to 1 rem on HTML and then will keep that in the body or even for desktop bump it up in paragraphs to 1.1em or 1.2em. I do use EM as sizing in places but I've been trying to limit it to areas around text like having a 1em margin around a paragraph. I know pixels aren't prefect but for borders and spacing boxes it's less fragile.

Speaking of not noticing a difference, I did throw in the border-sizing BUT only because most of the pages aren't too complex. I haven't noticed any delay from using it, so it felt safer to just include by default and worry about nitpicking later.

I'm also not sure about removing the body margin, at times it seems easier to leave it so mobile has a bit of room, so it's one of the extra fiddly steps.

html {
    color: var(--ink);
    font-size: 1rem;
    font-family: var(--font-sans);
    line-height: 1.5; 
    color-scheme: dark light;
    box-sizing: border-box;
}
*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    background-color: var(--bg1);
    margin: 0; 
}
        

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.

            
/* Here's just plain vanilla put it in the middle with modern options */
.center-inline {
    width: min(70em, 100%);
    margin-inline: auto;
}

/* to make a sidebar */
.center-cols {
    width: min(70em, 100%);
    margin-inline: auto;
    
    @container main (width > 66em) {
        display: grid;
        gap: 1em;
        grid-template-columns: 1fr 3fr;
    }
}

/* SO I want a capsule with half image half text that's about 1024+padding wide and will collapse at smaller sizes */
.capsule {
    border-top: var(--border1) 4px dotted; 
    
    @container main (width > 66em) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1em;
    }
}
            
        

Using flexbox or grid is possible, and simple, 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.

Images and basic stuff

article {
    background-color: var(--paper);
    padding: 1em;
}

aside {
    padding: 0 1em;
    border-right: var(--border1) 4px dotted; 
}

code {
    font-family: var(--font-mono);
    font-size: inherit;
}

h1, 
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
    text-wrap: balance; 
}

ol, 
ul {
    padding: 0.5em;
    list-style-position: inside;
}

p {
    font-variant-numeric: oldstyle-nums; /* kind of iffy about this */
    max-width: 60em; /* not needed all the time but I'll leave it regardless */
    text-wrap: pretty;
}

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.

Autocount

I just used the basic tutorial here, I'm not sure how often it might be used, but at least you skip having to make a numbered list so you can use any tags you like and still get the numbers to magically appear. Yes I know the example is using an unordered list which is weird but whatever.

.autocount {
    counter-reset: autocounter;
}

.biglink {
    counter-increment: autocounter;
}

.biglink::before {
    content: counter(autocounter);
    padding-right: .5em;
}