Copy old files and update build.sh to generate it all!

This is a huge messy commit but :) sue me. I'm not at work I can do
git badly for once!

1 files changed, 104 insertions, 0 deletions

diff --git a/posts/css-themes-exist-now.html b/posts/css-themes-exist-now.html
new file mode 100644
index 0000000..25eee0d
--- /dev/null
+++ b/posts/css-themes-exist-now.html
@@ -0,0 +1,104 @@
+--post-date: 2022-12-05
+--type: blog
+    <article>
+      <h1>CSS Themes Exist Now!?</h1>
+      <p>Yeah news to me too! Seems like according to <a rel=
+      "external noopener noreferrer"
+         target="_blank"
+         href=
+         "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme#browser_compatibility">
+      the MDN</a> it’s been supported since 2019 for most browsers and
+      supported by all by now.</p>
+      <p>This is so wild!</p>
+      <h2>Why is this cool?</h2>
+      <p>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.</p>
+      <p>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.</p>
+      <h3>Still no JS!</h3>
+      <p>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.</p>
+      <p>I try to keep that, not only for my sake, but for your sake too - a
+      javascript free blog means the priority is reading.</p>
+      <h2>Examples</h2>
+      <p>So I achieve darkmode in this blog by doing the following:</p>
+      <pre><code>/* 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;
+  }
+}
+</code></pre>
+      <p>Essentially, I leverage <a rel="external noopener noreferrer"
+         target="_blank"
+         href=
+         "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">
+      CSS Variables</a> to define the specific areas I set theme specific
+      colors (my nav bar is static regardless of dark/light mode for
+      example).</p>
+      <p>Then if the media preference is dark - I overwrite the variables with
+      my dark mode values!</p>
+      <p>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.</p>
+      <p>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.</p>
+      <p>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.</p>
+      <h3>Toggling Themes</h3>
+      <p>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.</p>
+      <p>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!</p>
+      <h2>Conclusion</h2>
+      <p>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!</p>
+      <ul>
+        <li>CSS Variables: <a rel="external noopener noreferrer"
+              target="_blank"
+              href=
+              "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</a>
+        </li>
+        <li>CSS Media prefers-color-scheme: <a rel=
+        "external noopener noreferrer"
+              target="_blank"
+              href=
+              "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</a>
+        </li>
+      </ul>
+    </article>
+