From d4498941505ac6ad9ccedbc300fc8942efbe48dc Mon Sep 17 00:00:00 2001 From: de-soot <78423238+de-soot@users.noreply.github.com> Date: Mon, 9 Sep 2024 21:46:06 +0800 Subject: [PATCH] fixed justify post and edited fonts and line spacing etc --- _posts/2024-09-07-dark-mode.md | 2 +- _posts/2024-09-07-justify-text.md | 24 ++++++++++++------- _site/404.html | 8 +++---- _site/about.html | 8 +++---- _site/assets/main.css | 6 +++-- _site/dark-mode.html | 16 ++++++------- _site/feed.xml | 22 ++++++++++------- _site/giscus-comments.html | 8 +++---- _site/index.html | 12 +++++----- _site/justify-text.html | 40 +++++++++++++++++-------------- _site/robots.txt | 2 +- assets/main.scss | 20 +++++++++------- 12 files changed, 94 insertions(+), 74 deletions(-) diff --git a/_posts/2024-09-07-dark-mode.md b/_posts/2024-09-07-dark-mode.md index bd149a2..54eedbb 100644 --- a/_posts/2024-09-07-dark-mode.md +++ b/_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 diff --git a/_posts/2024-09-07-justify-text.md b/_posts/2024-09-07-justify-text.md index be5c262..a00fe11 100644 --- a/_posts/2024-09-07-justify-text.md +++ b/_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 diff --git a/_site/404.html b/_site/404.html index 24b2c5f..eb085bb 100644 --- a/_site/404.html +++ b/_site/404.html @@ -9,16 +9,16 @@ - - + + +{"@context":"https://schema.org","@type":"WebPage","description":"hosted on github pages","headline":"de_soot","url":"http://localhost:4000/404.html"} - +