From 7d66c2cb6885648d757a5078f7f4465d9a566e9a Mon Sep 17 00:00:00 2001
From: kurets <kapishka@waifu.club>
Date: Sat, 8 Apr 2023 21:49:05 +0300
Subject: [PATCH] update styling on syntax highlights

---
 new-site/config.toml                          |  4 +-
 new-site/public/blog/index.xml                | 72 +++++++++----------
 .../blog/meta-description-in-hugo/index.html  | 24 +++----
 .../blog/pluralization-issues/index.html      |  4 +-
 new-site/public/categories/index.xml          | 72 +++++++++----------
 new-site/public/index.xml                     | 72 +++++++++----------
 new-site/public/library/hackbook/index.xml    | 72 +++++++++----------
 new-site/public/library/index.xml             | 72 +++++++++----------
 .../public/library/ted-kaczynski/index.xml    | 72 +++++++++----------
 new-site/public/tags/blog/index.xml           | 72 +++++++++----------
 new-site/public/tags/hackbook/index.xml       | 72 +++++++++----------
 new-site/public/tags/index.xml                | 72 +++++++++----------
 new-site/public/tags/library/index.xml        | 72 +++++++++----------
 new-site/public/tags/ted-kaczynski/index.xml  | 72 +++++++++----------
 new-site/public/tags/updates/index.xml        | 72 +++++++++----------
 new-site/public/updates/index.xml             | 72 +++++++++----------
 .../updates/updated-the-css-again/index.html  | 44 ++++++------
 17 files changed, 507 insertions(+), 505 deletions(-)

diff --git a/new-site/config.toml b/new-site/config.toml
index facadce3..9dff5b56 100644
--- a/new-site/config.toml
+++ b/new-site/config.toml
@@ -17,4 +17,6 @@ pluralizelisttitles = false
       unsafe = true
   [markup.tableOfContents]
     endLevel = 4
-    startLevel = 2
\ No newline at end of file
+    startLevel = 2
+  [markup.highlight]
+    style = 'vulcan'
\ No newline at end of file
diff --git a/new-site/public/blog/index.xml b/new-site/public/blog/index.xml
index 3a074c4b..ac6e2d7e 100644
--- a/new-site/public/blog/index.xml
+++ b/new-site/public/blog/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/blog/meta-description-in-hugo/index.html b/new-site/public/blog/meta-description-in-hugo/index.html
index 0031ed89..d5a923d7 100644
--- a/new-site/public/blog/meta-description-in-hugo/index.html
+++ b/new-site/public/blog/meta-description-in-hugo/index.html
@@ -27,30 +27,30 @@
 <li>Add the following line inside it</li>
 </ol>
 <p>For config.toml</p>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span>[<span style="color:#a6e22e">params</span>]
-</span></span><span style="display:flex;"><span>  <span style="color:#a6e22e">description</span> = <span style="color:#e6db74">&#34;The global meta description of your website&#34;</span>
-</span></span></code></pre></div><p>For config.yaml</p>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#f92672">params</span>:
-</span></span><span style="display:flex;"><span>  <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
-</span></span></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2">[</span><span style="color:#c9c9c9">params</span><span style="color:#56b6c2">]</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">  </span><span style="color:#c9c9c9">description</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">=</span><span style="color:#c9c9c9"> </span><span style="color:#82cc6a">&#34;The global meta description of your website&#34;</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div><p>For config.yaml</p>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#bc74c4">params</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">  </span><span style="color:#bc74c4">description</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#c9c9c9">The global meta description of your website</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
 <h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
     <span class="spanForHeader">#</span>
 </a></h3><ol>
 <li>Locate baseof.html</li>
 <li>Add or change the meta description line with the following</li>
 </ol>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;description&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&#34;</span>/&gt;
-</span></span></code></pre></div><p>And now if you start your Hugo server locally with <code>hugo serve --noHTTPCache</code> and you right click on your page -&gt; View Page Source -&gt; Search for the meta description tag. It should match what you left in the config file.</p>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2">&lt;</span><span style="color:#bc74c4">meta</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">name</span><span style="color:#bc74c4">=</span><span style="color:#82cc6a">&#34;description&#34;</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">content</span><span style="color:#bc74c4">=</span><span style="color:#82cc6a">&#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&#34;</span><span style="color:#56b6c2">/&gt;</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div><p>And now if you start your Hugo server locally with <code>hugo serve --noHTTPCache</code> and you right click on your page -&gt; View Page Source -&gt; Search for the meta description tag. It should match what you left in the config file.</p>
 <h3 id="replacing-the-global-description-with-a-custom-one">Replacing the global description with a custom one <a class="anchor" href="#replacing-the-global-description-with-a-custom-one">
     <span class="spanForHeader">#</span>
 </a></h3><ol>
 <li>Have a markdown file ready</li>
 <li>In the preamble, add</li>
 </ol>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span>---
-</span></span><span style="display:flex;"><span><span style="color:#f92672">description</span>: <span style="color:#e6db74">&#34;Your custom description for this page&#34;</span>
-</span></span><span style="display:flex;"><span>---
-</span></span></code></pre></div><p>Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!</p>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">---</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#bc74c4">description</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#82cc6a">&#34;Your custom description for this page&#34;</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#c9c9c9">---</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div><p>Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!</p>
 
 
 <div id="nextprev">
diff --git a/new-site/public/blog/pluralization-issues/index.html b/new-site/public/blog/pluralization-issues/index.html
index d0204a9b..cdb4674b 100644
--- a/new-site/public/blog/pluralization-issues/index.html
+++ b/new-site/public/blog/pluralization-issues/index.html
@@ -24,8 +24,8 @@ pluralizelisttitles = false "/>
 </a></h3><p>So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs</p>
 <p>You can fix this in config.toml with the following line</p>
 <blockquote>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span><span style="color:#a6e22e">pluralizelisttitles</span> = <span style="color:#66d9ef">false</span>
-</span></span></code></pre></div></blockquote>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">pluralizelisttitles</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">=</span><span style="color:#c9c9c9"> </span><span style="color:#cf5967;background-color:#43454f">false</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div></blockquote>
 
 
 <div id="nextprev">
diff --git a/new-site/public/categories/index.xml b/new-site/public/categories/index.xml
index 41c16a87..7c8388c2 100644
--- a/new-site/public/categories/index.xml
+++ b/new-site/public/categories/index.xml
@@ -18,28 +18,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2490,30 +2490,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4730,8 +4730,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/index.xml b/new-site/public/index.xml
index da317efa..0d1a3e1d 100644
--- a/new-site/public/index.xml
+++ b/new-site/public/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/library/hackbook/index.xml b/new-site/public/library/hackbook/index.xml
index 87c9f53e..ad86733e 100644
--- a/new-site/public/library/hackbook/index.xml
+++ b/new-site/public/library/hackbook/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/library/index.xml b/new-site/public/library/index.xml
index 34feac37..f48d8994 100644
--- a/new-site/public/library/index.xml
+++ b/new-site/public/library/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/library/ted-kaczynski/index.xml b/new-site/public/library/ted-kaczynski/index.xml
index 657f2340..c670e9af 100644
--- a/new-site/public/library/ted-kaczynski/index.xml
+++ b/new-site/public/library/ted-kaczynski/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/tags/blog/index.xml b/new-site/public/tags/blog/index.xml
index b7129bef..0ff81f93 100644
--- a/new-site/public/tags/blog/index.xml
+++ b/new-site/public/tags/blog/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/tags/hackbook/index.xml b/new-site/public/tags/hackbook/index.xml
index 92f70c8f..1406af72 100644
--- a/new-site/public/tags/hackbook/index.xml
+++ b/new-site/public/tags/hackbook/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/tags/index.xml b/new-site/public/tags/index.xml
index d083a5fe..ef2a0660 100644
--- a/new-site/public/tags/index.xml
+++ b/new-site/public/tags/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/tags/library/index.xml b/new-site/public/tags/library/index.xml
index 3d023e5a..65c4d3e7 100644
--- a/new-site/public/tags/library/index.xml
+++ b/new-site/public/tags/library/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/tags/ted-kaczynski/index.xml b/new-site/public/tags/ted-kaczynski/index.xml
index 03846da8..921356f3 100644
--- a/new-site/public/tags/ted-kaczynski/index.xml
+++ b/new-site/public/tags/ted-kaczynski/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/tags/updates/index.xml b/new-site/public/tags/updates/index.xml
index 6c7b65ab..4ee8174e 100644
--- a/new-site/public/tags/updates/index.xml
+++ b/new-site/public/tags/updates/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/updates/index.xml b/new-site/public/updates/index.xml
index d134d3b8..bdfbb8b1 100644
--- a/new-site/public/updates/index.xml
+++ b/new-site/public/updates/index.xml
@@ -19,28 +19,28 @@
 		<description>&lt;p&gt;I actually updated the css once more.&lt;/p&gt;
 &lt;p&gt;If you&amp;rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.&lt;/p&gt;
 &lt;p&gt;I did this by setting the light theme to be by default for more readability:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#fafafa&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--fg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#2f343f&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#4084d6&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;93&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;99&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;@&lt;span style=&#34;color:#66d9ef&#34;&gt;media&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;:&lt;/span&gt; &lt;span style=&#34;color:#f92672&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;)&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	:&lt;span style=&#34;color:#a6e22e&#34;&gt;root&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--bg: &lt;span style=&#34;color:#ae81ff&#34;&gt;#141414&lt;/span&gt;;	
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--fg: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;232&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;228&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--links: &lt;span style=&#34;color:#ae81ff&#34;&gt;#5da0f2&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;		--muted_text: rgb(&lt;span style=&#34;color:#ae81ff&#34;&gt;179&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;182&lt;/span&gt;, &lt;span style=&#34;color:#ae81ff&#34;&gt;186&lt;/span&gt;);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	}
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;body&lt;/span&gt; {
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;font-family&lt;/span&gt;: &lt;span style=&#34;color:#66d9ef&#34;&gt;sans-serif&lt;/span&gt;;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;background&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;bg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;	&lt;span style=&#34;color:#66d9ef&#34;&gt;color&lt;/span&gt;: &lt;span style=&#34;color:#a6e22e&#34;&gt;var&lt;/span&gt;(&lt;span style=&#34;color:#f92672&#34;&gt;--&lt;/span&gt;fg);
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;}
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#fafafa&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#2f343f&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#4084d6&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;93&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;99&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&amp;rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&amp;rsquo;m wrong.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;@&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;media&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;prefers-color-scheme&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;dark&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;)&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#ecbe7b&#34;&gt;root&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#141414&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;232&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;228&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--links&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;#5da0f2&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;		&lt;/span&gt;&lt;span style=&#34;color:#bc74c4;font-style:italic&#34;&gt;--muted_text&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;rgb&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;179&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;182&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;,&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;186&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And this is how CSS variables are used:&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-css&#34; data-lang=&#34;css&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;body&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;{&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;font-family&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;sans-serif&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;background&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;bg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;	&lt;/span&gt;&lt;span style=&#34;color:#7fbaf5&#34;&gt;color&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#57c7ff&#34;&gt;var&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;(&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;--&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;fg&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;);&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;}&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
 	</item>
 	
 	<item>
@@ -2491,30 +2491,30 @@ List of Works Cited&lt;/p&gt;
 &lt;li&gt;Add the following line inside it&lt;/li&gt;
 &lt;/ol&gt;
 &lt;p&gt;For config.toml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;[&lt;span style=&#34;color:#a6e22e&#34;&gt;params&lt;/span&gt;]
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#a6e22e&#34;&gt;description&lt;/span&gt; = &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;params&lt;/span&gt;:
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;  &lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#ae81ff&#34;&gt;The global meta description of your website&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;[&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;]&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;The global meta description of your website&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;For config.yaml&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;params&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;  &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;The global meta description of your website&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;It won&amp;rsquo;t work just yet because you have to update the &lt;code&gt;baseof.html&lt;/code&gt; file.&lt;/p&gt;
 &lt;h3 id=&#34;updating-the-baseofhtml-file&#34;&gt;Updating the baseof.html file &lt;a class=&#34;anchor&#34; href=&#34;#updating-the-baseofhtml-file&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Locate baseof.html&lt;/li&gt;
 &lt;li&gt;Add or change the meta description line with the following&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&amp;lt;&lt;span style=&#34;color:#f92672&#34;&gt;meta&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt; &lt;span style=&#34;color:#a6e22e&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;/&amp;gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;meta&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;name&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;description&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;content&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;/&amp;gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;And now if you start your Hugo server locally with &lt;code&gt;hugo serve --noHTTPCache&lt;/code&gt; and you right click on your page -&amp;gt; View Page Source -&amp;gt; Search for the meta description tag. It should match what you left in the config file.&lt;/p&gt;
 &lt;h3 id=&#34;replacing-the-global-description-with-a-custom-one&#34;&gt;Replacing the global description with a custom one &lt;a class=&#34;anchor&#34; href=&#34;#replacing-the-global-description-with-a-custom-one&#34;&gt;
     &lt;span class=&#34;spanForHeader&#34;&gt;#&lt;/span&gt;
 &lt;/a&gt;&lt;/h3&gt;&lt;ol&gt;
 &lt;li&gt;Have a markdown file ready&lt;/li&gt;
 &lt;li&gt;In the preamble, add&lt;/li&gt;
 &lt;/ol&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#f92672&#34;&gt;description&lt;/span&gt;: &lt;span style=&#34;color:#e6db74&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;---
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-yaml&#34; data-lang=&#34;yaml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#bc74c4&#34;&gt;description&lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;:&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#82cc6a&#34;&gt;&amp;#34;Your custom description for this page&amp;#34;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;---&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!&lt;/p&gt;
 </description>
 	</item>
 	
@@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
 &lt;/a&gt;&lt;/h3&gt;&lt;p&gt;So I wanted to make a quick entry, see how it looks like and I stumbled upon this issue of hugo pluralzing Blog into Blogs&lt;/p&gt;
 &lt;p&gt;You can fix this in config.toml with the following line&lt;/p&gt;
 &lt;blockquote&gt;
-&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;&#34;&gt;&lt;span&gt;&lt;span style=&#34;color:#a6e22e&#34;&gt;pluralizelisttitles&lt;/span&gt; = &lt;span style=&#34;color:#66d9ef&#34;&gt;false&lt;/span&gt;
-&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
+&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; style=&#34;color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;&#34;&gt;&lt;code class=&#34;language-toml&#34; data-lang=&#34;toml&#34;&gt;&lt;span style=&#34;display:flex;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;pluralizelisttitles&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#56b6c2&#34;&gt;=&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt; &lt;/span&gt;&lt;span style=&#34;color:#cf5967;background-color:#43454f&#34;&gt;false&lt;/span&gt;&lt;span style=&#34;color:#c9c9c9&#34;&gt;
+&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/blockquote&gt;
 </description>
 	</item>
 	
diff --git a/new-site/public/updates/updated-the-css-again/index.html b/new-site/public/updates/updated-the-css-again/index.html
index f7f3a558..f55fdf99 100644
--- a/new-site/public/updates/updated-the-css-again/index.html
+++ b/new-site/public/updates/updated-the-css-again/index.html
@@ -23,28 +23,28 @@ I did this by setting the light theme to be by default for more readability:
 <p>I actually updated the css once more.</p>
 <p>If you&rsquo;re using a dark theme in your browser, the website will follow suit and change to darker colors.</p>
 <p>I did this by setting the light theme to be by default for more readability:</p>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>:<span style="color:#a6e22e">root</span> {
-</span></span><span style="display:flex;"><span>	--bg: <span style="color:#ae81ff">#fafafa</span>;
-</span></span><span style="display:flex;"><span>	--fg: <span style="color:#ae81ff">#2f343f</span>;
-</span></span><span style="display:flex;"><span>	--links: <span style="color:#ae81ff">#4084d6</span>;
-</span></span><span style="display:flex;"><span>	--muted_text: rgb(<span style="color:#ae81ff">93</span>, <span style="color:#ae81ff">93</span>, <span style="color:#ae81ff">99</span>);
-</span></span><span style="display:flex;"><span>}
-</span></span></code></pre></div><p>and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&rsquo;m wrong.</p>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span>@<span style="color:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">prefers-color-scheme</span><span style="color:#f92672">:</span> <span style="color:#f92672">dark</span><span style="color:#f92672">)</span> {
-</span></span><span style="display:flex;"><span>	:<span style="color:#a6e22e">root</span> {
-</span></span><span style="display:flex;"><span>		--bg: <span style="color:#ae81ff">#141414</span>;	
-</span></span><span style="display:flex;"><span>		--fg: rgb(<span style="color:#ae81ff">232</span>, <span style="color:#ae81ff">228</span>, <span style="color:#ae81ff">228</span>);
-</span></span><span style="display:flex;"><span>		--links: <span style="color:#ae81ff">#5da0f2</span>;
-</span></span><span style="display:flex;"><span>		--muted_text: rgb(<span style="color:#ae81ff">179</span>, <span style="color:#ae81ff">182</span>, <span style="color:#ae81ff">186</span>);
-</span></span><span style="display:flex;"><span>	}
-</span></span><span style="display:flex;"><span>}
-</span></span></code></pre></div><p>And this is how CSS variables are used:</p>
-<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#f92672">body</span> {
-</span></span><span style="display:flex;"><span>	<span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
-</span></span><span style="display:flex;"><span>	<span style="color:#66d9ef">background</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>bg);
-</span></span><span style="display:flex;"><span>	<span style="color:#66d9ef">color</span>: <span style="color:#a6e22e">var</span>(<span style="color:#f92672">--</span>fg);
-</span></span><span style="display:flex;"><span>}
-</span></span></code></pre></div>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2">:</span><span style="color:#ecbe7b">root</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">{</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#bc74c4;font-style:italic">--bg</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#57c7ff">#fafafa</span><span style="color:#56b6c2">;</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#bc74c4;font-style:italic">--fg</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#57c7ff">#2f343f</span><span style="color:#56b6c2">;</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#bc74c4;font-style:italic">--links</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#57c7ff">#4084d6</span><span style="color:#56b6c2">;</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#bc74c4;font-style:italic">--muted_text</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#7fbaf5">rgb</span><span style="color:#56b6c2">(</span><span style="color:#56b6c2">93</span><span style="color:#56b6c2">,</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">93</span><span style="color:#56b6c2">,</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">99</span><span style="color:#56b6c2">);</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#56b6c2">}</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div><p>and then this checks that if the user prefers a darker theme, they shall get a dark theme. Simple as that really, I didn&rsquo;t know this stuff existed, thought webshits just use java script for everything, but I guess I&rsquo;m wrong.</p>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2">@</span><span style="color:#7fbaf5">media</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">(</span><span style="color:#bc74c4">prefers-color-scheme</span><span style="color:#bc74c4">:</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">dark</span><span style="color:#bc74c4">)</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">{</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#56b6c2">:</span><span style="color:#ecbe7b">root</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">{</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">		</span><span style="color:#bc74c4;font-style:italic">--bg</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#57c7ff">#141414</span><span style="color:#56b6c2">;</span><span style="color:#c9c9c9">	
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">		</span><span style="color:#bc74c4;font-style:italic">--fg</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#7fbaf5">rgb</span><span style="color:#56b6c2">(</span><span style="color:#56b6c2">232</span><span style="color:#56b6c2">,</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">228</span><span style="color:#56b6c2">,</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">228</span><span style="color:#56b6c2">);</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">		</span><span style="color:#bc74c4;font-style:italic">--links</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#57c7ff">#5da0f2</span><span style="color:#56b6c2">;</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">		</span><span style="color:#bc74c4;font-style:italic">--muted_text</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#7fbaf5">rgb</span><span style="color:#56b6c2">(</span><span style="color:#56b6c2">179</span><span style="color:#56b6c2">,</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">182</span><span style="color:#56b6c2">,</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">186</span><span style="color:#56b6c2">);</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#56b6c2">}</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#56b6c2">}</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div><p>And this is how CSS variables are used:</p>
+<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#bc74c4">body</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">{</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#7fbaf5">font-family</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#cf5967;background-color:#43454f">sans-serif</span><span style="color:#56b6c2">;</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#7fbaf5">background</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#57c7ff">var</span><span style="color:#56b6c2">(</span><span style="color:#bc74c4">--</span><span style="color:#c9c9c9">bg</span><span style="color:#56b6c2">);</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">	</span><span style="color:#7fbaf5">color</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#57c7ff">var</span><span style="color:#56b6c2">(</span><span style="color:#bc74c4">--</span><span style="color:#c9c9c9">fg</span><span style="color:#56b6c2">);</span><span style="color:#c9c9c9">
+</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#56b6c2">}</span><span style="color:#c9c9c9">
+</span></span></span></code></pre></div>
 
 <div id="nextprev">
 <a href="/library/ted-kaczynski/ship-of-fools/"><div id="prevart">Previous:<br>Ship of Fools</div></a>