What are Tiny Pages?

In the last few posts I've alluded to something I am calling Tiny Pages. This is a loaded term that means a lot to me but may not to others beyond the inherent meaning of the individual words. For a while, I've been wanting to develop my own CSS base set of styles. A minimal set of starting blocks that every site and project I work on can use. I got a taste for this first on weblog, and then when adding bits of weblog's base to my other similar properties (my Profile and /now pages, my Microblog, Statuslog, and Domain landing).

A large refactor of weblog's base (and component) styles should include this new base, and use many of the new modern CSS tools we have now to work with, including CSS cascade layers. In order to get up-to-speed on many of the new tools, some which I've only read about, others I've used but not done a deep dive, I want to create individual case studies for each tool or set of tools. These will be done on tiny pages themselves but work to create a Tiny Pages base, so-called because I am aiming for a small footprint.

I want this Tiny Pages base to stand on its own and look and feel okay without any further styles. The idea here came from what I did on the WeblogPoMo 2024 landing page. I used what I learned while deep diving color-scheme and system colors to put together a landing page with very few styles that will still perform in a light or dark color mode, system or user preference. This was a good start and I had a lot of fun doing it, as well as learning about it and writing the blog post covering what I learned.

Shortly after publishing that post I had a brain worm (sort of like an ear worm, but an idea, not a sound) to add "tints" to system colors to achieve cohesion with a theme. On themes.lol Styles I had begun working with form controls and CSS accent-color and came across a discussion on Mastodon between @sarajw and @mia about using CSS color-mix() function with system colors. All of a sudden my brain worm turned into reality and I achieved that "tint" I had envisioned. You can see this on the bottom of Style pages in the form input[type="text"], select, and textarea.

input[type="text"] {
  accent-color: var(--link);
  background-color: color-mix(in srgb, Field, var(--highlight) 35%);
  ...
}

The last two images show a range input using CSS accent-color which adds a theme color to the bottom/selected portion of the range input. This is also applied to the text input, which isn't actually listed as supporting accent-color but in Firefox is used as the border/outline "focus" color, and contrasts with the "tinted" background color using color-mix() with the Field system color and another contrasting theme color. This now sits squarely in my brain waiting for further theme development using color-mix() and system colors.

What's next? My next deep dive will be on the new color spaces and functions. I know there is a lot to cover so it will span a few posts. I'd like to go into color-mix() more first, to complement what I've done with it and system colors on the form elements, and then other functions before starting into the new color spaces. I know this is a huge topic and probably deserves its own series, so I expect my next post on the topic may be more of a roadmap of how I plan to dive into it. I also need to finish setting up my Tiny Pages site, so that may or may not come first.

Post info

Links in this post:

POSSE copies:

Share this post on social media.

Discuss on Mastodon

Tiny pages and not-so-tiny pages.

This is the first post for WeblogPoMo2024! This is not the post I intended to be the first of the month, but, hey, as I said in the information post: life happens! In my case, last Friday, when this post was supposed to go out, a tree fell on my garage and I've spent the last five days playing catch-up. As I get things back on track, my tiny pages/CSS experiments will be coming, but a few other in-progress posts will take up the next couple days.