diff options
Diffstat (limited to 'www')
| -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 | ||||
| -rw-r--r-- | www/dice/index.html | 7 | ||||
| -rw-r--r-- | www/error.html | 22 | ||||
| -rw-r--r-- | www/index.css | 83 | ||||
| -rw-r--r-- | www/index.html | 42 | ||||
| -rw-r--r-- | www/resume/index.html | 28 | ||||
| -rw-r--r-- | www/wc3.html | 156 | ||||
| -rw-r--r-- | www/wishlist.html | 23 |
19 files changed, 362 insertions, 230 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> 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 @@ <article class='footer'> <i>This page uses basic javascript. Nothing external.</i> </article> + <div id='copyright'> + <small>© 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.</small> + </div> <script> var numRolls = 0; diff --git a/www/error.html b/www/error.html index 4e3a784..276d4ef 100644 --- a/www/error.html +++ b/www/error.html @@ -16,12 +16,28 @@ <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'> - <h1>Oops!</h1>Page requested not found. + <article> + <h1>Oops!</h1> + <p>Page requested not found.</p> + </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/index.css b/www/index.css index 73a4ae4..21baa50 100644 --- a/www/index.css +++ b/www/index.css @@ -1,14 +1,69 @@ -html,body { margin: 0; font-family: sans-serif; } -#body { margin: 16px 10%; } -#body article { border-bottom: 1px solid #060606; } +/* 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; + } +} + +html,body { + margin: 0; + font-family: sans-serif; + background-color: var(--background); + color: var(--font); +} +a { + color: var(--link); +} +a:visited { + color: var(--linkv); +} +a:focus { + color: var(--linkf); +} +#body { + margin: 16px auto; + max-width: 700px; +} +@media only screen and (max-width: 800px) { + #body { + margin: 16px 10%; + max-width: 700px; + } +} + +#body article { + border-bottom: 1px solid var(--articleborder); +} #body article:last { border-bottom: none; } -#body table { border-collapse: collapse; border: 1px solid #aaa; } -#body table td, #body table th { border: 1px solid #aaa; padding: 2px 8px; } -#body table tr:nth-child(even) { background-color: #eee; } +#body table { border-collapse: collapse; border: 1px solid var(--tableborder); } +#body table thead tr { background-color: var(--tablehead); } +#body table td, #body table th { border: 1px solid var(--tableborder); padding: 2px 8px; } +#body table tr:nth-child(even) { background-color: var(--tablez); } #body ul.compact { columns: 2; } #body blockquote { - background-color: #eee; + background-color: var(--quote); border-radius: 2px; padding: 4px; } @@ -51,22 +106,29 @@ html,body { margin: 0; font-family: sans-serif; } color:inherit; text-decoration: none; } #footer { - font-size: 0.75em; + font-size: 0.90em; float:right; } +#copyright { + font-size: 0.80em; + float:left; +} + article .footer { - font-size: 0.75em; + font-size: 0.90em; float:right; } .footnote { + /* always shift the footnotes a bit below whats above */ + margin: 24px 0 0 0; font-size: 0.75em; } code { font-family: monospace; - background-color: #eee; + background-color: var(--quote); padding: 4px 4px; border-radius: 5px 5px; display: inline-block; @@ -88,5 +150,4 @@ code.inline { height: auto; } - #tutorial { margin: 2% } diff --git a/www/index.html b/www/index.html index c19836d..c4c1688 100644 --- a/www/index.html +++ b/www/index.html @@ -34,7 +34,31 @@ like uploading. A lot of it comes in the form of micro-blogs and stream of consciousness ramblings.</p> </article> - <article id='homepage-post'> + <article> + <h2>Recent Post - 2022-12-05</h2> + <h3>CSS Themes Exist Now!?</h3> + <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> + <h4>Why is this cool?</h4> + <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> + <div class='footer'> + <a href='/blog/2022-12-05'>Continue reading...</a> + </div> + </article> + <article> <h2>Recent Post - 2022-11-06</h2> <h3>My Markdown -> HTML Setup</h3> <p>A common way I see a lot of people blog, especially micro-blog, is in @@ -65,22 +89,18 @@ <a href='/blog/2022-11-06'>Continue reading...</a> </div> </article> - <article> - <h2>Bread</h2> - <p><a href='/blog/bread/'>Bread blog!</a> - I started blogging about my - bakes in the hopes of learning what I did right/wrong and perfecting my - bread. This is a different format than the other blog posts, it's a - single page containing, long form, all the different entries.</p> - <div class='footer'> - <a href='/blog/bread/#2020-02-17'>Last updated - 2020-02-17</a> - </div> - </article> <div class="footnote"> <p>The site source is available at <a rel="noopener noreferrer external" target="_blank" href= "https://git.senders.io/senders/senders-io">git.senders.io/senders/senders-io</a>.</p> </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/resume/index.html b/www/resume/index.html deleted file mode 100644 index 69b2452..0000000 --- a/www/resume/index.html +++ /dev/null @@ -1,28 +0,0 @@ -<!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 - Resume</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="/">Home</a> <a href="/blog">Blog</a> <a href= - "https://github.com/s3nd3r5">Github</a> - </nav> - </div> - <div id='body'> - For my resume feel free to contact me at <code class='inline'>steph AT - senders.io</code> - </div> -</body> -</html> diff --git a/www/wc3.html b/www/wc3.html deleted file mode 100644 index 2e01c97..0000000 --- a/www/wc3.html +++ /dev/null @@ -1,156 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta name="generator" - content="HTML Tidy for HTML5 for Linux version 5.6.0"> - <meta charset="utf-8"> - <link rel='stylesheet' - type='text/css' - href='/index.css'> - <meta name="viewport" - content="width=device-width, initial-scale=1"> - <title>Senders' Wishlist</title> - <style> - img { border: 2px solid #eee; } - body { - width: 800px; - } - .small { font-size: 0.75em; } - </style> -</head> -<body id='wishlist'> - <h1>Warcraft 3 Setup Guide</h1> - <h2 id='gamesetup'>Game Setup</h2> - <h3 id='download'>Downloading the game</h3>Download the <code class= - 'inline'>wc3.zip</code>. You can download it from <a href= - 'https://cdn.senders.io/blobs/wc3.zip' - target='_blank'>https://cdn.senders.io/blobs/wc3.zip</a> - <h3 id='unzip'>Extract the game contents</h3>Unzip the game contents. If you - can't unzip it you can download 7Zip from: <a href= - 'https://www.7-zip.org/a/7z1900-x64.exe'>https://www.7-zip.org/</a>. - <div> - <span class='scaled-half'><img src='/imgs/wc3/unzip.png' - alt='7Zip Context Menu'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <div> - <span class='scaled-half'><img src='/imgs/wc3/unzipped.png' - alt='Unzipped Folder Contents'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3 id='launch'>Launch the game</h3>Open the folder you unzipped into and - open <code class='inline'>Warcarft III 1.31.1\x86_64\Warcraft III.exe</code>. - This will launch the game. - <div> - <span class='scaled-half'><img src='/imgs/wc3/launch.png' - alt='Game Launcher Exe'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3 id='cdkey'>Active your CD Key</h3>The game will prompt with a launcher - for battle.net or CD Key. Choose CD Key and type in the provided CD Key. Your - CD Key can be found in <code class='inline'>CDKEYS.jpg</code> back in the - main folder. - <div> - <span class='scaled-half'><img src='/imgs/wc3/cdkey.png' - alt='CD Key file location'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h4>Warning! Do Not Update</h4>Once you launch the game it will prompt you to - update: <strong>DO NOT UPDATE THE GAME</strong> . After clicking No it may - ask you again on launch again (sometimes). Just keep clicking NO. - <h3 id='setupdone'>Done!</h3>Now you've setup Warcraft 3. Next you need - to setup a virtual LAN - <h2 id='lansetup'>Setting up a Virtual Lan</h2>In this section I'll show - a guide for setting up <a href='https://www.zerotier.com/'>ZeroTier</a>. - <h3 id='adminnotice'>Before you continue</h3>Only one person - <strong>needs</strong> to setup a network. Everyon else can join an existing - network through the network's creator (<strong>admin</strong>). And once - you've been authorized by the admin you can join/unjoin as you please. - The admin doesn't even need to be in the same game / online. - <h3>Admin | Network Setup</h3>If you want to be the network admin you can - create a network by first creating an account with ZeroTier. You'll need - to supply a verifiable email but that is it. Here is a quick summary of how - to setup. A full guide can be found at <a href= - 'https://zerotier.atlassian.net/wiki/spaces/SD/pages/8454145/Getting+Started+with+ZeroTier'> - Zero Tiers own setup guide</a> - <div> - <span class='scaled-half'><img src='/imgs/wc3/create-network.png' - alt='Create a Network'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h4>Your Network ID</h4>Your network ID will be present on the network page. - The example netowrk here is: <code class='inline'>17d709436c634b2b</code>. - You will share this with the members. - <h4>Admin | Network Settings</h4>You shouldn't have to do anything - custom, just authorize the users who join your network. This can be done by - either adding them directly, or checking the authorize box. You can add them - from the settings menu at the bottom: - <div> - <span class='scaled-half'><img src='/imgs/wc3/add-remove.png' - alt='Add remove users section'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3>Member | Download</h3><i>Note Admins must also join their own - network!</i> Member's first must download the application: <a href= - 'https://www.zerotier.com/download/'>Zero Tier 1</a>. - <h3>Member | ZeroTier UI</h3>The ZeroTier UI is just a system-tray icon. Just - right click to perfom any of the actions listed below. (It's the icon - that shares the icon from the website!) - <div> - <span class='scaled-half'><img src='/imgs/wc3/tray.png' - alt='ZeroTier Tray Icon'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <div> - <span class='scaled-half'><img src='/imgs/wc3/menu.png' - alt='ZeroTier Tray Menu'></span><br> - <i class='small'>Hover to Zoom</i> - </div>You can right click the tray-icon to open the menu. Here you will see - your Node Id. Example: <code class='inline'>Node ID: 2d213b67f2</code> - <h4>Member | Add network</h4>To join simply paste the network ID in the form. - You can get the ID from the Network Admin. - <div> - <span class='scaled-half'><img src='/imgs/wc3/join.png' - alt='Join prompt'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h4>Admin | Authorize the Member</h4>The Admin will then need your - <strong>Node ID</strong> and will authorize you in their network settings. - <div> - <span class='scaled-half'><img src='/imgs/wc3/members-view.png' - alt='Members View'></span><br> - <i class='small'>Hover to Zoom</i> - </div> - <h3>Member | Reboot</h3>Now that you've connected and setup I recommend - rebooting here. You can also reboot upon installation too to be safe. - <h3>Member | Verify connectivity</h3>You can open the menu and click - "Show Network" which will show you your connected networks. You - should see <code class='inline'>Status: OK</code>. You can click the connect - checkbox here to connect/disconnect. Or click the network from the menu - directly. - <div> - <span class='scaled-half'><img src='/imgs/wc3/connection.png' - alt='Connection View'><br> - <i class='small'>Hover to Zoom</i></span> - </div> - <h3><span class='scaled-half'>Admin | Verify everyone is - connected</span></h3><span class='scaled-half'>You can verify the connected - nodes by looking at the network view under Members. You should see Last Seen - "ONLINE" and their Physical IP - this will mean they're - connected successfully. You can add names and descriptions to help manage who - is who in case someone loses connectivity.</span> - <h2><span class='scaled-half'>Creating a LAN Game</span></h2><span class= - 'scaled-half'>At this point you should be able to create a LAN game. It will - ask you to install Bonjour services. Click yes. The game may hang for a bit - while this happens, that is normal. Authorize the network firewall popup if - it does.</span> - <h2><span class='scaled-half'>Troubleshooting</span></h2><span class= - 'scaled-half'>The network Admin can troubleshoot any connectivity issues by - checking if the Member's are present in their network settings.</span> - <h3><span class='scaled-half'>Status: - Request_Configuration</span></h3><span class='scaled-half'>If you are stuck - in this status you can delete the network. Reboot. Then re-add the network - and have the admin re-authorize you if necessary. This may take a few minutes - before you're IP appears in the network settings for the admin.</span> -</body> -</html> diff --git a/www/wishlist.html b/www/wishlist.html index cb6fb6a..6c80cb1 100644 --- a/www/wishlist.html +++ b/www/wishlist.html @@ -16,10 +16,15 @@ <a class='title' href='/'>senders.io</a> <nav> - <a href="/resume">Resume</a> <a href="/blog">Blog</a> <a rel= - "noopener noreferrer external" + <a href="/blog">blog</a> <a rel="external noopener noreferrer" target="_blank" - href="https://github.com/s3nd3r5">Github</a> + 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" @@ -225,13 +230,21 @@ hold some overflow for my records like <a rel= "external noopener noreferrer" target="_blank" - href="https://www.etsy.com/market/record_crate">found here on - etsy</a></p> + href="https://www.etsy.com/market/record_crate">found here on etsy</a>. + Ideally it would be something that can hold 10+ records for storage - + but even something that displays a single record (like what is currently + playing) is needed. And probably more within the price limit.</p> <p>Interesting Fountain Pen ink shades: <a rel= "external noopener noreferrer" target="_blank" href="https://www.jetpens.com/Fountain-Pen-Inks/ct/3250">Jetpens Store</a></p> </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> </body> </html> |