added new postHEADmaster

3 files changed, 140 insertions, 0 deletions

diff --git a/posts/still-working-on-this/content.md b/posts/still-working-on-this/content.md
new file mode 100644
index 0000000..a1db62a
--- /dev/null
+++ b/posts/still-working-on-this/content.md
@@ -0,0 +1,131 @@
+This time I made some improvements to the website.
+
+## Watch out, construction site!
+Ever since I've bought my domain, I've been putting all the actual content of my website to thematic subdomains. Since I had nothing to put to the main domain I just used it as a sort of dead-end for the website, with the following game over text from the [Legend of Zelda: Majora's Mask](https://en.wikipedia.org/wiki/The_Legend_of_Zelda:_Majora%27s_Mask):
+
+"""You've met with a terrible fate, haven't you? "" Majora's Mask, 2000 """
+
+After creating more and more silly little projects on the site, I soon realized it was time for me to **create** at least **some sort of menu** where a random visitor can check all the subdomains out (especially since I myself was starting to forget just _what_ all the current projects/subdomains were).
+
+So a few days ago I've put together this horrible abomination of a webpage for my main domain. I'm going to include a screenshot of it, in case I ever decide to change it to something less a crime against humanity:
+
+![an image with a very basic menu with ugly colored buttons and an UNDER CONSTRUCTION banner](main_domain.webp "No, thank you, IT companies, I'm not interested in frontend design, you can stop sending me job offers!" "https://wazul.moe" "It was a fun exercise for hand-coded svg at least...")
+
+## Starting to feel like an icon (would look good on the sidebar)
+
+I also added a few more links to the sidebar, like my Mastodon which I'm planning to start using more frequently again. So I had to add a few **icons for these entries** (and the Arch Linux logo btw). Luckily [iconify](https://icon-sets.iconify.design) had some really cute Apache license icons which suited my purpose perfectly.
+
+## Return of the light theme
+
+Though the first iteration of the blog had white background, it was hardly what you could call a *light theme*. You can check out how it looked in the [first blogpost](/posts/2024/let-there-be-light-theme). After I received some advice that I should actually **implement a light theme** (and I myself experienced just how hard it is to read anything on the blog while sitting outdoors on a platform of the train station with my laptop on my lap during daytime), I've felt it might actually be a good idea to do it.
+
+My first question was _how_ to do it. Luckily I was already working with a predefined **palette of colors** for the 8 ANSI color (plus foreground and background). These were defined in the <span class="code-block-wrap"><span class="yellow">:root</span></span> of the css file, so the only thing I had to do was change those when another theme was set.
+
+I know that <span class="code-block-wrap"><span class="magenta">prefers-color-scheme</span>: <span class="green">light</span></span> is a thing in css, but I was not fond of only using that for setting the preferred theme for multiple reasons:
+- I may want to change the theme **manually** even if I have a system preference (like on the train station; see above); dark mode is sometimes called night mode for a _reason_
+- {{foreshadowing}} I might want **more than two** color schemes {{}}; let's get the most out of the system if I implement it anyway
+- totally personal reason: I prefer dark mode, but I use Firefox with **fingerprintingProtection**, so my agent always lies light mode preference :)
+
+So of course my other choice was good old **javascript**. I wanted to avoid using javascript on the blog for as long as I can. Three blogposts was the limit as it turns out.
+
+### Setting theme with "shell scripts"
+I wanted the theme changing section of the sidebar to look thematically similar to the rest of the blog. So just like the tag listing, I went with a listing of **"shell scripts"** for the themes, and colored them green (the color for files with execute permission in ls). So while they essentially **work like buttons**, they **look more like links**. That's because they are:
+
+<div class="code-block">
+<p><span class="cyan">&lt</span><span class="yellow">a</span> <span class="green">href</span><span class="cyan">=</span><span class="red">"javascript:void(0);"</span> <span class="green">class</span><span class="cyan">=</span><span class="red">"icon-text theme-selector-light"</span> <span class="green">onclick</span><span class="cyan">=</span><span class="red">"setTheme('light')"</span><span class="cyan">&gt</span>
+    <span class="cyan">&lt</span><span class="yellow">img</span> <span class="green">src</span><span class="cyan">=</span><span class="red">"/assets/image/sun.svg"</span> <span class="green">class</span><span class="cyan">=</span><span class="red">"svg-icon"</span><span class="cyan">&gt</span>
+    <span class="cyan">&lt</span><span class="yellow">span</span><span class="cyan">&gt</span>sweet-celestial.sh<span class="cyan">&lt/</span><span class="yellow">span</span><span class="cyan">&gt</span>
+<span class="cyan">&lt/</span><span class="yellow">a</span><span class="cyan">&gt</span></p>
+</div>
+
+I know this goes a bit against visual clarity, but I liked the idea, so I went with it anyway.
+
+The current theme is stored in <span class="code-block-wrap"><span class="yellow">localStorage</span></span> and the <span class="code-block-wrap"><span class="yellow">data-theme</span></span> attribute is applied to the **root html element** when loading the page or changing the theme:
+
+<div class="code-block">
+<p><span class="yellow">const</span> <span class="magenta">THEME_KEY</span> = <span class="green">"data-theme"</span>;</p>
+<br>
+<p><span class="yellow">function</span> <span class="blue">updateTheme</span>() {
+    <span class="yellow">let</span> theme = <span class="magenta">localStorage</span>.<span class="blue">getItem</span>(<span class="magenta">THEME_KEY</span>);
+    <span class="yellow">if</span> (theme != <span class="yellow">null</span>) {
+        <span class="magenta">document</span>.<span class="magenta">documentElement</span>.<span class="blue">setAttribute</span>(<span class="magenta">THEME_KEY</span>, theme)
+    }
+}</p>
+<br>
+<p><span class="yellow">function</span> <span class="blue">setTheme</span>(theme) {
+    <span class="magenta">localStorage</span>.<span class="blue">setItem</span>(<span class="magenta">THEME_KEY</span>, theme);
+    <span class="blue">updateTheme</span>();
+}</p>
+</div>
+
+The root colors in the **.css** file are then looked up in the <span class="code-block-wrap">[<span class="yellow">data-theme</span>=<span class="red">"light"</span>]</span> section, if light theme was selected.
+
+### Coloring the icons
+Some of the svg icons on the blog use specific **"hardcoded" colors**. For example the Arch Linux logo has the official <span class="code-block-wrap"><span style="color: #1793d1">#1793d1</span></span> blue color. But other icons, like the ones for the Website and the E-mail are using the same color scheme as the rest of the blog. So when changing theme, **I need them to change color** as well. I was able to achieve this with tagging them with the <span class="code-block-wrap"><span class="yellow">filter-yellow</span></span> class, and then **styling it** for each theme separately:
+<div class="code-block">
+<p>.<span class="yellow">filter-yellow</span> {
+    <span class="green">filter</span>: <span class="magenta">brightness</span>(<span class="blue">0</span>) <span class="magenta">saturate</span>(<span class="blue">100%</span>) <span class="magenta">invert</span>(<span class="blue">91%</span>) <span class="magenta">sepia</span>(<span class="blue">86%</span>) <span class="magenta">saturate</span>(<span class="blue">596%</span>) <span class="magenta">hue-rotate</span>(<span class="blue">314deg</span>) <span class="magenta">brightness</span>(<span class="blue">96%</span>) <span class="magenta">contrast</span>(<span class="blue">97%</span>);
+}</p>
+</div>
+
+For the conversion from **hex color to css filter**, I used the tool on [Isotropic's website](https://isotropic.co/tool/hex-color-to-css-filter). I only have yellow colored icons now, obviously I will need to generate the rest of the palette if I want to use them.
+
+### Flash bang out!
+After this... everything was ready. Or so I thought. I was getting the good old **white flickering effect** on almost every page load. In the end I realized I was only applying the theme on <span class="code-block-wrap"><span class="magenta">window</span>.<span class="magenta">onload</span></span>, instead of **just calling it immediately** at the end of the script file. I changed it and this solved the bulk of the problem. Also, the **font was loading a bit slow**, but separating it into a **different .css file** and loading it first seemed to help with that as well.
+
+### Theme summary
+Light theme is opt-in currently. I may use <span class="code-block-wrap"><span class="magenta">prefers-color-scheme</span>: <span class="green">light</span></span> later as a fallback, if no preference was set by the user, but **luna-eclipsed** (dark mode) is the default color scheme for now. If however you are one of _those guys_ who like their retinas burned to crisp, feel free to use **sweet-celestial** (light mode). Both of them can be found on the side panel under <span class="magenta">I want different colors</span>.
+
+While I was making the light theme, I just had to reuse the system and make a hidden easter egg theme as well. It's not really usable for reading, but it's fun. Try finding it!
+- Hint 1: ||spoiler1||Try looking around where the rest of the theme selectors are.||
+- Hint 2: ||spoiler2||You have to click on a specific spot.||
+- Hint 3: ||spoiler3||It's to the right of "ls ~/themes/"||
+
+## Blogpostception
+I also had to implement a few things for _writing_ this post. For example, I **styled some new elements**, like lists or the quote at the top of the post. I made marko extensions for the quote, the fake html tags ({{whisper}}psst... hey... like this one!{{}}), and for the spoiler tags||, spoiler4||, which almost made me lose my mind. The css just didn't want to work||.
+
+The **spoiler text** was tricky, because I wanted them to be clickable (rather than using some hover event) without the usage of javascript. In the end I used a **hidden checkbox with two labels**, of which only one is displayed at a time. This way for the hidden text I could display a series of rectangles <span class="nobr">(▉ [<- this is not a spoiler])</span>, so you can't accidentally spoil yourself with selection. Try selecting the following text, without clicking on it: ||spoiler5||Now you see me!||
+However I had to **keep the whitespaces** so that the lines still wrap the same way as if they had normal content. 
+
+Here's the **html** code for the spoiler above:
+
+<div class="code-block">
+<p><span class="cyan">&lt</span><span class="yellow">span</span><span class="cyan">&gt</span>
+    <span class="cyan">&lt</span><span class="yellow">input</span> <span class="yellow">type</span><span class="cyan">=</span><span class="red">"checkbox"</span> <span class="yellow">class</span><span class="cyan">=</span><span class="red">"spoiler"</span> <span class="yellow">id</span><span class="cyan">=</span><span class="red">"spoiler5"</span><span class="cyan">&gt</span>
+    <span class="cyan">&lt</span><span class="yellow">label</span> <span class="yellow">class</span><span class="cyan">=</span><span class="red">"spoiler-on"</span> <span class="yellow">for</span><span class="cyan">=</span><span class="red">"spoiler5"</span><span class="cyan">&gt</span>
+        <span class="cyan">&lt</span><span class="yellow">span</span><span class="cyan">&gt</span>▉▉▉ ▉▉▉ ▉▉▉ ▉▉▉<span class="cyan">&lt/</span><span class="yellow">span</span><span class="cyan">&gt</span>
+    <span class="cyan">&lt/</span><span class="yellow">label</span><span class="cyan">&gt</span>
+    <span class="cyan">&lt</span><span class="yellow">label</span> <span class="yellow">class</span><span class="cyan">=</span><span class="red">"spoiler-off"</span> <span class="yellow">for</span><span class="cyan">=</span><span class="red">"spoiler5"</span><span class="cyan">&gt</span>
+        <span class="cyan">&lt</span><span class="yellow">span</span><span class="cyan">&gt</span>Now you see me!<span class="cyan">&lt/</span><span class="yellow">span</span><span class="cyan">&gt</span>
+    <span class="cyan">&lt/</span><span class="yellow">label</span><span class="cyan">&gt</span>
+<span class="cyan">&lt/</span><span class="yellow">span</span><span class="cyan">&gt</span></p>
+</div>
+
+And the **css**:
+
+<div class="code-block">
+<p>.<span class="yellow">spoiler</span> {
+    <span class="green">position</span>: <span class="red">absolute</span>;
+    <span class="green">left</span>: <span class="blue">-10000px</span>;
+}</p>
+<br>
+<p>.<span class="yellow">spoiler</span>:<span class="magenta">checked</span> ~ <span class="yellow">label</span>.<span class="yellow">spoiler-on</span>,
+.<span class="yellow">spoiler</span>:<span class="magenta">not</span>(:<span class="magenta">checked</span>) ~ <span class="yellow">label</span>.<span class="yellow">spoiler-off</span> {
+    <span class="green">display</span>: <span class="red">none</span>;
+}</p>
+<br>
+<p><span class="yellow">label</span>.<span class="yellow">spoiler-on</span> {
+    <span class="green">background-color</span>: <span class="magenta">var</span>(<span class="blue">--term-fg</span>);
+}</p>
+<br>
+<p><span class="yellow">label</span>.<span class="yellow">spoiler-off</span> {
+    <span class="green">background-color</span>: <span class="magenta">var</span>(<span class="blue">--term-black</span>);
+}</p>
+</div>
+
+I had to use an ugly workaround for the checkbox (<span class="code-block-wrap">.<span class="yellow">spoiler</span></span>). When I set it to <span class="code-block-wrap"><span class="green">display</span>: <span class="red">none</span></span> it was sometimes **scrolling around** on the page, trying to find the position of the checkbox. By keeping it "visible" (just -10000 pixels to the left of the screen), the browser **thinks it's on the screen**, so it does not start to jump around.
+
+## Afterwords
+I still have some things to do on the blog, and especially on the other subdomains, but this blogpost is getting too long already. And I'm tired.
+
+So see you in the next one, I guess!
\ No newline at end of file
diff --git a/posts/still-working-on-this/main_domain.webp b/posts/still-working-on-this/main_domain.webp
new file mode 100644
index 0000000..5b689ff
--- /dev/null
+++ b/posts/still-working-on-this/main_domain.webp
diff --git a/posts/still-working-on-this/meta.json b/posts/still-working-on-this/meta.json
new file mode 100644
index 0000000..6bdd67e
--- /dev/null
+++ b/posts/still-working-on-this/meta.json
@@ -0,0 +1,9 @@
+{
+  "title" : "Still working on this website",
+  "publish_date" : "2024-09-22",
+  "tags" : [
+    "website",
+	"css",
+	"javascript"
+  ]
+}