Zola
2026-05-29T00:00:00+00:00
https://loudsynth.moe/atom.xml
hello world
2026-05-29T00:00:00+00:00
2026-05-29T00:00:00+00:00
vem4s@proton.me (loudsynth)
https://loudsynth.moe/thoughts/hello-world/
<p>Hello! This is the obligatory "hello world" article I make for every new iteration of this site! This new version runs on the Zola SSG and uses SCSS for styling. ( Yes I use SCSS only for a single <code>@mixin</code> but I think it's valid )</p>
<h2 id="obligatory-syntax-highlighting-test">Obligatory Syntax Highlighting Test</h2>
<h2 id="test-of-all-markup-elements">Test of All Markup Elements</h2>
<h3 id="headings">Headings</h3>
<h1 id="heading-1">Heading 1</h1>
<h2 id="heading-2">Heading 2</h2>
<h3 id="heading-3">Heading 3</h3>
<h4 id="heading-4">Heading 4</h4>
<h5 id="heading-5">Heading 5</h5>
<h6 id="heading-6">Heading 6</h6>
<h3 id="emphasis">Emphasis</h3>
<ul>
<li><strong>Bold Text</strong></li>
<li><em>Italic Text</em></li>
<li><em><strong>Bold and italic Text</strong></em></li>
<li><del>Strikethrough Text</del></li>
</ul>
<h3 id="footnotes">Footnotes</h3>
<p>Foot<sup class="footnote-reference"><a href="#1">1</a></sup>Note<sup class="footnote-reference"><a href="#2">2</a></sup></p>
<div class="footnote-definition" id="1"><sup class="footnote-definition-label">1</sup>
<p>Foot</p>
</div>
<div class="footnote-definition" id="2"><sup class="footnote-definition-label">2</sup>
<p>Note</p>
</div>
<h3 id="lists">Lists</h3>
<h4 id="unordered-lists">Unordered Lists</h4>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<h4 id="ordered-lists">Ordered Lists</h4>
<ol>
<li>First Item</li>
<li>Second Item
<ol>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ol>
</li>
<li>Third Item</li>
</ol>
<h4 id="task-lists">Task Lists</h4>
<ul>
<li><input disabled="" type="checkbox"/>
Unchecked task</li>
<li><input disabled="" type="checkbox" checked=""/>
Check task</li>
<li><input disabled="" type="checkbox"/>
Another unchecked task</li>
</ul>
<h3 id="links">Links</h3>
<ul>
<li><a rel="external" href="https://example.com">Inline link</a></li>
<li><a rel="external" href="https://example.com">https://example.com</a> (Autolink)</li>
</ul>
<h3 id="images">Images</h3>
<ul>
<li>Remote Image</li>
</ul>
<p><img src="https://cdn.discordapp.com/avatars/1364837341008629850/e9e7128682b08ac54570eec13e139bae.webp?size=128" alt="my discord profile picture" /></p>
<ul>
<li>Local image</li>
</ul>
<p><img src="/images/man.jpeg" alt="funny businessman stock image" /></p>
<h3 id="code">Code</h3>
<h4 id="code-blocks">Code Blocks</h4>
<ul>
<li>SCSS Horror:</li>
</ul>
<pre class="giallo" style="color: #D3C6AA; background-color: #2D353B;"><code data-lang="scss"><span class="giallo-l"><span>@</span><span style="color: #D699B6;">mixin</span><span style="color: #A7C080;"> block</span><span> {</span></span>
<span class="giallo-l"><span style="color: #83C092;"> position</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> relative</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> background-color</span><span style="color: #859289;">:</span><span> #</span><span style="color: #A7C080;">374145</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> padding</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> 20</span><span style="color: #E69875;">px</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> width</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> 1000</span><span style="color: #E69875;">px</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span style="color: #E69875;"> &</span><span style="color: #859289;">::</span><span style="color: #DBBC7F;">before</span><span> {</span></span>
<span class="giallo-l"><span style="color: #D699B6;"> content</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> ""</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> background-color</span><span style="color: #859289;">:</span><span> #</span><span style="color: #A7C080;">2e383c</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> position</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> absolute</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> z-index</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> -1</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span style="color: #83C092;"> top</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> 15</span><span style="color: #E69875;">px</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> left</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> 15</span><span style="color: #E69875;">px</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span style="color: #83C092;"> width</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> 100</span><span style="color: #E69875;">%</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> height</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> 100</span><span style="color: #E69875;">%</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span style="color: #83C092;"> transition</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> top 0.3</span><span style="color: #E69875;">s</span><span style="color: #A7C080;"> ease-in, left 0.3</span><span style="color: #E69875;">s</span><span style="color: #A7C080;"> ease-in</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span style="color: #E69875;"> &</span><span style="color: #859289;">:</span><span style="color: #DBBC7F;">hover</span><span> {</span></span>
<span class="giallo-l"><span style="color: #E69875;"> &</span><span style="color: #859289;">::</span><span style="color: #DBBC7F;">before</span><span> {</span></span>
<span class="giallo-l"><span style="color: #83C092;"> top</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> -15</span><span style="color: #E69875;">px</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span style="color: #83C092;"> left</span><span style="color: #859289;">:</span><span style="color: #A7C080;"> -15</span><span style="color: #E69875;">px</span><span style="color: #859289;">;</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span> }</span></span>
<span class="giallo-l"><span>}</span></span></code></pre>
<ul>
<li>Long Code:</li>
</ul>
<pre class="giallo" style="color: #D3C6AA; background-color: #2D353B;"><code data-lang="rust"><span class="giallo-l"><span style="color: #E67E80;">use</span><span style="color: #83C092;"> std</span><span style="color: #E69875;">::</span><span style="color: #83C092;">mem</span><span style="color: #E69875;">::</span><span>transmute;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span style="color: #E69875;">const</span><span> STR</span><span style="color: #E69875;">: &</span><span style="color: #7FBBB3;">str</span><span style="color: #E69875;"> =</span><span> "</span><span style="color: #A7C080;">\u{200b}</span><span style="color: #DBBC7F;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><span>";</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span style="color: #E67E80;">fn</span><span style="color: #A7C080;"> main</span><span>() {</span></span>
<span class="giallo-l"><span style="color: #E69875;"> let mut</span><span> i</span><span style="color: #E69875;">:</span><span style="color: #7FBBB3;"> usize</span><span style="color: #E69875;"> =</span><span style="color: #D699B6;"> 0</span><span>;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span> i</span><span style="color: #E69875;"> +=</span><span style="color: #D699B6;"> 1</span><span>;</span></span>
<span class="giallo-l"></span>
<span class="giallo-l"><span> _</span><span style="color: #E69875;"> =</span><span style="color: #E67E80;"> unsafe</span><span> {</span></span>
<span class="giallo-l"><span style="color: #83C092;"> mem</span><span style="color: #E69875;">::</span><span style="color: #A7C080;">transmute</span><span style="color: #E69875;">::</span><span><</span><span style="color: #7FBBB3;">usize</span><span>,</span><span style="color: #7FBBB3;"> isize</span><span>>(i)</span></span>
<span class="giallo-l"><span> };</span></span>
<span class="giallo-l"><span>}</span></span></code></pre>
<ul>
<li>No Language Code</li>
</ul>
<pre class="giallo" style="color: #D3C6AA; background-color: #2D353B;"><code data-lang="plain"><span class="giallo-l"><span>code block without a language.</span></span></code></pre><h3 id="horizontal-rule">Horizontal Rule</h3>
<hr />
<h3 id="blockquote">Blockquote</h3>
<blockquote>
<em>"If I am selling to you, I speak your language. If I am buying, dann müssen sie Deutsch sprechen"</em> <br>
- Willy Brandt
</blockquote><blockquote>
<em>"i love (re)making (my) website (every 14 days)"</em> <br>
- loudsynth
</blockquote>