Sine Diehttps://sinetris.github.io/sine-die/Recent content on Sine DieSine Die theme for HugoDuilio Ruggieroduilio@sinetris.info© 2023 - 2026, Duilio Ruggiero2026-04-09T13:59:37ZFirst Sub-Subsection page 012025-05-08T17:34:20+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/first-subsection/first-sub-subsection/page01/#atomExample 1 of a simple pageFirst Subsection page 012025-05-08T17:34:20+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/first-subsection/page01/#atomExample 1 of a simple pageColor Palette2023-07-16T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/palette/#atom<p>This theme uses
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables" rel="external" title="CSS custom properties for cascading variables">CSS cascading variables</a>.</p>
<p>The color palette uses a three-color combination and allows to set the primary color hue angle and the left and right secondary colors hue angle (respectively adding and subtracting from the primary hue angle).</p>
<p>The hue angle is based on the
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl" rel="external" title="hsl()">hsl</a> color space but the color palette is generated using
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch" rel="external" title="oklch()">oklch</a>, this make it easier to select a color hue from the HSL
<a href="/sine-die/glossary/color-wheel/">Color Wheel</a> while still taking advantage of the benefits that OKLCH provides.</p>First Sub-Subsection page 022025-05-08T17:39:03+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/first-subsection/first-sub-subsection/page02/#atomExample 2 of a simple pageFirst Subsection page 022025-05-08T17:39:03+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/first-subsection/page02/#atomExample 2 of a simple pageTheme Colors2023-07-20T11:10:15+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/colors/#atom<h2 id="description">Description</h2>
<p>By default the theme uses the <strong>triadic color scheme</strong> (<em>secondary colors angle</em>
set to <code>120deg</code>) with the <em>primary color hue</em> angle set to <code>250deg</code>.</p>
<pre><code>:root {
/* Using default values */
--color-primary-hue: 250deg;
--colors-secondary-hue-angle: 120deg;
}</code></pre>Theme Colors (override)2023-07-20T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/colors-override/#atom<h2 id="description">Description</h2>
<p>In this example we override the <strong>primary color hue</strong> angle to <code>200deg</code> and the
<strong>secondary colors angle</strong> to <code>330deg</code> to have a <strong>Split-Complementary color
scheme</strong> with left and right inverted.</p>
<pre><code>:root {
--color-primary-hue: 200deg;
--colors-secondary-hue-angle: 210deg;
}</code></pre>
<p>You can see the changes right here on this page.</p>First Sub-Subsection page 032025-05-25T09:44:34+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/first-subsection/first-sub-subsection/page03/#atomExample 3 of a simple pageFirst Subsection page 032025-05-25T09:44:34+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/first-subsection/page03/#atom<p>This page is not in the main menu</p>HTML elements2023-07-20T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/look-and-feel/html-elements/#atom<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>
<p>This is a paragraph with random content. Duis ut tempor mollit nisi exercitation et incididunt occaecat tempor aute ex cupidatat exercitation. Eiusmod incididunt ut enim sint pariatur. Tempor minim adipisicing quis Lorem sint sunt anim velit esse pariatur laborum.</p>
<p>This is another paragraph and this paragraph have a link to a footnote
<a href="/sine-die/">1</a>.</p>
<blockquote>
<p>A blockquote paragraph inside a figure element.</p>
</blockquote>Web Feeds2026-01-14T08:16:25+00:002026-04-09T13:59:37Zhttps://sinetris.github.io/sine-die/topics/docs/content/web-feeds/#atom<h2 id="description">Description</h2>
<p>The Sine Die theme allows you to generate
<a href="https://www.rssboard.org/rss-specification" rel="external">RSS</a> and
<a href="https://www.ietf.org/rfc/rfc4287" rel="external">Atom</a> web feeds for your Hugo website.</p>
<h2 id="configuration">Configuration</h2>
<p>Some changes are needed to the
<a href="https://gohugo.io/configuration/introduction/" rel="external">configuration</a> of your Hugo website.</p>
<ul>
<li>Add <code>application/atom+xml</code> to
<a href="https://gohugo.io/configuration/media-types/" rel="external">mediaTypes</a></li>
<li>Add <code>atom</code> to
<a href="https://gohugo.io/configuration/output-formats/" rel="external">outputFormats</a> (also change <code>baseName</code> for <code>rss</code> for consistency)</li>
<li>Add <code>atom</code> and <code>rss</code> to
<a href="https://gohugo.io/configuration/outputs/" rel="external">outputs</a> for each
<a href="https://gohugo.io/quick-reference/glossary/#page-kind" rel="external">page kind</a> on which you want to enable web feed generation</li>
</ul>
<p>If you are using a
<a href="https://gohugo.io/configuration/introduction/#configuration-directory" rel="external">configuration directory</a>, you can copy <code>mediaTypes.yaml</code>, <code>outputFormats.yaml</code>, and <code>outputs.yaml</code> from
<a href="https://github.com/sinetris/sine-die/blob/main/userguide/config/_default" rel="external">userguide/config/_default</a>.</p>Color Wheel2025-05-30T06:55:18+00:002025-12-11T19:42:46Zhttps://sinetris.github.io/sine-die/glossary/color-wheel/#atomA circular diagram used to show the relationships between colors.Color Theory2025-05-27T15:46:33+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/glossary/color-theory/#atomThe study of how colors interact with each other and how they can influence people’s emotions and perceptions.Example 12025-05-27T15:46:33+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/glossary/example1/#atom<h2 id="example-1-subsection">Example 1 subsection</h2>
<p>This is used to create examples for the use of glossary terms.</p>Color Harmonies2025-05-27T14:18:00+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/glossary/color-harmonies/#atom<h2 id="definition">Definition</h2>
<p>The term “color harmonies” refers to the creation of balanced and aesthetically
pleasing color combinations based on the principles and concepts outlined in
color theory.</p>
<h2 id="color-combinations">Color combinations</h2>
<h3 id="analogous">Analogous</h3>
<h3 id="complementary">Complementary</h3>
<h3 id="split-complementary">Split-Complementary</h3>
<h3 id="triadic">Triadic</h3>
<p>The triadic color harmony uses three colors equally spaced on the color wheel,
forming a triangle, to create vibrant, balanced, and visually appealing color
palette.</p>Second Subsection page 022025-05-25T08:30:17+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/second-subsection/page02/#atomExample 2 of a simple pageSecond Subsection page 012025-05-25T08:30:10+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/second-subsection/page01/#atomExample 1 of a simple pageSimple page 022025-05-25T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/simple_page02/#atom<p>The <code>sidebar</code> is collapsed.</p>Simple page 032025-05-25T08:07:24+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/examples/simple_page03/#atomExample 3 of a simple pageMenubar2025-05-17T09:10:25+00:002026-04-09T07:46:34Zhttps://sinetris.github.io/sine-die/topics/docs/content/menubar/#atom<h2 id="menu-entries">Menu entries</h2>
<p>You can define entries for the primary navigation menu in the front matter block.</p>
<p>You can add the following in the content file that you want to define as a menu top entry:</p>
<pre><code># Example to add an entry named `documentation`
menus:
main:
identifier: documentation</code></pre>
<p>And the following in the content files that you want to define as a sub-menu entry:</p>
<pre><code># Example to add `documentation` sub-menu entry
menus:
main:
parent: documentation</code></pre>
<h2 id="sections-and-subpages">Sections and subpages</h2>
<p>To define menu entries for an entire section, you can use
<a href="https://gohugo.io/content-management/front-matter/#cascade-1" rel="external" title="Hugo Cascade">cascade</a>.</p>Transpiler2025-05-08T16:10:15+00:002025-09-06T12:37:10Zhttps://sinetris.github.io/sine-die/glossary/transpiler/#atomA software that convert from one source code language to another.Simple page 012025-04-01T17:28:15+00:002025-09-07T03:37:46Zhttps://sinetris.github.io/sine-die/examples/simple_page01/#atom<p>You can use
<a href="https://mermaid.js.org/" rel="external">mermaid</a> in your Markdown content.</p>
<p>For example:</p>
<pre><code>## Mermaid
A mermaid diagram example.
```mermaid
sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```</code></pre>
<p>Will be rendered as:</p>
<h2 id="mermaid">Mermaid</h2>
<p>A mermaid diagram example.</p>
<pre><code> sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!</code></pre>Simple page 042025-03-11T03:57:42+00:002025-07-02T15:29:54Zhttps://sinetris.github.io/sine-die/examples/simple_page04/#atom<p>The <code>sidebar</code> is empty and hidden.</p>Simple page 052025-03-11T03:57:42+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/simple_page05/#atomExample 5 of a simple pageSimple page 062025-03-11T03:57:42+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/simple_page06/#atomExample 6 of a simple pageSimple page 072025-03-11T03:57:42+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/simple_page07/#atomExample 7 of a simple pageSimple page 082025-03-11T03:57:42+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/simple_page08/#atomExample 8 of a simple pageSimple page 092025-03-11T03:57:42+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/simple_page09/#atomExample 9 of a simple pageSimple page 102025-03-11T03:57:42+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/simple_page10/#atomExample 10 of a simple pageSimple page 112025-03-11T03:57:42+00:002025-06-04T11:25:56Zhttps://sinetris.github.io/sine-die/examples/simple_page11/#atomExample 11 of a simple page