Merge pull request #40 from de-soot/main

fixed posts and edited fonts and line spacing etc

_posts/2024-09-07-dark-mode.md

@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Add Dark Mode to Websites with CSS @media Queries (No JS)
+title: Dark Mode on Websites 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

_posts/2024-09-07-justify-text.md

@@ -1,15 +1,15 @@
 ---
 layout: post
-title: Reponsive Web Text with Auto Justify and Hyphens Using Only CSS
+title: Justify and Hyphenate Text on Websites using CSS
 date: 2024-09-07
 categories: justify, text-align, jekyll, css
 permalink: /justify-text
 ---
 
-You may have noticed the way the text are aligned in my blog posts are a little different from the usual way other websites normally align them, and 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 and hyphenated the text on my website so it looks a whole lot cleaner and easier to read than if I had left it in its default jagged-right form as-is.
+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.
 
 # 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 its a no-brainer unless your target audience has a user-agent that does not support CSS `hyphens` property for some reason.
+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.
 
 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:
 
@@ -27,17 +27,23 @@ Great! So now your text wraps words using hyphens, but there is still jaggedness
 body {
     ...
     text-align: justify;
+}
 ```
 
 This will justify your text so it all aligns neatly.
 
-# Other Blogs That Use Justify
-~~Here are a list of other blogsites that I know of that use justified text:~~
-
-As of right now, I only know of one, and that is:
-
-Chris Noxz's [noxz.tech][noxz], which renders static HTML from [`groff`][groff].
+# 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].
+- Simon Johnston's [simonkjohnston.life][simon], which does not use hyphenation.
+- Kyle Mcdonald's [kylemcdonald.net][kyle], which also does not hyphenate.
+- Public Delivery's [publicdelivery.org][pubdeliver], which also justifies without hyphens.
+- JPEG XL's [jpegxl.info][jpg], which had fixed its un-hyphenated text.
 
+[jpg]: https://jpegxl.info 
 [noxz]: https://noxz.tech
+[kyle]: https://kylemcdonald.net/psac
+[simon]: https://simonkjohnston.life
 [groff]: https://www.gnu.org/software/groff
+[pubdeliver]: https://publicdelivery.org
 [hyphenopoly]: https://mnater.github.io/Hyphenopoly

_site/404.html

@@ -9,16 +9,16 @@
 <meta property="og:locale" content="en_US" />
 <meta name="description" content="hosted on github pages" />
 <meta property="og:description" content="hosted on github pages" />
-<link rel="canonical" href="https://de-soot.github.io/404.html" />
-<meta property="og:url" content="https://de-soot.github.io/404.html" />
+<link rel="canonical" href="http://localhost:4000/404.html" />
+<meta property="og:url" content="http://localhost:4000/404.html" />
 <meta property="og:site_name" content="de_soot" />
 <meta property="og:type" content="website" />
 <meta name="twitter:card" content="summary" />
 <meta property="twitter:title" content="de_soot" />
 <script type="application/ld+json">
-{"@context":"https://schema.org","@type":"WebPage","description":"hosted on github pages","headline":"de_soot","url":"https://de-soot.github.io/404.html"}</script>
+{"@context":"https://schema.org","@type":"WebPage","description":"hosted on github pages","headline":"de_soot","url":"http://localhost:4000/404.html"}</script>
 <!-- End Jekyll SEO tag -->
-<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="https://de-soot.github.io/feed.xml" title="de_soot" /></head>
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
 <body><header class="site-header" role="banner">
 
   <div class="wrapper"><a class="site-title" rel="author" href="/">de_soot</a><nav class="site-nav">

_site/about.html

@@ -9,16 +9,16 @@
 <meta property="og:locale" content="en_US" />
 <meta name="description" content="hosted on github pages" />
 <meta property="og:description" content="hosted on github pages" />
-<link rel="canonical" href="https://de-soot.github.io/about" />
-<meta property="og:url" content="https://de-soot.github.io/about" />
+<link rel="canonical" href="http://localhost:4000/about" />
+<meta property="og:url" content="http://localhost:4000/about" />
 <meta property="og:site_name" content="de_soot" />
 <meta property="og:type" content="website" />
 <meta name="twitter:card" content="summary" />
 <meta property="twitter:title" content="About" />
 <script type="application/ld+json">
-{"@context":"https://schema.org","@type":"WebPage","description":"hosted on github pages","headline":"About","url":"https://de-soot.github.io/about"}</script>
+{"@context":"https://schema.org","@type":"WebPage","description":"hosted on github pages","headline":"About","url":"http://localhost:4000/about"}</script>
 <!-- End Jekyll SEO tag -->
-<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="https://de-soot.github.io/feed.xml" title="de_soot" /></head>
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
 <body><header class="site-header" role="banner">
 
   <div class="wrapper"><a class="site-title" rel="author" href="/">de_soot</a><nav class="site-nav">

_site/assets/main.css

@@ -195,15 +195,17 @@ table td { border: 1px solid #e8e8e8; }
 .highlight .vi { color: #008080; }
 .highlight .il { color: #099; }
 
-body { background-color: #fafafa; font-family: serif; hyphens: auto; text-align: justify; }
+body { background-color: #fafafa; }
+
+h1, h2, h3, p, ol, ul { font-family: serif; }
 
 h1 { color: #0d0d0d; }
 
 h2 { color: #1a1a1a; }
 
 h3 { color: #262626; }
 
-p { color: #333333; }
+p, ol, ul { color: #333333; hyphens: auto; text-align: justify; line-height: 1.75; }
 
 @media (prefers-color-scheme: dark) { body { background-color: #262626; }
   h1 { color: #f2f2f2; }

_site/dark-mode.html

@@ -3,23 +3,23 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1"><!-- Begin Jekyll SEO tag v2.8.0 -->
-<title>Add Dark Mode to Websites with CSS @media Queries (No JS) | de_soot</title>
+<title>Dark Mode on Websites with CSS @media Queries | de_soot</title>
 <meta name="generator" content="Jekyll v3.10.0" />
-<meta property="og:title" content="Add Dark Mode to Websites with CSS @media Queries (No JS)" />
+<meta property="og:title" content="Dark Mode on Websites with CSS @media Queries" />
 <meta property="og:locale" content="en_US" />
 <meta name="description" content="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." />
 <meta property="og:description" content="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." />
-<link rel="canonical" href="https://de-soot.github.io/dark-mode" />
-<meta property="og:url" content="https://de-soot.github.io/dark-mode" />
+<link rel="canonical" href="http://localhost:4000/dark-mode" />
+<meta property="og:url" content="http://localhost:4000/dark-mode" />
 <meta property="og:site_name" content="de_soot" />
 <meta property="og:type" content="article" />
 <meta property="article:published_time" content="2024-09-07T00:00:00+08:00" />
 <meta name="twitter:card" content="summary" />
-<meta property="twitter:title" content="Add Dark Mode to Websites with CSS @media Queries (No JS)" />
+<meta property="twitter:title" content="Dark Mode on Websites with CSS @media Queries" />
 <script type="application/ld+json">
-{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"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.","headline":"Add Dark Mode to Websites with CSS @media Queries (No JS)","mainEntityOfPage":{"@type":"WebPage","@id":"https://de-soot.github.io/dark-mode"},"url":"https://de-soot.github.io/dark-mode"}</script>
+{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"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.","headline":"Dark Mode on Websites with CSS @media Queries","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
 <!-- End Jekyll SEO tag -->
-<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="https://de-soot.github.io/feed.xml" title="de_soot" /></head>
+<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
 <body><header class="site-header" role="banner">
 
   <div class="wrapper"><a class="site-title" rel="author" href="/">de_soot</a><nav class="site-nav">
@@ -40,7 +40,7 @@
         <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="post-header">
-    <h1 class="post-title p-name" itemprop="name headline">Add Dark Mode to Websites with CSS @media Queries (No JS)</h1>
+    <h1 class="post-title p-name" itemprop="name headline">Dark Mode on Websites with CSS @media Queries</h1>
     <p class="post-meta">
       <time class="dt-published" datetime="2024-09-07T00:00:00+08:00" itemprop="datePublished">Sep 7, 2024
       </time></p>