You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
9
+
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.
10
10
11
11
# Try it
12
12
13
-
You can test it out yourself in the comments on blog post below by signing into your github account and commenting, or you can comment on the repository's Github Discussions directly and it will show up on the comments section on the website similarly.
13
+
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 repository's Github Discussions directly and it will show up on the comments section on the website similarly.
14
14
15
15
# Add it to your own Github Pages website
16
16
@@ -20,8 +20,6 @@ You can test it out yourself in the comments on blog post below by signing into
20
20
21
21
3) After you have done so, you can simply copy and paste it into your webpage!
22
22
23
-
---
24
-
25
23
# Note
26
24
27
25
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.
Copy file name to clipboardExpand all lines: _posts/2024-09-07-dark-mode.md
+13-11
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,15 @@
1
1
---
2
2
layout: post
3
-
title: Dark Mode with CSS @media Queries
3
+
title: Dark Mode without Javascript
4
4
date: 2024-09-07
5
-
categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static websites
5
+
categories: dark mode, dark theme, night mode, night theme, colour scheme, jekyll, css, github pages, static site generators, system default
6
6
permalink: /dark-mode
7
7
---
8
8
9
+
This guide explains why and how to easily make a dark theme for your website using CSS `@media` queries.
10
+
11
+
Alternative title: System default theme for websites
12
+
9
13
# Why Dark Mode
10
14
11
15
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.
@@ -19,7 +23,7 @@ From [MDN Web Docs][mdn]:
19
23
20
24
## For Non-Static-Site-Generator Websites
21
25
22
-
There also exists a [video guide by Eric Murphy on Youtube][yt-vid] if you prefer to follow along with a video.
26
+
There is also a [video guide by Eric Murphy on Youtube][yt-vid] if you prefer to follow along with a video.
23
27
24
28
### External Style Sheet
25
29
@@ -75,11 +79,11 @@ You can also type out your CSS code in between `<style>` tags if you prefer ever
75
79
</html>
76
80
```
77
81
78
-
## For Static-Site-Generator Websites
82
+
## For StaticSiteGenerator Websites
79
83
80
-
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.
84
+
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.
81
85
82
-
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 that resembles this:
86
+
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:
83
87
84
88
```css
85
89
---
@@ -104,7 +108,7 @@ And you should get something like this after adding the dark mode code.
104
108
}
105
109
```
106
110
107
-
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.
111
+
For other staticsitegenerator websites, you can refer to the official documentation found online for information on how to override your theme's style-sheet.
108
112
109
113
# Configure Giscus Theme
110
114
@@ -124,11 +128,9 @@ To set `giscus` comments to match the website if you have done the CSS `@media`
124
128
125
129
# Why Not Use a Toggleable Button Instead
126
130
127
-
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.
128
-
129
-
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.
131
+
Most likely those who prefer only using one theme will set it in their browser settings, so it would be redundant to have them click another button to toggle the theme on a website.
130
132
131
-
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].
133
+
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 switch to their system default or preferred browser theme.
Copy file name to clipboardExpand all lines: _posts/2024-09-07-justify-text.md
+35-17
Original file line number
Diff line number
Diff line change
@@ -2,47 +2,64 @@
2
2
layout: post
3
3
title: Justify and Hyphenate Text on Websites using CSS
4
4
date: 2024-09-07
5
-
categories: justify, text-align, jekyll, css
5
+
categories: justify, text-align, jekyll, css, static site generator
6
6
permalink: /justify-text
7
7
---
8
8
9
-
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.
9
+
This blog guide goes into why and how to justify and hyphenate text on your website without Javascript.
10
10
11
-
# How to Justify
11
+
# For Static-Site-Generator Websites
12
+
13
+
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.
12
14
13
-
It is actually pretty simple --- to justify your body text, just add this to your CSS style sheet:
15
+
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:
14
16
15
17
```css
16
-
body {
17
-
text-align: justify;
18
-
}
18
+
---
19
+
---
20
+
21
+
@import"minima"; /* replace minima inside the quotes with your Jekyll theme */
19
22
```
20
23
21
-
This will justify your text so it all aligns neatly without jagged edges.
24
+
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.
22
25
23
-
# How to Hyphenate
26
+
# Why Justify Text
24
27
25
-
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.
28
+
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.
26
29
27
-
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:
30
+
# How to Justify
31
+
32
+
It is actually pretty simple. To justify your body text, just add this to your CSS style sheet:
28
33
29
34
```css
30
35
body {
31
-
hyphens: auto
36
+
text-align: justify;
32
37
}
33
38
```
34
39
35
40
# Why Hyphenate
36
41
37
-
So now your text wraps words using hyphens, but why do we need to use hyphens that ruin the perfect edges that justifying makes?
38
-
39
-
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.
42
+
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.
40
43
41
44
<imgsrc="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.">
42
45
43
-
This is also a common reason as to why justification is generally [not][applewood][recommended][max] for text output on the web.
46
+
This is why justification is generally [not][applewood][recommended][max] for text output on the web.
47
+
48
+
By hyphenating, even though it does not solve the problem completely, it will reduce this effect significantly while keeping text not jagged.
44
49
45
-
By hyphenating, even though it does not solve it completely, it will reduce the effect dramatically.
50
+
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.
51
+
52
+
# How to Hyphenate
53
+
54
+
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).
55
+
56
+
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:
57
+
58
+
```css
59
+
body {
60
+
hyphens: auto
61
+
}
62
+
```
46
63
47
64
# Other Blogs That Justify
48
65
@@ -66,6 +83,7 @@ f you found this blog post useful, leave a comment down below! Also read how to
This guide explains why and how I used groff with the ms and refer macros to write my college essay in Neovim.
10
+
9
11
# Table of Contents <aname=tableofcontents></a>
10
12
11
13
1.[Table of Contents](/groff-apa#tableofcontents)
@@ -457,7 +459,7 @@ Below is a list explaining what each of the optional arguments mean:
457
459
458
460
# Conclusion <aname=conclusion></a>
459
461
460
-
If you found this helpful in any way or have any questions, feel free to leave a comment below.
462
+
If you found this helpful in any way or have any questions, feel free to leave a comment below. Also read my [previous guide](/justify-text) on how I justify and hyphenate the text on this website.
<metaproperty="twitter:title" content="Dark Mode with CSS @media Queries" />
18
+
<metaproperty="twitter:title" content="Dark Mode without Javascript" />
19
19
<scripttype="application/ld+json">
20
-
{"@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","headline":"Dark Mode with CSS @media Queries","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
20
+
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"This guide explains why and how to easily make a dark theme for your website using CSS @media queries.","headline":"Dark Mode without Javascript","mainEntityOfPage":{"@type":"WebPage","@id":"http://localhost:4000/dark-mode"},"url":"http://localhost:4000/dark-mode"}</script>
<p>This guide explains why and how to easily make a dark theme for your website using CSS <codeclass="language-plaintext highlighter-rouge">@media</code> queries.</p>
51
+
52
+
<p>Alternative title: System default theme for websites</p>
53
+
54
+
<h1id="why-dark-mode">Why Dark Mode</h1>
51
55
52
56
<p>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 <ahref="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme">dark mode</a> does.</p>
53
57
@@ -62,7 +66,7 @@ <h1 id="how-to-do-it">How to do it</h1>
<p>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.</p>
124
+
<p>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.</p>
121
125
122
-
<p>There is a <ahref="https://tomkadwill.com/2017/12/16/how-to-override-css-styles-in-jekyll">blog post by Tom Kadwill on how to override your CSS styles in Jekyll</a> you can follow to create your SCSS file and after which you should get something that resembles this:</p>
126
+
<p>There is a <ahref="https://tomkadwill.com/2017/12/16/how-to-override-css-styles-in-jekyll">blog post by Tom Kadwill on how to override your CSS styles in Jekyll</a> you can follow to create your SCSS file, and after which you should get something resembling this:</p>
<p>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.</p>
149
+
<p>For other staticsitegenerator websites, you can refer to the official documentation found online for information on how to override your theme’s style-sheet.</p>
<h1id="why-not-use-a-toggleable-button-instead">Why Not Use a Toggleable Button Instead</h1>
163
167
164
-
<p>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.</p>
165
-
166
-
<p>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.</p>
168
+
<p>Most likely those who prefer only using one theme will set it in their browser settings, so it would be redundant to have them click another button to toggle the theme on a website.</p>
167
169
168
-
<p>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 <ahref="https://www.javascript.com">Javascript</a>.</p>
170
+
<p>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 switch to their system default or preferred browser theme.</p>
0 commit comments