diff options
Diffstat (limited to 'www/blog')
-rw-r--r-- | www/blog/2019-01-21/index.html | 6 | ||||
-rw-r--r-- | www/blog/2019-02-17/index.html | 6 | ||||
-rw-r--r-- | www/blog/2019-12-09/index.html | 6 | ||||
-rw-r--r-- | www/blog/2020-01-13/index.html | 6 | ||||
-rw-r--r-- | www/blog/2020-12-17/index.html | 6 | ||||
-rw-r--r-- | www/blog/2021-01-05/index.html | 6 | ||||
-rw-r--r-- | www/blog/2022-11-06/index.html | 6 | ||||
-rw-r--r-- | www/blog/2022-12-05/index.html | 143 | ||||
-rw-r--r-- | www/blog/bread/index.css | 11 | ||||
-rw-r--r-- | www/blog/bread/index.html | 20 | ||||
-rw-r--r-- | www/blog/index.html | 9 | ||||
-rw-r--r-- | www/blog/movies/index.html | 6 |
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 -> 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> |