Major overhaul, markdowns + copyright notice

12 files changed, 215 insertions, 16 deletions

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 @@
     <div id='footer'>
       <i>January 21, 2019</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
     <div id='footer'>
       <i>February 17, 2019</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
     <div id='footer'>
       <i>December 09, 2019</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
     <div id='footer'>
       <i>Updated and finally posted February 16, 2020</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
     <div id='footer'>
       <i>Posted: Decemeber 17, 2020. Update: December 19, 2020</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
     <div id='footer'>
       <i>January 5, 2021</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
     <div id="footer">
       <i>November 06, 2022</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="generator"
+        content="HTML Tidy for HTML5 for Linux version 5.6.0">
+  <title>senders.io - CSS Themes Exist Now!?</title>
+  <link rel='stylesheet'
+        type='text/css'
+        href='/index.css'>
+  <meta name="viewport"
+        content="width=device-width, initial-scale=1">
+</head>
+<body>
+  <div id='header'>
+    <a class='title'
+         href='/'>senders.io</a>
+    <nav>
+      <a href="/blog">blog</a> <a rel="external noopener noreferrer"
+           target="_blank"
+           href="https://github.com/s3nd3r5">github</a> <a rel=
+           "external noopener noreferrer"
+           target="_blank"
+           href="https://git.senders.io">cgit</a> <a rel=
+           "me external noopener noreferrer"
+           target="_blank"
+           href="https://mastodon.online/@senders">mastodon</a>
+    </nav>
+  </div>
+  <div id="body">
+    <article>
+      <h2>CSS Themes Exist Now!?</h2>
+      <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>
+      <h3>Why is this cool?</h3>
+      <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>
+      <h4>Still no JS!</h4>
+      <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>
+      <h3>Examples</h3>
+      <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>
+      <h4>Toggling Themes</h4>
+      <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>
+      <h3>Conclusion</h3>
+      <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>
+    <div id="footer">
+      <i>December 05, 2022</i>
+    </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
+  </div>
+</body>
+</html>
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 @@
   <link rel='stylesheet'
         type='text/css'
         href='/index.css'>
-  <link rel='stylesheet'
-        type='text/css'
-        href='/blog/bread/index.css'>
   <meta name="viewport"
         content="width=device-width, initial-scale=1">
 </head>
@@ -19,8 +16,15 @@
     <a class='title'
          href='/'>senders.io</a>
     <nav>
-      <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a href=
-      "https://github.com/s3nd3r5">Github</a>
+      <a href="/blog">blog</a> <a rel="external noopener noreferrer"
+           target="_blank"
+           href="https://github.com/s3nd3r5">github</a> <a rel=
+           "external noopener noreferrer"
+           target="_blank"
+           href="https://git.senders.io">cgit</a> <a rel=
+           "me external noopener noreferrer"
+           target="_blank"
+           href="https://mastodon.online/@senders">mastodon</a>
     </nav>
   </div>
   <div id='body'>
@@ -143,6 +147,12 @@
     <div id='footer'>
       <i>Updated February 17, 2020</i>
     </div>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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
@@ -33,6 +33,9 @@
       <h1>Blog Index</h1>
       <ol>
         <li>
+          <a href="/blog/2022-12-05/">2022-12-05 - CSS Themes Exist Now!?</a>
+        </li>
+        <li>
           <a href="/blog/2022-11-06/">2022-11-06 - My Markdown -&gt; HTML
           Setup</a>
         </li>
@@ -64,6 +67,12 @@
         </li>
       </ol>
     </article>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>
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 @@
         <li>Tron</li>
       </ul>
     </article>
+    <div id='copyright'>
+      © 2023 senders dot io - <a rel="license external noopener noreferrer"
+           target="_blank"
+           href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a>
+           unless otherwise noted.
+    </div>
   </div>
 </body>
 </html>