de-soot · de-soot · Jan 5, 2025 · Jan 5, 2025 · Jan 5, 2025
diff --git a/_posts/2024-09-07-dark-mode.md b/_posts/2024-09-07-dark-mode.md
@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Dark Mode on Websites with CSS @media Queries
+title: Dark Mode with CSS @media Queries
 date: 2024-09-07
 categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static websites
 permalink: /dark-mode
 ---
 
 # Why Dark Mode
 
-For users visiting your website in a dark room or at night, it is often less straining for the eyes if your webpage to be displayed in [dark mode][dark-mode].
+For users visiting a website in a dark room at night, it would be less straining for their eyes if the webpage was displayed in a darker colour to match the environment, which is what [dark mode][dark-mode] does.
 
 <img src="https://zerowidthjoiner.net/uploads/2020/04-11/light-vs-dark.png" alt="Comparison image of light theme on the left and dark theme on the right.">
 
@@ -19,12 +19,14 @@ From [MDN Web Docs][mdn]:
 
 ## For Non-Static-Site-Generator Websites
 
+There also exists a [video guide by Eric Murphy on Youtube][yt-vid] if you prefer to follow along with a video.
+
 ### External Style Sheet
 
-In your HTML document, you can either link an external CSS style sheet in your `<head>` if you wish to separate your code out more:
+To separate code between HTML and CSS, link an external CSS style sheet in the `<head>` tag in the HTML document. Like so:
 
 ```html
-<!-- something resembling this -->
+<!-- should resemble something like this -->
 <!DOCTYPE html>
 ...
 <html>
@@ -73,8 +75,6 @@ You can also type out your CSS code in between `<style>` tags if you prefer ever
 </html>
 ```
 
-There also exists a [video guide by Eric Murphy on Youtube on how to do this similarly][yt-vid] if you prefer to follow along with a video or if you find reading this blog-style guide boring becuase Tiktok and Instagram Reels have fried your zoomer ADHD brain beyond repair.
-
 ## For Static-Site-Generator Websites
 
 It is a little bit less straightforward to do this with a static site generator like Jekyll (which has native support with Github Pages and is what this website uses) or Hugo as you have to override the theme's CSS style sheet.
@@ -104,17 +104,11 @@ And you should get something like this after adding the dark mode code.
 }
 ```
 
-For other static-site-generator generated websites, you can refer to the official documentation found online for information on how to override your theme's CSS.
-
-# Why Not Use a Toggleable Button Instead (Rant Warning)
-
-Rather than defaulting to light or dark mode and having a separate button (that uses Javascript) for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser's preferred theme to. This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, or without toggling it to dark mode the last time they visited, or just simply because your website does not store cookies about their previously toggled theme either due to your lack of know how, respect for user privacy, or plain laziness.
-
-You can also include the button to toggle themes on the website alongside if you like having more buttons on your website for showing off your Javascript skills to potential employers (I know the tech job market out there is rough for fresh grads right now) or just want to follow the current web trend on including more and more unnecessary Javascript bloat on websites with features that can be done easily with simple HTML and CSS.
+For other static-site-generator websites, you can refer to the official documentation found online for information on how to override your theme's CSS.
 
 # Configure Giscus Theme
 
-To set it to match your website (if you have done the CSS `@media` trick shown above), simply set the `<script>`'s `data-theme` attribute value to `"preferred_color_scheme"` as shown below.
+To set `giscus` comments to match the website if you have done the CSS `@media` trick shown above, simply set the `<script>`'s `data-theme` attribute value to `"preferred_color_scheme"` as shown below.
 
 ```html
 <script src="https://giscus.app/client.js"
@@ -128,9 +122,18 @@ To set it to match your website (if you have done the CSS `@media` trick shown a
 </script>
 ```
 
-Read more on adding Giscus comments to your website at [my previous blog post about it][giscus-blog].
+# Why Not Use a Toggleable Button Instead
+
+Rather than defaulting to light or dark mode and having a separate button for the user to manually switch to their preferred theme, it might be better to automatically default to what they already set their browser's preferred theme to.
+
+This is so they do not get flashbanged by their monitors at night if your website defaults to light theme and they open their browser to your website for the first time, if they did not toggle it to dark mode the last time they visited, or if your website does not store cookies about their previously toggled theme.
+
+You can also include the button to toggle themes on the website alongside defaulting it if you want, but I find this an unnecessary use of [Javascript][js].
+
+If you found this blog post useful, leave a comment down below! Check out how to add `giscus` comments to your own website on [my previous blog post guide for it][giscus-blog].
 
 [mdn]: https://developer.mozilla.org/en-US
+[js]: https://www.javascript.com
 [css]: https://developer.mozilla.org/en-US/docs/Web/CSS
 [at-rule]: https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
 [style-sheet]: https://en.wikipedia.org/wiki/Style_sheet_(web_development)

diff --git a/_posts/2024-09-07-justify-text.md b/_posts/2024-09-07-justify-text.md
@@ -6,43 +6,43 @@ categories: justify, text-align, jekyll, css
 permalink: /justify-text
 ---
 
-You may have noticed while reading my blog posts that the way the text are aligned are a little different from the usual way the ones from other websites are --- that they always align as blocks of text no matter how you change your browser window's size. This is because using CSS, I have justified the text on my website.
+You may have noticed while reading my blog posts that the way the text are aligned are a little different from the usual way the ones from other websites are --- that they always align as blocks of text no matter how you change your browser window's size. This is because I have justified the text on my website using CSS.
 
 # How to Justify
 
 It is actually pretty simple --- to justify your body text, just add this to your CSS style sheet:
 
 ```css
 body {
-    ...
     text-align: justify;
 }
 ```
 
-This will justify your text so it all aligns neatly in a block-like shape.
+This will justify your text so it all aligns neatly without jagged edges.
 
 # How to Hyphenate
 
-Though there is a way to do this with Javascript using [Hyphenopoly.js][hyphenopoly], hyphenation already has built-in functionality in CSS and it is widely supported by browsers, so it is a no-brainer to do it the CSS way, unless your target audience has a `user-agent` that does not support CSS' `hyphens` property for some reason.
+Although there is a way to do this with Javascript using [Hyphenopoly.js][hyphenopoly], hyphenation is a built-in functionality in CSS and it is widely supported by browsers.
 
 To add hyphenation to your body text, simply add the `hyphens` property to your body section in your CSS style sheet and set it to `auto`, like so:
 
 ```css
 body {
-    ...
     hyphens: auto
 }
 ```
 
-So now your text wraps words using hyphens, but why do we need to use hyphens when we can make blocks of text by just justifying?
-
 # Why Hyphenate
 
-Text justification can make your paragraphs look tidier, but this has the potential side-effect of awkwardly stretching out whitespace in between words --- which can create or worsen an often undesirable effect commonly referred to as 'rivers of white,' which are known to trip up dyslexic readers, making your writing less accessible as a result.
+So now your text wraps words using hyphens, but why do we need to use hyphens that ruin the perfect edges that justifying makes?
+
+Text justification can make your paragraphs look tidier, but this has the potential side-effect of awkwardly stretching out the whitespace between words --- which can create and worsen an undesirable effect commonly referred to as 'rivers of white', which is known to trip up dyslexic readers and decrease accessibility.
 
 <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Typographic_river_marking.svg/1280px-Typographic_river_marking.svg.png" alt="Image from Wikipedia with visual marking around an example of a 'rivers of white' effect.">
 
-This is also a highly-cited reason as to why justification is generally [not][applewood] [recommended][max] for text output on browsers and on the web.
+This is also a common reason as to why justification is generally [not][applewood] [recommended][max] for text output on the web.
+
+By hyphenating, even though it does not solve it completely, it will reduce the effect dramatically.
 
 # Other Blogs That Justify
 
@@ -62,3 +62,20 @@ Here are a list of other blogsites that I know of that use justified text:
 [applewood]: https://applewoodinteractive.com/accessibility/rivers-of-white-why-you-should-never-justify-your-text 
 [pubdeliver]: https://publicdelivery.org
 [hyphenopoly]: https://mnater.github.io/Hyphenopoly
+
+<script src="https://giscus.app/client.js"
+        data-repo="de-soot/de-soot.github.io"
+        data-repo-id="R_kgDOK6_5tA"
+        data-category="Announcements"
+        data-category-id="DIC_kwDOK6_5tM4CflCT"
+        data-mapping="title"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="top"
+        data-theme="preferred_color_scheme"
+        data-lang="en"
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script>
diff --git a/_site/404.html b/_site/404.html
@@ -68,7 +68,7 @@ <h2 class="footer-heading">de_soot</h2>
     <div class="footer-col-wrapper">
       <div class="footer-col footer-col-1">
         <ul class="contact-list">
-          <li class="p-name">de_soot</li><li><a class="u-email" href="mailto:[email protected]">[email protected]</a></li></ul>
+          <li class="p-name">de_soot</li></ul>
       </div>
 
       <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/de-soot"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">de-soot</span></a></li></ul>

diff --git a/_site/about.html b/_site/about.html
@@ -43,7 +43,7 @@ <h1 class="post-title">About</h1>
   </header>
 
   <div class="post-content">
-    <p>This is the website where I write about whatever inspires me to write in form of <a href="/blogs">blogs</a>. It is made using <a href="https://jekyllrb.com">Jekyll</a>’s <a href="https://github.com/jekyll/minima">Minima</a> theme and is hosted for free on <a href="https://pages.github.com">Github Pages</a>.</p>
+    <p>This is the website where I write about whatever inspires me to write in form of <a href="/">blogs</a>. It is made using <a href="https://jekyllrb.com">Jekyll</a>’s <a href="https://github.com/jekyll/minima">Minima</a> theme and is hosted for free on <a href="https://pages.github.com">Github Pages</a>.</p>
 
 <p>The <code class="language-plaintext highlighter-rouge">source code</code> for this website can be found on its <a href="https://github.com/de-soot/de-soot.github.io">Github repository</a>.</p>
 
@@ -63,7 +63,7 @@ <h2 class="footer-heading">de_soot</h2>
     <div class="footer-col-wrapper">
       <div class="footer-col footer-col-1">
         <ul class="contact-list">
-          <li class="p-name">de_soot</li><li><a class="u-email" href="mailto:[email protected]">[email protected]</a></li></ul>
+          <li class="p-name">de_soot</li></ul>
       </div>
 
       <div class="footer-col footer-col-2"><ul class="social-media-list"><li><a href="https://github.com/de-soot"><svg class="svg-icon"><use xlink:href="/assets/minima-social-icons.svg#github"></use></svg> <span class="username">de-soot</span></a></li></ul>

diff --git a/_site/assets/main.css b/_site/assets/main.css
@@ -197,15 +197,13 @@ table td { border: 1px solid #e8e8e8; }
 
 body { background-color: #fafafa; font-size: 1.2rem; }
 
-h2, h3, p, ol, ul { font-family: serif; }
-
 h1 { color: #0d0d0d; font-family: sans-serif; font-weight: bold; }
 
-h2 { color: #1a1a1a; }
+h2 { color: #1a1a1a; font-family: sans-serif; }
 
-h3 { color: #262626; }
+h3 { color: #262626; font-family: sans-serif; }
 
-p, ol, ul { color: #333333; hyphens: auto; text-align: justify; line-height: 1.75; }
+p, ol, ul { font-family: serif; color: #333333; hyphens: auto; text-align: justify; line-height: 1.75; }
 
 @media (prefers-color-scheme: dark) { body { background-color: #262626; }
   h1 { color: #f2f2f2; }