Examples on Sine Diehttps://sinetris.github.io/sine-die/categories/examples/Recent content in Examples on Sine DieSine Die theme for HugoDuilio Ruggieroduilio@sinetris.info© 2023 - 2026, Duilio Ruggiero2026-04-09T07:46:34ZFirst 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>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 pageSimple 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 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