summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-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
-rw-r--r--www/dice/index.html7
-rw-r--r--www/error.html22
-rw-r--r--www/index.css83
-rw-r--r--www/index.html42
-rw-r--r--www/resume/index.html28
-rw-r--r--www/wc3.html156
-rw-r--r--www/wishlist.html23
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 -&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>
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 -&gt; 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&#39;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&#39; 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&#39;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&#39;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&#39;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&#39;s creator (<strong>admin</strong>). And once
- you&#39;ve been authorized by the admin you can join/unjoin as you please.
- The admin doesn&#39;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&#39;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&#39;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&#39;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&#39;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&#39;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
- &quot;Show Network&quot; 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
- &quot;ONLINE&quot; and their Physical IP - this will mean they&#39;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&#39;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&#39;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>