Skip to content

edited 2nd diff post #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
de-soot merged 1 commit into from
Dec 11, 2025
Merged

edited 2nd diff post #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions _posts/2025-12-10-2nd-diff.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,13 +110,13 @@ Again, because it goes from (d<sub>1</sub>)<sub>1</sub> to (d<sub>1</sub>)<sub>n

T<sub>n</sub> = a<sub>1</sub> + (n - 1)a<sub>2</sub> + ((1 + 2 + 3 + ... + (n - 3) + (n - 2) + (n - 1)) + (n - 1)(-1))d<sub>2</sub>.

Now the pattern is easier to see. It is the sum of integers to (n - 1):
Now the pattern is easier to see. It is the sum of integers from 1 to (n - 1):

T<sub>n</sub> = a<sub>1</sub> + (n - 1)a<sub>2</sub> + (S<sub>n-1</sub> + (n - 1)(-1))d<sub>2</sub>

= a<sub>1</sub> + (n - 1)a<sub>2</sub> + (S<sub>n-1</sub> - (n - 1))d<sub>2</sub>.

Luckily for us, the great mathematician Gauss found a closed-form solution for finding the sum of integers to n when he was apparently 9 years-old or something (dubious):
Luckily for us, the great mathematician Gauss had already found a closed-form solution for finding the sum of integers from 1 to n when he was apparently 9 years-old or something (dubious):

T<sub>n</sub> = a<sub>1</sub> + (n - 1)a<sub>2</sub> + (1/2(n - 1)((n - 1) + 1) - (n - 1))d<sub>2</sub>

Expand Down
8 changes: 4 additions & 4 deletions _site/404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
<meta property="og:locale" content="en_US" />
<meta name="description" content="Technical blog" />
<meta property="og:description" content="Technical blog" />
<link rel="canonical" href="http://localhost:4000/404.html" />
<meta property="og:url" content="http://localhost:4000/404.html" />
<link rel="canonical" href="https://de-soot.github.io/404.html" />
<meta property="og:url" content="https://de-soot.github.io/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":"Technical blog","headline":"de_soot","url":"http://localhost:4000/404.html"}</script>
{"@context":"https://schema.org","@type":"WebPage","description":"Technical blog","headline":"de_soot","url":"https://de-soot.github.io/404.html"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
<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>
<body><header class="site-header" role="banner">

<div class="wrapper"><a class="site-title" rel="author" href="/">de_soot</a><nav class="site-nav">
Expand Down
12 changes: 7 additions & 5 deletions _site/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
<meta property="og:locale" content="en_US" />
<meta name="description" content="Technical blog" />
<meta property="og:description" content="Technical blog" />
<link rel="canonical" href="http://localhost:4000/about" />
<meta property="og:url" content="http://localhost:4000/about" />
<link rel="canonical" href="https://de-soot.github.io/about" />
<meta property="og:url" content="https://de-soot.github.io/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":"Technical blog","headline":"About","url":"http://localhost:4000/about"}</script>
{"@context":"https://schema.org","@type":"WebPage","description":"Technical blog","headline":"About","url":"https://de-soot.github.io/about"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
<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>
<body><header class="site-header" role="banner">

<div class="wrapper"><a class="site-title" rel="author" href="/">de_soot</a><nav class="site-nav">
Expand All @@ -43,7 +43,9 @@ <h1 class="post-title">About</h1>
</header>

<div class="post-content">
<p>Welcome to my website! <a href="/">This</a> is where I write about whatever I think is interesting or helpful. It is made with <a href="https://jekyllrb.com">Jekyll</a> using the <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>Welcome to my website! Here is where I write blog posts on technical topics.</p>

<p>It is made with <a href="https://jekyllrb.com">Jekyll</a> using the <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>

Expand Down
32 changes: 15 additions & 17 deletions _site/dark-mode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,19 @@
<meta name="generator" content="Jekyll v3.10.0" />
<meta property="og:title" content="Dark Mode without Javascript" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="This guide explains why and how to easily make a dark theme for your website using CSS @media queries." />
<meta property="og:description" content="This guide explains why and how to easily make a dark theme for your website using CSS @media queries." />
<link rel="canonical" href="http://localhost:4000/dark-mode" />
<meta property="og:url" content="http://localhost:4000/dark-mode" />
<meta name="description" content="Alternative title: System default theme for webpages" />
<meta property="og:description" content="Alternative title: System default theme for webpages" />
<link rel="canonical" href="https://de-soot.github.io/dark-mode" />
<meta property="og:url" content="https://de-soot.github.io/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="Dark Mode without Javascript" />
<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":"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>
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2024-09-07T00:00:00+08:00","datePublished":"2024-09-07T00:00:00+08:00","description":"Alternative title: System default theme for webpages","headline":"Dark Mode without Javascript","mainEntityOfPage":{"@type":"WebPage","@id":"https://de-soot.github.io/dark-mode"},"url":"https://de-soot.github.io/dark-mode"}</script>
<!-- End Jekyll SEO tag -->
<link rel="stylesheet" href="/assets/main.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="de_soot" /></head>
<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>
<body><header class="site-header" role="banner">

<div class="wrapper"><a class="site-title" rel="author" href="/">de_soot</a><nav class="site-nav">
Expand Down Expand Up @@ -47,28 +47,26 @@ <h1 class="post-title p-name" itemprop="name headline">Dark Mode without Javascr
</header>

<div class="post-content e-content" itemprop="articleBody">
<p>This guide explains why and how to easily make a dark theme for your website using CSS <code class="language-plaintext highlighter-rouge">@media</code> queries.</p>
<p>Alternative title: System default theme for webpages</p>

<p>Alternative title: System default theme for websites</p>

<h1 id="why-dark-mode">Why Dark Mode</h1>
<h2 id="why-dark-mode">Why Dark Mode</h2>

<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 <a href="https://en.wikipedia.org/wiki/Light-on-dark_color_scheme">dark mode</a> does.</p>

<p><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." /></p>

<h1 id="how-to-do-it">How to do it</h1>
<h2 id="how-to-do-it">How to do it</h2>

<p>From <a href="https://developer.mozilla.org/en-US">MDN Web Docs</a>:</p>
<blockquote>
<p>The @media <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule">at-rule</a> can be used to apply part of a <a href="https://en.wikipedia.org/wiki/Style_sheet_(web_development)">style sheet</a> 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.</p>
</blockquote>

<h2 id="for-non-static-site-generator-websites">For Non-Static-Site-Generator Websites</h2>
<h3 id="for-non-static-site-generator-websites">For Non-Static-Site-Generator Websites</h3>

<p>There is also a <a href="https://youtu.be/g85LQVp0hGM">video guide by Eric Murphy on Youtube</a> if you prefer to follow along with a video.</p>

<h3 id="external-style-sheet">External Style Sheet</h3>
<h4 id="external-style-sheet">External Style Sheet</h4>

<p>To separate code between HTML and CSS, link an external CSS style sheet in the <code class="language-plaintext highlighter-rouge">&lt;head&gt;</code> tag in the HTML document. Like so:</p>

Expand All @@ -95,7 +93,7 @@ <h3 id="external-style-sheet">External Style Sheet</h3>
<span class="p">}</span>
</code></pre></div></div>

<h3 id="with-the-style-html-tag">With the &lt;style&gt; HTML tag</h3>
<h4 id="with-the-style-html-tag">With the &lt;style&gt; HTML tag</h4>

<p>You can also type out your CSS code in between <code class="language-plaintext highlighter-rouge">&lt;style&gt;</code> tags if you prefer everything to be contained in one HTML document:</p>

Expand All @@ -119,7 +117,7 @@ <h3 id="with-the-style-html-tag">With the &lt;style&gt; HTML tag</h3>
<span class="nt">&lt;/html&gt;</span>
</code></pre></div></div>

<h2 id="for-static-site-generator-websites">For Static Site Generator Websites</h2>
<h3 id="for-static-site-generator-websites">For Static Site Generator Websites</h3>

<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>

Expand Down Expand Up @@ -148,7 +146,7 @@ <h2 id="for-static-site-generator-websites">For Static Site Generator Websites</

<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 style-sheet.</p>

<h1 id="configure-giscus-theme">Configure Giscus Theme</h1>
<h2 id="configure-giscus-theme">Configure Giscus Theme</h2>

<p>To set <code class="language-plaintext highlighter-rouge">giscus</code> comments to match the website if you have done the CSS <code class="language-plaintext highlighter-rouge">@media</code> trick shown above, simply set the <code class="language-plaintext highlighter-rouge">&lt;script&gt;</code>’s <code class="language-plaintext highlighter-rouge">data-theme</code> attribute value to <code class="language-plaintext highlighter-rouge">"preferred_color_scheme"</code> as shown below.</p>

Expand All @@ -163,7 +161,7 @@ <h1 id="configure-giscus-theme">Configure Giscus Theme</h1>
<span class="nt">&lt;/script&gt;</span>
</code></pre></div></div>

<h1 id="conclusion">Conclusion</h1>
<h2 id="conclusion">Conclusion</h2>

<p>If you found this blog post useful, leave a comment down below! Also check out how to add <code class="language-plaintext highlighter-rouge">giscus</code> comments to your own website on my <a href="/giscus-comments">previous guide for it</a>.</p>

Expand Down
Loading