update styling on syntax highlights
This commit is contained in:
parent
0f29845784
commit
7d66c2cb68
17 changed files with 507 additions and 505 deletions
|
@ -18,3 +18,5 @@ pluralizelisttitles = false
|
||||||
[markup.tableOfContents]
|
[markup.tableOfContents]
|
||||||
endLevel = 4
|
endLevel = 4
|
||||||
startLevel = 2
|
startLevel = 2
|
||||||
|
[markup.highlight]
|
||||||
|
style = 'vulcan'
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -27,30 +27,30 @@
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 style="display:flex;"><span> <span style="color:#a6e22e">description</span> = <span style="color:#e6db74">"The global meta description of your website"</span>
|
</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">"The global meta description of your website"</span><span style="color:#c9c9c9">
|
||||||
</span></span></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won’t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</span></span></span></code></pre></div><p>It won’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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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><<span style="color:#f92672">meta</span> <span style="color:#a6e22e">name</span><span style="color:#f92672">=</span><span style="color:#e6db74">"description"</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">"{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"</span>/>
|
<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"><</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">"description"</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">content</span><span style="color:#bc74c4">=</span><span style="color:#82cc6a">"{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"</span><span style="color:#56b6c2">/></span><span style="color:#c9c9c9">
|
||||||
</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 -> View Page Source -> Search for the meta description tag. It should match what you left in the config file.</p>
|
</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 -> View Page Source -> 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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 style="display:flex;"><span><span style="color:#f92672">description</span>: <span style="color:#e6db74">"Your custom description for this page"</span>
|
</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">"Your custom description for this page"</span><span style="color:#c9c9c9">
|
||||||
</span></span><span style="display:flex;"><span>---
|
</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></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>
|
</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">
|
<div id="nextprev">
|
||||||
|
|
|
@ -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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
|
|
||||||
|
|
||||||
<div id="nextprev">
|
<div id="nextprev">
|
||||||
|
|
|
@ -18,28 +18,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2490,30 +2490,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4730,8 +4730,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -19,28 +19,28 @@
|
||||||
<description><p>I actually updated the css once more.</p>
|
<description><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>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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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>
|
</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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div></description>
|
</span></span></span></code></pre></div></description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
<item>
|
<item>
|
||||||
|
@ -2491,30 +2491,30 @@ List of Works Cited</p>
|
||||||
<li>Add the following line inside it</li>
|
<li>Add the following line inside it</li>
|
||||||
</ol>
|
</ol>
|
||||||
<p>For config.toml</p>
|
<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>]
|
<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 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></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></code></pre></div><p>For config.yaml</p>
|
</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>:
|
<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 style="display:flex;"><span> <span style="color:#f92672">description</span>: <span style="color:#ae81ff">The global meta description of your website</span>
|
</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></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
|
</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">
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
|
||||||
<span class="spanForHeader">#</span>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Locate baseof.html</li>
|
<li>Locate baseof.html</li>
|
||||||
<li>Add or change the meta description line with the following</li>
|
<li>Add or change the meta description line with the following</li>
|
||||||
</ol>
|
</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;
|
<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></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>
|
</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">
|
<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>
|
<span class="spanForHeader">#</span>
|
||||||
</a></h3><ol>
|
</a></h3><ol>
|
||||||
<li>Have a markdown file ready</li>
|
<li>Have a markdown file ready</li>
|
||||||
<li>In the preamble, add</li>
|
<li>In the preamble, add</li>
|
||||||
</ol>
|
</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>---
|
<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 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><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 style="display:flex;"><span>---
|
</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></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>
|
</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>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
@ -4731,8 +4731,8 @@ formed does not list Internet pornography as one of the addictions that it provi
|
||||||
</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>
|
</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>
|
<p>You can fix this in config.toml with the following line</p>
|
||||||
<blockquote>
|
<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>
|
<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></code></pre></div></blockquote>
|
</span></span></span></code></pre></div></blockquote>
|
||||||
</description>
|
</description>
|
||||||
</item>
|
</item>
|
||||||
|
|
||||||
|
|
|
@ -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>I actually updated the css once more.</p>
|
||||||
<p>If you’re using a dark theme in your browser, the website will follow suit and change to darker colors.</p>
|
<p>If you’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>
|
<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> {
|
<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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#fafafa</span>;
|
</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 style="display:flex;"><span> --fg: <span style="color:#ae81ff">#2f343f</span>;
|
</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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#4084d6</span>;
|
</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 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><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 style="display:flex;"><span>}
|
</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></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’t know this stuff existed, thought webshits just use java script for everything, but I guess I’m wrong.</p>
|
</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’t know this stuff existed, thought webshits just use java script for everything, but I guess I’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> {
|
<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 style="display:flex;"><span> :<span style="color:#a6e22e">root</span> {
|
</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 style="display:flex;"><span> --bg: <span style="color:#ae81ff">#141414</span>;
|
</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 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><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 style="display:flex;"><span> --links: <span style="color:#ae81ff">#5da0f2</span>;
|
</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 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><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 style="display:flex;"><span> }
|
</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 style="display:flex;"><span>}
|
</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></code></pre></div><p>And this is how CSS variables are used:</p>
|
</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> {
|
<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 style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#66d9ef">sans-serif</span>;
|
</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 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><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 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><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 style="display:flex;"><span>}
|
</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></code></pre></div>
|
</span></span></span></code></pre></div>
|
||||||
|
|
||||||
<div id="nextprev">
|
<div id="nextprev">
|
||||||
<a href="/library/ted-kaczynski/ship-of-fools/"><div id="prevart">Previous:<br>Ship of Fools</div></a>
|
<a href="/library/ted-kaczynski/ship-of-fools/"><div id="prevart">Previous:<br>Ship of Fools</div></a>
|
||||||
|
|
Loading…
Reference in a new issue