de-soot
diff --git a/‎_posts/2024-05-24-giscus-comments.md‎
Lines changed: 5 additions & 3 deletions b/‎_posts/2024-05-24-giscus-comments.md‎
Lines changed: 5 additions & 3 deletions
diff --git a/‎_posts/2024-09-07-dark-mode.md‎
Lines changed: 10 additions & 12 deletions b/‎_posts/2024-09-07-dark-mode.md‎
Lines changed: 10 additions & 12 deletions
diff --git a/‎_posts/2024-09-07-justify-text.md‎
Lines changed: 8 additions & 10 deletions b/‎_posts/2024-09-07-justify-text.md‎
Lines changed: 8 additions & 10 deletions
@@ -6,21 +6,23 @@ categories: comments, giscus, github pages, github discussions, static websites
 permalink: /giscus-comments
 ---
 
+## Preamble
+
 I added a commenting feature for the blog using [giscus][giscus]. Basically, it uses [Github Discussions][discussions-docs] to store comments instead of storing it in its own database on the web server. Since this website is hosted on [Github Pages][pages-docs] and Pages only supports static websites, it cannot host its own databases to store things such as comments. This guide explains how to add giscus comments to statically-hosted websites, and some quirks and caveats with using Github Discussions as a database for your comments.
 
-# Try it
+## Try it
 
 You can test it out yourself on this blog post in the comments below by signing into your Github account and commenting, or you can comment on the [Github Discussions post](https://github.com/de-soot/de-soot.github.io/discussions/22) directly and it will show up on the comments section on the website similarly.
 
-# Add it to your own Github Pages website
+## Add it to your own Github Pages website
 
 1) Make sure to enable Github Discussions on your website's Github repository.
 
 2) Navigate to `giscus.app` on your browser's address bar and follow the instructions under the "Configuration" section to configure your `<script>` tag attribute values.
 
 3) After you have done so, you can simply copy and paste it into your webpage!
 
-# Note
+## Note
 
 Giscus finds and links the comments to the Github Discussions by searching through and matching URLs, path names, titles, and other such metadata. If you try to change a page's title without editing the associated Github Discussion accordingly, it may lead to giscus not being able to find and link it to the Github Discussion (this is especially noticible if you set the `<script>`'s `data-strict` attribute value to `"1"`), and hence Giscus will create a new Github Discussion.
 
 
@@ -2,30 +2,28 @@
 layout: post
 title: Dark Mode without Javascript
 date: 2024-09-07
-categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static site generators, system default
+categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static site generators, system default theme, website, webpage, customisation
 permalink: /dark-mode
 ---
 
-This guide explains why and how to easily make a dark theme for your website using CSS `@media` queries.
+Alternative title: System default theme for webpages
 
-Alternative title: System default theme for websites
-
-# Why Dark Mode
+## Why 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.">
 
-# How to do it
+## How to do it
 
 From [MDN Web Docs][mdn]:
 > The @media [CSS][css] [at-rule][at-rule] can be used to apply part of a [style sheet][style-sheet] based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
 
-## For Non-Static-Site-Generator Websites
+### For Non-Static-Site-Generator Websites
 
 There is also a [video guide by Eric Murphy on Youtube][yt-vid] if you prefer to follow along with a video.
 
-### External Style Sheet
+#### External Style Sheet
 
 To separate code between HTML and CSS, link an external CSS style sheet in the `<head>` tag in the HTML document. Like so:
 
@@ -54,7 +52,7 @@ And in your `styles.css`:
 }
 ```
 
-### With the \<style> HTML tag
+#### With the \<style> HTML tag
 
 You can also type out your CSS code in between `<style>` tags if you prefer everything to be contained in one HTML document:
 
@@ -79,7 +77,7 @@ You can also type out your CSS code in between `<style>` tags if you prefer ever
 </html>
 ```
 
-## For Static Site Generator Websites
+### For Static Site Generator Websites
 
 It is a little bit less straightforward to do this with static site generators like Jekyll (which is what this website uses) or Hugo, as you have to override the theme's CSS style sheet.
 
@@ -110,7 +108,7 @@ And you should get something like this after adding the dark mode code.
 
 For other static site generator websites, you can refer to the official documentation found online for information on how to override your theme's style-sheet.
 
-# Configure Giscus Theme
+## Configure Giscus Theme
 
 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.
 
@@ -126,7 +124,7 @@ To set `giscus` comments to match the website if you have done the CSS `@media`
 </script>
 ```
 
-# Conclusion
+## Conclusion
 
 If you found this blog post useful, leave a comment down below! Also check out how to add `giscus` comments to your own website on my [previous guide for it](/giscus-comments).
 
 
@@ -6,11 +6,9 @@ categories: justify, text-align, jekyll, css, static site generator
 permalink: /justify-text
 ---
 
-This blog guide goes into why and how to justify and hyphenate text on your website without Javascript.
+## For Static-Site-Generator Websites
 
-# For Static-Site-Generator Websites
-
-It is a little bit less straightforward to do this with static site generators like Jekyll (which is what this website uses) or Hugo, you will have to override the theme's CSS style sheet.
+It is a little bit less straightforward to follow this guide with static site generators like Jekyll (which is what this website also uses) or Hugo, you will have to override the theme's CSS style sheet.
 
 There is a [blog post by Tom Kadwill on how to override your CSS styles in Jekyll][css-blog] you can follow to create your SCSS file, and after which you should get something resembling this:
 
@@ -23,11 +21,11 @@ There is a [blog post by Tom Kadwill on how to override your CSS styles in Jekyl
 
 After this, you can follow all the steps below the same way as it would be done if you were using CSS in a non-static-site-generator instead of SCSS in a static site generator.
 
-# Why Justify Text
+## Why Justify Text
 
 It is more of an aesthetic preference than anything. This jaggedness generally does not bother people that much because they have grown used to the popular left-aligned style of text on the web and probably do not know justification even exists on the web, only on printed books and newspapers. But it just looks better to me when all lines are the same length and the right side of text is not jagged. Justifcation is a way of acheiving that aesthetic goal without cutting words off abruptly.
 
-# How to Justify
+## How to Justify
 
 It is actually pretty simple. To justify your body text, just add this to your CSS style sheet:
 
@@ -37,7 +35,7 @@ body {
 }
 ```
 
-# Why Hyphenate
+## Why Hyphenate
 
 Text justification can make your paragraphs look tidier, but it has the 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'. This effect is known to make text harder for dyslexic readers to read, decreasing accessibility.
 
@@ -49,7 +47,7 @@ By hyphenating, even though it does not solve the problem completely, it will re
 
 Hyphenating text will cut off some words at the end of lines (indicated by an auto-inserted hyphen), but it will do it with an algorithm that tries to make it seamless.
 
-# How to Hyphenate
+## How to Hyphenate
 
 Although there is a way to hyphenate with Javascript using [Hyphenopoly.js][hyphenopoly], there already is a built-in functionality in CSS to do this and it is [widely supported by browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens).
 
@@ -61,7 +59,7 @@ body {
 }
 ```
 
-# Other Blogs That Justify
+## Other Blogs That Justify
 
 Here are a list of other blogsites that I know of that use justified text:
 - Chris Noxz's [noxz.tech][noxz], which renders static HTML from [`groff`][groff].
@@ -70,7 +68,7 @@ Here are a list of other blogsites that I know of that use justified text:
 - Public Delivery's [publicdelivery.org][pubdeliver], which also justifies without hyphens.
 - JPEG XL's [jpegxl.info][jpg], which had fixed its un-hyphenated text.
 
-# Conclusion
+## Conclusion
 
 f you found this blog post useful, leave a comment down below! Also read how to add reactive dark-mode to your website in my [previous blog post](/dark-mode).