From 44da246fa5e373c86373889b53263f52af84d525 Mon Sep 17 00:00:00 2001 From: Bill Date: Sat, 31 Dec 2022 14:23:20 -0500 Subject: Major overhaul, markdowns + copyright notice --- mds/blog/blog-index.md | 2 + mds/blog/css-themes-exist.md | 78 ++++++++++++++++++++ mds/blog/mastodon-and-twitter.md | 43 +++++++++++ mds/rss-a-follow-up.md | 108 +++++++++++++++++++++++++++ mds/wishlist.md | 3 +- new-blog.sh | 24 ------ templates/blog-footer.html | 6 ++ templates/page-footer.html | 6 ++ templates/rss-header.xml | 21 ++++++ www/blog/2019-01-21/index.html | 6 ++ www/blog/2019-02-17/index.html | 6 ++ www/blog/2019-12-09/index.html | 6 ++ www/blog/2020-01-13/index.html | 6 ++ www/blog/2020-12-17/index.html | 6 ++ www/blog/2021-01-05/index.html | 6 ++ www/blog/2022-11-06/index.html | 6 ++ www/blog/2022-12-05/index.html | 143 +++++++++++++++++++++++++++++++++++ www/blog/bread/index.css | 11 --- www/blog/bread/index.html | 20 +++-- www/blog/index.html | 9 +++ www/blog/movies/index.html | 6 ++ www/dice/index.html | 7 ++ www/error.html | 22 +++++- www/index.css | 83 ++++++++++++++++++--- www/index.html | 42 ++++++++--- www/resume/index.html | 28 ------- www/wc3.html | 156 --------------------------------------- www/wishlist.html | 23 ++++-- 28 files changed, 628 insertions(+), 255 deletions(-) create mode 100644 mds/blog/css-themes-exist.md create mode 100644 mds/blog/mastodon-and-twitter.md create mode 100644 mds/rss-a-follow-up.md delete mode 100755 new-blog.sh create mode 100644 templates/rss-header.xml create mode 100644 www/blog/2022-12-05/index.html delete mode 100644 www/blog/bread/index.css delete mode 100644 www/resume/index.html delete mode 100644 www/wc3.html diff --git a/mds/blog/blog-index.md b/mds/blog/blog-index.md index 9691e42..44b9008 100644 --- a/mds/blog/blog-index.md +++ b/mds/blog/blog-index.md @@ -2,6 +2,8 @@ # Blog Index +1. [2022-12-05 - CSS Themes Exist Now!?](/blog/2022-12-05/) +1. [2022-12-05 - # CSS Themes Exist Now!?](/blog/2022-12-05/) 1. [2022-11-06 - My Markdown -> HTML Setup](/blog/2022-11-06/) 1. [2021-01-05 - Manjaro Followup - Breaking things!](/blog/2021-01-05/) 1. [2020-12-17 - Manjaro Experiment](/blog/2020-12-17/) diff --git a/mds/blog/css-themes-exist.md b/mds/blog/css-themes-exist.md new file mode 100644 index 0000000..263db13 --- /dev/null +++ b/mds/blog/css-themes-exist.md @@ -0,0 +1,78 @@ +## CSS Themes Exist Now!? + +Yeah news to me too! Seems like according to [the MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility) +it's been supported since 2019 for most browsers and supported by all by now. + +This is so wild! + +### Why is this cool? + +Well you may have noticed this is in dark mode now (if you set your preferences to dark in your OS/Browser). +But this is cool because it means we're no longer restricted to using Javascript and custom preferences for websites. + +I had assumed this existed because sites like GitHub were defaulting to darkmode despite me never setting anything in like my profile settings. But I just assumed based off of my legacy knowledge this was some custom render trick using javascript. + +#### Still no JS! + +I keep this blog JS free! While not all pages under the senders.io umbrella are javascript free - everything in www.senders.io (this blog) will always be. + +I try to keep that, not only for my sake, but for your sake too - a javascript free blog means the priority is reading. + +### Examples + +So I achieve darkmode in this blog by doing the following: + +``` +/* default / light */ +:root { + --background: white; + --font: black; + --quote: #eee; + --link: #0303ee; + --linkv: #551a8b; + --linkf: #f02727; + --articleborder: #060606; + --tableborder: #aaa; + --tablehead: #ebcfff; + --tablez: #eee; +} +@media (prefers-color-scheme: dark) { + :root { + --background: #1e1e1e; + --font: #eee; + --quote: #444; + --link: #00d3d3; + --linkv: #cd78f4; + --linkf: #f02727; + --articleborder: #23ed9b; + --tableborder: #aaa; + --tablehead: #6f5a7e; + --tablez: #313131; + } +} +``` + +Essentially, I leverage [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) to define the specific areas I set theme specific colors (my nav bar is static regardless of dark/light mode for example). + +Then if the media preference is dark - I overwrite the variables with my dark mode values! + +Whats tricky is originally most of these values didn't actually HAVE values set - I relied on the system default for things like links and the page colors in an effort to use minimum CSS as well. + +I still feel like I am honoring that since I don't have to duplicate any actual CSS this way, I just have a lookup table of color values. + +That being said my CSS file is still only about 3kB which is not so bad. And I've actually covered most themed properties already - links, tables, quotes. + +#### Toggling Themes + +Something else I found out during this experiment is you can actually toggle the themes directly in your developer tooling. By opening your devtools and going to Inspector (in firefox at least) +there are two buttons in the styles section "toggle light color scheme" and "toggle dark color scheme" using a sun and moon icon. + +This made testing VERY easy and actually is what I noticed to prompt me into looking up if this was a standard CSS thing or not. So thanks Mozilla! + +### Conclusion + +Yeah if you've never realized this check out the MDN guides on both variables (I didn't realize these got put in the standard either!) and themes! + +* CSS Variables: [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) +* CSS Media prefers-color-scheme: [https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) + diff --git a/mds/blog/mastodon-and-twitter.md b/mds/blog/mastodon-and-twitter.md new file mode 100644 index 0000000..321fba9 --- /dev/null +++ b/mds/blog/mastodon-and-twitter.md @@ -0,0 +1,43 @@ +# Mastodon and Twitter... wow! + +So I was aware of the [Fediverse](https://en.wikipedia.org/wiki/Fediverse) quite some time ago. +[Mastodon](https://en.wikipedia.org/wiki/Mastodon_(software)) is one of the microblogging social networking services +that is.. "apart?" of the fediverse. + +[I joined mastodon](https://mastodon.online/@senders) back in 2020 when I was looking into it more and it was blowing up again on sites like Reddit. +Turns out I didn't really gel with it - primarily I realized I don't really like social media. + +## Twitter is on fire and I don't care + +So I joined Twitter sometime around 2010 because people kept talking about it and I wanted to follow some friends. +This is pre-discord and post-skype sucking ass so my friends and I were in need of some way of sharing links and media online +because SMS and MMS still and did suck back then too (TBH its the exact same). We'd DM eachother links and stuff and it was fun for a while. + +I did engage with the platform from a "I have thoughts that no one cares about, but at least I can tell Twitter" perspective. I didn't engage with it at all from: +I follow people and hashtags because I care about the discourse. This is also when I started getting more into Reddit - which was much more up my alley so it was moderated and +filtered for "higher tier content" (saying this now is like... hilarious - though as of Nov 2022, they're both just shitposts). + +In November of 2022, Twitter began to implode under god-awful leadership. And frankly, I couldn't care less... sorta. + +### The only good part about Twitter + +Apparently, Twitter is useful for distributed organization - we've seen how it works during movements to get the word out and spread the message. +Most notably in Egypt during Arab Spring. + +This can happen in Mastodon - but by its nature - Mastodon is a bit... gatekeepy. And being able to just go to Twitter.com and search #hastag is very useful for this aspect. + +### But there is no other value, and that is like... not always a good thing + +But that type of organization isn't always for _positive change_. I mean, look at JKR tweeting about trans folk and Trump. + +## Mastodon + +So I didn't want this to be some history lesson. It was mostly a post about - I started using Mastodon this morning again. I find it sits nicely in this niche of blogging +below things like Gemini or this blog - where someone would put _some effort_ into it. And mostly just get their quick thoughts out there. + +And I think that is fun. I am now more engaged with online creators than I was back in 2010 so I would probably want to have some YouTubers and bands migrate over so I could keep up-to-date on stuff. +But I bet Instagram is going to win out for those - since they are already engaged on that platform. + +### Why not Instagram + +So I honestly believe if Twitter full shuts down (hard to believe but it COULD happen at this point - or at least get ditched enough for people to move on) it will be replaced by Instagram as the platform to engage with your favorite artists, creators, celebrities etc. It already is that - but its a different type of engagement. So I am curious how this transition will occur. I don't see enough general public moving to Mastodon - as the venn diagram of "how I engage with fans on this platform" is like 2/3s for Twitter instagram and there is like 1/3 that Twitter does that Instagram doesn't - and that's diff --git a/mds/rss-a-follow-up.md b/mds/rss-a-follow-up.md new file mode 100644 index 0000000..66cd31a --- /dev/null +++ b/mds/rss-a-follow-up.md @@ -0,0 +1,108 @@ +# RSS - A Follow-up + +Get an RSS reader and connect everything to it! + +Between switching to Mastodon for my social media allowance, and using a dedicated RSS reader has really cut down my overall consumption and wasted PC time. + +> this blogpost is originally posted to my gemini gemlog: gemini://senders.io/gemlog/2022-12-31-rss-a-follow-up.gmi which is where I do most of my writing, converting some useful to share things over here. It is also where the original RSS gemlog this is a follow-up to was posted. For context, I wanted to cutback on a lot of my web consumption, wasting time and just being mindless online. So I looked to RSS to help centralize and solve this issue. + +## Recap + +So I am using [https://tt-rss.org/](https://tt-rss.org) as my RSS aggregator. It's a self-hosted RSS aggregator that, using profiles, allows you to subscribe to multiple feeds and have them "synced" between multiple devices (they're not synced, you're connecting to a central server). I like this because I don't ever have to worry about dismissing, reading, or marking anything on my phone to have it still present on my PC. And I don't have to worry about feed subscriptions or my phone pinging a bunch of feeds, or obviously, any third-party hosting. + +## How I've been using it + +So as always, please send me interesting RSS feeds! Or even your own! I am trying to read more blogs, and if you have something you enjoy drop me a DM or email! I'll share what I am following throughout this section <3 + +### Blogs + +Obviously, I am following blogs, one of the last holdouts of RSS. I have a few that I follow, mostly other transfolk on Mastodon that I found had their own blogs. Most non-trans folks I follow are using gemini and still rely on the feed aggregators for that. + +If you're interested the two main ones I am reading right now are: + +1. [Erin In The Morn (substack)](https://erininthemorn.substack.com) +2. [Selfaware Soup](https://www.selfawaresoup.com/) + +Which have been pretty insightful. Erin sharing a lot of US transgender news, which is good since I have dropped off using Reddit which is where I "got" my "news" from. + +### Podcasts + +The other mainstay in RSS is podcasts. Some even say if a podcast can't be consumed via RSS, is it even a podcast? I would agree. Everything else is just a show. I don't _need_ the content to be consumable from my reader, but I'd really appreciate it if were. I am always on the lookout for more podcasts though. With the only two consistent listens being: + +1. [The Pen Addict Podcast (relay.fm)](https://www.relay.fm/penaddict) +2. [Cortex Podcast (relay.fm)](https://www.relay.fm/cortex) + +And currently off-season: + +* [Backmarkers Podcast (relay.fm)](https://www.relay.fm/backmarkers) + +Which has a YouTube video format. Though, I honestly really don't care for Austin Evans, I just enjoy consuming some F1 content and pretending I have friends I can talk to about motor racing. + +While writing this section I added: + +* [Inside.java Podcast](https://inside.java/podcast/) + +I have yet to listen, some of the topics seem interesting and being infrequent gives me hope its quality over quantity. (And I like having podcasts for chores to distract my brain) + +### Tech News + +Right now I follow two main news sources in tech: + +1. [debian.org/news](https://www.debian.org/News/) +2. [LWN.net](https://lwn.net/) + +Running servers using stable debian - it's good to know when security updates come in, as well as distro updates. And LWN is fantastic, I've been a subscriber for many years and while sometimes (Jake) can focus a bit heavy on Python news, has been always interesting to read. + +This is the section I plan on adding more and more to. I had other tech blogs that just felt like clutter and were pushing out daily articles that I couldn't care less about (opensource.com cough cough). But that's just me. Tech news is mainly where I want to focus - since fluff blogs are rarely my cup of tea. + +LWN has some links in their weekly editions for other news feeds I might consider directly subscribing too, but for now I have these. + +### Music News + +Some folk have an RSS feed for their site updates, which I appreciate. Some use sites like Squarespace but don't properly connect up the RSS feed which I do NOT appreciate. + +So right now I have two bandsites that DO update it seems (as their site aligns with the feed) - but the only one I'll mention is: [raisedbyswans.com]( https://raisedbyswans.com/) I've spoken of this artist in my Music Spotlight MANY times and is one of my favorites. His site, while entirely simple, is setup with RSS and has been publishing his updates consistently. I appreciate this. Always a strong rec from me! + +I've been toying with Music Review sites that talk about new releases in the genres they specialize in, but I haven't settled on anything that is helping me discover new music. + +### YouTube + +This is probably where the biggest change has actually come in. Having my YouTube feed fed through RSS has been fantastic. I am able to not only refresh and not miss any updates (since YouTube sometimes likes to pull updates in out of order than I don't see it because it's buried between some other videos that I'd already seen. + +But this also allows me one further level of filtering on my YouTube subscriptions. I can stay subscribed to channels I am interested in watching _occasionally_ but not every video, and keep those off my RSS feed. And for the "I like to watch most if not all the new videos" I can subscribe to those via RSS. So it's like the "bell" but without the app basically. And since on Mobile I do NOT use the YouTube app (so I can take advantage of the Ad Blocker in Firefox) that's great! + +What sucks / is tricky is actually subscribing to the RSS feeds because YouTube buried that feature now. You just need the channel_id or the username and you can subscribe using the following URL: + +``` +https://www.youtube.com/feeds/videos.xml?channel_id={ID} +``` + +And you can obtain the channel_id either using the URL (though with aliases now (@channelname) its rare to see a channel_id in the URL) if present otherwise a little console JS can print it out: + +``` +ytInitialData.metadata.channelMetadataRenderer.externalId +``` +A note however - you'll need to clear the console if you navigate to the next channel, at least in Firefox, it caches the result otherwise and you'll print out the duplicate value. There are some tools where you can print your subscribers list into these feed URLs and bulk subscribe. I've lost the link (and it's what I did initially) but I recommend doing the manual add at least to focus on the channels you WANT in RSS, since you can always fallback to the main subscriptions page on YouTube. + +But what this has given me is the ability to effectively ignore YouTube almost entirely. Ideally, I'd script something with YouTube-dl but I don't REALLY care that much, and I've gotten into the habit of closing the tab after the video so I don't stick around and get sucked into the algorithm. + +What my morning looks like is sitting down, switching to my tt-rss tab, seeing what's fresh, and watching a video with my coffee maybe, then just moving on and doing something else. I still lurk Mastodon, or get sucked into my computer in some way or another, but it's been really positive! I can count on one hand how many times since dedicating to RSS I've just clicked around YouTube. + +### Hobby + +The last section which really is an extension of Blogs/News is "hobby" RSS feeds. These feed a bit into the consumerist side of life and why I keep them separate. Right now it's almost _entirely_ fountain pen related (Who'da thought this community would still be writing blogs :P) but since most of the blog posts are either about products or reviews in some way, I try and limit how much I expose myself to them. I have been working on a draft about consumerism for quite a while now and just haven't really worked it into a post that isn't just DAE consumerism BAD? low-effort Toot level. (But basically, I kinda hate how all my hobbies, and hobbies in general rely heavily on a consumerism mindset, GAS, and such). So I've been trying to be more appreciative of what I already have and such. + +But these blogs are nice, and often keep in the know about my hobbies and can react to anything meaningful that's being released. A good video sorta on this topic was by Adam Neely([Adam Neely - How In-Ear Monitors are Making Better Musicians](https://www.youtube.com/v/mHoljbkyAEs)), and how his band spend $6000 on gear for their tour, but what it did was eliminate stress and enable them to more easily fine tune and control how they monitor their live performance. He touches on the fact that gear videos feed into the consumerist mindset of music making, but gear is often necessary to facilitate certain things, and setting up a portable in-ear-monitor rig for their entire band is well... unavoidable. It's just a minor aside in a much deeper video about IEMs and touring and FEEL. And quite the departure from his usual music education content. But it sums up the main thesis of my consumerism gemlog quite nicely I feel (or at least I am projecting my thoughts into a brief aside he makes). + +## tt-rss - in retrospect + +So tt-rss is _fine_ honestly, I think I need to setup a better theme, something that has a bit more contrast. I don't REALLY read in it, I just use it as the aggregator and then open the links directly. I don't mind the way it renders the full articles with images, but I do mind how GREY it is by default (in "night" theme). It looks totally customizable and I bet I can download a decent theme for it if I look. But I may spend some time doing that and try and read more in application. + +But other than that it's been quite the improvement over my internet experience. More RSS!! + +## Conclusion + +I need more feeds, as I do enjoy reading. So I'm always on the look out. I hate to throw in engagement-y things like "let me know" stuff but I am genuinely looking for interesting suggestions for stuff you might subscribe to over RSS. Even if it's just "this is my webblog" :) I always like reading people's things. I should troll the aggregators and look at folks capsule landings to see what is linked! + +Anyway, you should look into getting an RSS aggregator setup. It's been really impactful on cutting down on internet scrolling and mindlessness. + diff --git a/mds/wishlist.md b/mds/wishlist.md index fe278e6..0723f8c 100644 --- a/mds/wishlist.md +++ b/mds/wishlist.md @@ -44,7 +44,8 @@ Speaking of represses, represses are always fine. If there are notoriously bad r ### Else -If you are sick of getting me records for gifts - I do need something to hold some overflow for my records like [found here on etsy](https://www.etsy.com/market/record_crate) +If you are sick of getting me records for gifts - I do need something to hold some overflow for my records like [found here on etsy](https://www.etsy.com/market/record_crate). +Ideally it would be something that can hold 10+ records for storage - but even something that displays a single record (like what is currently playing) is needed. And probably more within the price limit. Interesting Fountain Pen ink shades: [Jetpens Store](https://www.jetpens.com/Fountain-Pen-Inks/ct/3250) diff --git a/new-blog.sh b/new-blog.sh deleted file mode 100755 index 130b9a7..0000000 --- a/new-blog.sh +++ /dev/null @@ -1,24 +0,0 @@ -#!/usr/bin/env bash -set -e -# Help - -if [ "$1" == "--help" ]; then - HELP=1 -fi -if [ $# == 0 ]; then - HELP=1 -fi - -if [ "$HELP" == "1" ]; then - echo "./new-blog [iso-date]" - echo " This will create a new file in www/blog with the date sent." - echo " It will also add the necessary boilerplate to the html file." -fi - -DATE=$1 - - -# Init File -mkdir www/blog/${DATE} -cat templates/blog.html > www/blog/${DATE}/index.html - diff --git a/templates/blog-footer.html b/templates/blog-footer.html index de97660..2786723 100644 --- a/templates/blog-footer.html +++ b/templates/blog-footer.html @@ -2,5 +2,11 @@ + diff --git a/templates/page-footer.html b/templates/page-footer.html index f5471aa..78d35f6 100644 --- a/templates/page-footer.html +++ b/templates/page-footer.html @@ -1,3 +1,9 @@ + diff --git a/templates/rss-header.xml b/templates/rss-header.xml new file mode 100644 index 0000000..c38d6f0 --- /dev/null +++ b/templates/rss-header.xml @@ -0,0 +1,21 @@ + + + + senders.io - Blog + senders.io's blog feed + https://www.senders.io/ + 2023 - CC-BY-SA 4.0 - senders.io + Mon, 6 September 2010 00:01:00 +0000 + Sun, 6 September 2009 16:20:00 +0000 + 1800 + + + Example entry + Here is some text containing an interesting description. + http://www.example.com/blog/post/1 + 7bd204c6-1655-4c27-aeee-53f933c5395f + Sun, 6 September 2009 16:20:00 +0000 + + + + diff --git a/www/blog/2019-01-21/index.html b/www/blog/2019-01-21/index.html index 628ac41..cd76e34 100644 --- a/www/blog/2019-01-21/index.html +++ b/www/blog/2019-01-21/index.html @@ -70,6 +70,12 @@ + diff --git a/www/blog/2019-02-17/index.html b/www/blog/2019-02-17/index.html index 834fa51..5284b8c 100644 --- a/www/blog/2019-02-17/index.html +++ b/www/blog/2019-02-17/index.html @@ -173,6 +173,12 @@ + diff --git a/www/blog/2019-12-09/index.html b/www/blog/2019-12-09/index.html index 639ac30..ccb5d0a 100644 --- a/www/blog/2019-12-09/index.html +++ b/www/blog/2019-12-09/index.html @@ -123,6 +123,12 @@ + diff --git a/www/blog/2020-01-13/index.html b/www/blog/2020-01-13/index.html index f0c2ce8..7100ff6 100644 --- a/www/blog/2020-01-13/index.html +++ b/www/blog/2020-01-13/index.html @@ -70,6 +70,12 @@ + diff --git a/www/blog/2020-12-17/index.html b/www/blog/2020-12-17/index.html index 2bf9d1b..0186b8f 100644 --- a/www/blog/2020-12-17/index.html +++ b/www/blog/2020-12-17/index.html @@ -164,6 +164,12 @@ + diff --git a/www/blog/2021-01-05/index.html b/www/blog/2021-01-05/index.html index 97b0261..db49793 100644 --- a/www/blog/2021-01-05/index.html +++ b/www/blog/2021-01-05/index.html @@ -119,6 +119,12 @@ + diff --git a/www/blog/2022-11-06/index.html b/www/blog/2022-11-06/index.html index ffe0b88..c48a37b 100644 --- a/www/blog/2022-11-06/index.html +++ b/www/blog/2022-11-06/index.html @@ -237,6 +237,12 @@ + diff --git a/www/blog/2022-12-05/index.html b/www/blog/2022-12-05/index.html new file mode 100644 index 0000000..34ba409 --- /dev/null +++ b/www/blog/2022-12-05/index.html @@ -0,0 +1,143 @@ + + + + + + senders.io - CSS Themes Exist Now!? + + + + + +
+
+

CSS Themes Exist Now!?

+

Yeah news to me too! Seems like according to + the MDN it’s been supported since 2019 for most browsers and + supported by all by now.

+

This is so wild!

+

Why is this cool?

+

Well you may have noticed this is in dark mode now (if you set your + preferences to dark in your OS/Browser). But this is cool because it + means we’re no longer restricted to using Javascript and custom + preferences for websites.

+

I had assumed this existed because sites like GitHub were defaulting + to darkmode despite me never setting anything in like my profile + settings. But I just assumed based off of my legacy knowledge this was + some custom render trick using javascript.

+

Still no JS!

+

I keep this blog JS free! While not all pages under the senders.io + umbrella are javascript free - everything in www.senders.io (this blog) + will always be.

+

I try to keep that, not only for my sake, but for your sake too - a + javascript free blog means the priority is reading.

+

Examples

+

So I achieve darkmode in this blog by doing the following:

+ 
/* default / light */
+:root {
+  --background: white;
+  --font: black;
+  --quote: #eee;
+  --link: #0303ee;
+  --linkv: #551a8b;
+  --linkf: #f02727;
+  --articleborder: #060606;
+  --tableborder: #aaa;
+  --tablehead: #ebcfff;
+  --tablez: #eee;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #1e1e1e;
+    --font: #eee;
+    --quote: #444;
+    --link: #00d3d3;
+    --linkv: #cd78f4;
+    --linkf: #f02727;
+    --articleborder: #23ed9b;
+    --tableborder: #aaa;
+    --tablehead: #6f5a7e;
+    --tablez: #313131;
+  }
+}
+
+

Essentially, I leverage + CSS Variables to define the specific areas I set theme specific + colors (my nav bar is static regardless of dark/light mode for + example).

+

Then if the media preference is dark - I overwrite the variables with + my dark mode values!

+

Whats tricky is originally most of these values didn’t actually HAVE + values set - I relied on the system default for things like links and the + page colors in an effort to use minimum CSS as well.

+

I still feel like I am honoring that since I don’t have to duplicate + any actual CSS this way, I just have a lookup table of color values.

+

That being said my CSS file is still only about 3kB which is not so + bad. And I’ve actually covered most themed properties already - links, + tables, quotes.

+

Toggling Themes

+

Something else I found out during this experiment is you can actually + toggle the themes directly in your developer tooling. By opening your + devtools and going to Inspector (in firefox at least) there are two + buttons in the styles section “toggle light color scheme” and “toggle + dark color scheme” using a sun and moon icon.

+

This made testing VERY easy and actually is what I noticed to prompt + me into looking up if this was a standard CSS thing or not. So thanks + Mozilla!

+

Conclusion

+

Yeah if you’ve never realized this check out the MDN guides on both + variables (I didn’t realize these got put in the standard either!) and + themes!

+ +
+ + +
+ + diff --git a/www/blog/bread/index.css b/www/blog/bread/index.css deleted file mode 100644 index a12af0f..0000000 --- a/www/blog/bread/index.css +++ /dev/null @@ -1,11 +0,0 @@ -table.bake-info th, td { - border: 1px dotted #eee; -} - -table.bake-info th { - background: #debfff; -} - -table.bake-info td { - background: #fffdeb; -} diff --git a/www/blog/bread/index.html b/www/blog/bread/index.html index f1ae9ac..22abb8d 100644 --- a/www/blog/bread/index.html +++ b/www/blog/bread/index.html @@ -8,9 +8,6 @@ - @@ -19,8 +16,15 @@ senders.io
@@ -143,6 +147,12 @@ +
diff --git a/www/blog/index.html b/www/blog/index.html index f2766b8..d2252ea 100644 --- a/www/blog/index.html +++ b/www/blog/index.html @@ -32,6 +32,9 @@

Blog Index

    +
  1. + 2022-12-05 - CSS Themes Exist Now!? +
  2. 2022-11-06 - My Markdown -> HTML Setup @@ -64,6 +67,12 @@
+ diff --git a/www/blog/movies/index.html b/www/blog/movies/index.html index be7251e..9571fa3 100644 --- a/www/blog/movies/index.html +++ b/www/blog/movies/index.html @@ -48,6 +48,12 @@
  • Tron
    • + diff --git a/www/dice/index.html b/www/dice/index.html index 10dcd84..ead129d 100644 --- a/www/dice/index.html +++ b/www/dice/index.html @@ -59,6 +59,13 @@
    This page uses basic javascript. Nothing external.
    +