summaryrefslogtreecommitdiff
path: root/www/blog
diff options
context:
space:
mode:
Diffstat (limited to 'www/blog')
-rw-r--r--www/blog/2019-01-21/index.html6
-rw-r--r--www/blog/2019-02-17/index.html6
-rw-r--r--www/blog/2019-12-09/index.html6
-rw-r--r--www/blog/2020-01-13/index.html6
-rw-r--r--www/blog/2020-12-17/index.html6
-rw-r--r--www/blog/2021-01-05/index.html6
-rw-r--r--www/blog/2022-11-06/index.html6
-rw-r--r--www/blog/2022-12-05/index.html143
-rw-r--r--www/blog/bread/index.css11
-rw-r--r--www/blog/bread/index.html20
-rw-r--r--www/blog/index.html9
-rw-r--r--www/blog/movies/index.html6
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>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2024-09-19 22:23:53 +0000