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 --- 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 ++++-- 19 files changed, 362 insertions(+), 230 deletions(-) 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 (limited to 'www') 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.
    +