hugo-theme-relearn/pir/shortcodes/notice/index.html
2024-10-13 14:26:50 +00:00

1066 lines
113 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="art-x-pir" dir="rtl" itemscope itemtype="http://schema.org/Article">
<head>
<meta charset="utf-8">
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0">
<meta name="generator" content="Hugo 0.135.0">
<meta name="generator" content="Relearn 6.4.0+a68b5ec4d1b9a246993bb82840cdaeeeb44ff109">
<meta name="description" content="Disclaimers to help you structure your page">
<meta name="author" content="Sören Weber">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta name="twitter:title" content="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<meta name="twitter:description" content="Disclaimers to help you structure your page">
<meta property="og:url" content="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html">
<meta property="og:site_name" content="Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:title" content="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<meta property="og:description" content="Disclaimers to help you structure your page">
<meta property="og:locale" content="art_x_pir">
<meta property="og:type" content="article">
<meta property="article:section" content="Shorrrtcodes">
<meta property="og:image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="name" content="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<meta itemprop="description" content="Disclaimers to help you structure your page">
<meta itemprop="wordCount" content="1492">
<meta itemprop="image" content="https://mcshelby.github.io/hugo-theme-relearn/images/hero.png">
<meta itemprop="keywords" content="Howto,Reference,BoxStyle">
<title>Notice :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="alternate" hreflang="x-default">
<link href="https://mcshelby.github.io/hugo-theme-relearn/shortcodes/notice/index.html" rel="alternate" hreflang="en">
<link href="https://mcshelby.github.io/hugo-theme-relearn/pir/shortcodes/notice/index.html" rel="alternate" hreflang="art-x-pir">
<link href="/hugo-theme-relearn/pir/shortcodes/notice/index.xml" rel="alternate" type="application/rss+xml" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/pir/shortcodes/notice/index.print.html" rel="alternate" type="text/html" title="Notice :: Cap&#39;n Hugo Relearrrn Theme">
<link href="/hugo-theme-relearn/images/logo.svg?1728829601" rel="icon" type="image/svg+xml">
<link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1728829601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fontawesome-all.min.css?1728829601" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/nucleus.css?1728829601" rel="stylesheet">
<link href="/hugo-theme-relearn/css/auto-complete.css?1728829601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/auto-complete.css?1728829601" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/perfect-scrollbar.min.css?1728829601" rel="stylesheet">
<link href="/hugo-theme-relearn/css/fonts.css?1728829601" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="/hugo-theme-relearn/css/fonts.css?1728829601" rel="stylesheet"></noscript>
<link href="/hugo-theme-relearn/css/theme.css?1728829601" rel="stylesheet">
<link href="/hugo-theme-relearn/css/theme-relearn-auto.css?1728829601" rel="stylesheet" id="R-variant-style">
<link href="/hugo-theme-relearn/css/chroma-relearn-auto.css?1728829601" rel="stylesheet" id="R-variant-chroma-style">
<link href="/hugo-theme-relearn/css/print.css?1728829601" rel="stylesheet" media="print">
<script src="/hugo-theme-relearn/js/variant.js?1728829601"></script>
<script>
window.relearn = window.relearn || {};
window.relearn.relBasePath='..\/..\/..';
window.relearn.relBaseUri='..\/..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
window.relearn.disableAnchorCopy=false;
window.relearn.disableAnchorScrolling=false;
// variant stuff
window.variants && variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'retro-auto', 'neon', 'learn', 'blue', 'green', 'red' ] );
// translations
window.T_Copy_to_clipboard = `Copy t' clipboard`;
window.T_Copied_to_clipboard = `Copied t' clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link t' clipboard`;
window.T_Link_copied_to_clipboard = `Copied link t' clipboard!`;
window.T_Reset_view = `Rrreset view`;
window.T_View_reset = `View rrreset!`;
window.T_No_results_found = `No rrresults found fer "{0}"`;
window.T_N_results_found = `{1} rrresults found fer "{0}"`;
</script>
<style>
#R-body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support html disableInlineCopyToClipboard" data-url="/hugo-theme-relearn/pir/shortcodes/notice/index.html">
<div id="R-body" class="default-animation">
<div id="R-body-overlay"></div>
<nav id="R-topbar">
<div class="topbar-wrapper">
<div class="topbar-sidebar-divider"></div>
<div class="topbar-area topbar-area-start" data-area="start">
<div class="topbar-button topbar-button-sidebar" data-content-empty="disable" data-width-s="show" data-width-m="hide" data-width-l="hide"><button class="topbar-control" onclick="toggleNav()" type="button" title="Menu (CTRL&#43;ALT&#43;n)"><i class="fa-fw fas fa-bars"></i></button>
</div>
<div class="topbar-button topbar-button-toc" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Table o&#39; Contents (CTRL&#43;ALT&#43;t)"><i class="fa-fw fas fa-list-alt"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<nav class="TableOfContents">
<ul>
<li><a href="#usage">Usage</a>
<ul>
<li><a href="#parameter">Parameter</a></li>
</ul>
</li>
<li><a href="#settings">Sett'ns</a>
<ul>
<li><a href="#defining-own-styles">Defin'n own Styles</a></li>
</ul>
</li>
<li><a href="#examples">Examples</a>
<ul>
<li><a href="#by-severity-using-callout-syntax">By Severity Us'n Callout Rules</a></li>
<li><a href="#by-brand-colors-with-title-and-icon-variantion">By Brand Colors wit' Title an' Ay'con Variant'n</a></li>
<li><a href="#by-color">By Color</a></li>
<li><a href="#by-special-color">By Special Color</a></li>
<li><a href="#various-features">Various Features</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<ol class="topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList"><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="/hugo-theme-relearn/pir/shortcodes/index.html"><span itemprop="name">Shorrrtcodes</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li><li
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Notice</span><meta itemprop="position" content="2"></li>
</ol>
<div class="topbar-area topbar-area-end" data-area="end">
<div class="topbar-button topbar-button-edit" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/shortcodes/notice.pir.md" target="_self" title="Edit (CTRL&#43;ALT&#43;w)"><i class="fa-fw fas fa-pen"></i></a>
</div>
<div class="topbar-button topbar-button-print" data-content-empty="disable" data-width-s="area-more" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/shortcodes/notice/index.print.html" title="Prrrint whole chapterrr (CTRL&#43;ALT&#43;p)"><i class="fa-fw fas fa-print"></i></a>
</div>
<div class="topbar-button topbar-button-prev" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html" title="Merrrmaid (🡒)"><i class="fa-fw fas fa-chevron-left"></i></a>
</div>
<div class="topbar-button topbar-button-next" data-content-empty="disable" data-width-s="show" data-width-m="show" data-width-l="show"><a class="topbar-control" href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html" title="OpenAPI (🡐)"><i class="fa-fw fas fa-chevron-right"></i></a>
</div>
<div class="topbar-button topbar-button-more" data-content-empty="hide" data-width-s="show" data-width-m="show" data-width-l="show"><button class="topbar-control" onclick="toggleTopbarFlyout(this)" type="button" title="Morrre"><i class="fa-fw fas fa-ellipsis-v"></i></button>
<div class="topbar-content">
<div class="topbar-content-wrapper">
<div class="topbar-area topbar-area-more" data-area="more">
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div id="R-main-overlay"></div>
<main id="R-body-inner" class="highlightable shortcodes" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="notice">Notice</h1>
<p>Th' <code>notice</code> shortcode shows various types o' disclaimers wit' adjust'ble color, title an' ay'con t' help ye structure yer plank.</p>
<div class="box notices cstyle primary">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> There may be pirates
</div>
<div class="box-content">
<p>It be all about th' boxes.</p>
</div>
</div>
<h2 id="usage">Usage</h2>
<div class="tab-panel" data-tab-group="shortcode-parameter">
<div class="tab-nav">
<div class="tab-nav-title">&#8203;</div>
<button
data-tab-item="callout"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('shortcode-parameter','callout')"
>
<span class="tab-nav-text">callout</span>
</button>
<button
data-tab-item="shortcode"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','shortcode')"
>
<span class="tab-nav-text">shortcode</span>
</button>
<button
data-tab-item="shortcode-positional"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','shortcode-positional')"
>
<span class="tab-nav-text">shortcode (positional)</span>
</button>
<button
data-tab-item="partial"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('shortcode-parameter','partial')"
>
<span class="tab-nav-text">partial</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="callout"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!primary] There may be pirates
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; It be all about th' boxes.</span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="shortcode"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;There may be pirates&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="shortcode-positional"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">primary</span> <span class="s">&#34;There may be pirates&#34;</span> <span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">It</span> <span class="nx">be</span> <span class="nx">all</span> <span class="nx">about</span> <span class="nx">th'</span> <span class="nx">boxes</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="partial"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span> <span class="nx">partial</span> <span class="s">&#34;shortcodes/notice.html&#34;</span> <span class="p">(</span><span class="nx">dict</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;page&#34;</span> <span class="p">.</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;style&#34;</span> <span class="s">&#34;primary&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;title&#34;</span> <span class="s">&#34;There may be pirates&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;icon&#34;</span> <span class="s">&#34;skull-crossbones&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="s">&#34;content&#34;</span> <span class="s">&#34;It be all about th' boxes.&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">)}}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<p>Callout rules has limited features as it does not provide all o' th' below parameter. Nevertheless, it be widely avail'ble 'n other Marrrkdown parsers like wit' <a href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts" rel="external" target="_self">GitHub alerts</a> or <a href="https://help.obsidian.md/Editing+and+formatting/Callouts#Change+the+title" rel="external" target="_self">Obsidian callouts</a> an' therefore be th' recommend rules fer generat'n port'ble Marrrkdown.</p>
<p>If ye want t' display a transparent expand'ble box without any border, ye can also use th' <a href="/hugo-theme-relearn/pir/shortcodes/expand/index.html"><code>expand</code> shortcode</a>.</p>
<h3 id="parameter">Parameter</h3>
<table>
<thead>
<tr>
<th style="text-align: left">Name</th>
<th style="text-align: left">Posit'n</th>
<th style="text-align: left">Default</th>
<th style="text-align: left">Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><strong>style</strong></td>
<td style="text-align: left">1</td>
<td style="text-align: left"><code>default</code></td>
<td style="text-align: left">Th' style scheme used fer th' box.<br><br>- by severity: <code>caut'n</code>, <code>important</code>, <code>info</code>, <code>note</code>, <code>tip</code>, <code>warning</code><br>- by brand color: <code>primary</code>, <code>secondary</code>, <code>accent</code><br>- by color: <code>blue</code>, <code>cyan</code>, <code>green</code>, <code>grey</code>, <code>magenta</code>, <code>orange</code>, <code>red</code><br>- by special color: <code>default</code>, <code>transparent</code>, <code>code</code><br><br>Ye can also <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">define yer own styles</a>.</td>
</tr>
<tr>
<td style="text-align: left"><strong>color</strong></td>
<td style="text-align: left"></td>
<td style="text-align: left">see notes</td>
<td style="text-align: left">Th' <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value" rel="external" target="_self">CSS color value</a> t' be used. If not set, th' chosen color depends on th' <strong>style</strong>. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n color fer th' severity<br>- fer all other styles: th' correspond'n color<br><br>This be not avail'ble us'n callout rules.</td>
</tr>
<tr>
<td style="text-align: left"><strong>title</strong></td>
<td style="text-align: left">2</td>
<td style="text-align: left">see notes</td>
<td style="text-align: left">Arbitrary text fer th' box title. Depend'n on th' <strong>style</strong> there may be a default title. Any given value will overwrite th' default.<br><br>- fer severity styles: th' match'n title fer th' severity<br>- fer all other styles: <em>&lt;empty&gt;</em><br><br>If ye want no title fer a severity style, ye have t' set this parameter t' <code>&quot; &quot;</code> (a non empty str'n filled wit' spaces)</td>
</tr>
<tr>
<td style="text-align: left"><strong>ay'con</strong></td>
<td style="text-align: left">3</td>
<td style="text-align: left">see notes</td>
<td style="text-align: left"><a href="/hugo-theme-relearn/pir/shortcodes/icon/index.html#finding-an-icon">Font Awesome ay'con name</a> set t' th' left o' th' title. Depend'n on th' <strong>style</strong> there may be a default ay'con. Any given value will overwrite th' default.<br><br>- fer severity styles: a nice match'n ay'con fer th' severity<br>- fer all other styles: <em>&lt;empty&gt;</em><br><br>If ye want no ay'con fer a severity style, ye have t' set this parameter t' <code>&quot; &quot;</code> (a non empty str'n filled wit' spaces)<br><br>This be not avail'ble us'n callout rules.</td>
</tr>
<tr>
<td style="text-align: left"><strong>expanded</strong></td>
<td style="text-align: left"></td>
<td style="text-align: left"><em>&lt;empty&gt;</em></td>
<td style="text-align: left">Whether t' draw an expander an' how th' rrrambl'n be displayed.<br><br>- <em>&lt;empty&gt;</em>: no expander be drawn an' th' rrrambl'n be permanently shown<br>- <code>true</code>: th' expander be drawn an' th' rrrambl'n be initially shown<br>- <code>false</code>: th' expander be drawn an' th' rrrambl'n be initially hidden</td>
</tr>
<tr>
<td style="text-align: left"><em><strong>&lt;content&gt;</strong></em></td>
<td style="text-align: left"></td>
<td style="text-align: left"><em>&lt;empty&gt;</em></td>
<td style="text-align: left">Arbitrary text t' be displayed 'n box.</td>
</tr>
</tbody>
</table>
<h2 id="settings">Sett'ns</h2>
<h3 id="defining-own-styles">Defin'n own Styles</h3>
<p><span class="badge cstyle cyan badge-with-title"><span class="badge-title"><i class="fa-fw fas fa-gears"></i></span><span class="badge-content">Opt'n</span></span> Besides th' predefined <code>style</code> values <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#parameter">from above</a>, ye be able t' define yer own.</p>
<div class="tab-panel" data-tab-group="config-code">
<div class="tab-nav">
<div class="tab-nav-title">hugo.</div>
<button
data-tab-item="toml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
onclick="switchTab('config-code','toml')"
>
<span class="tab-nav-text">toml</span>
</button>
<button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
<span class="tab-nav-text">yaml</span>
</button>
<button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
<span class="tab-nav-text">json</span>
</button>
</div>
<div class="tab-content-container">
<div
data-tab-item="toml"
class="tab-content tab-panel-style cstyle initial active">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">[[</span><span class="nx">params</span><span class="p">.</span><span class="nx">boxStyle</span><span class="p">]]</span>
</span></span><span class="line"><span class="cl"> <span class="nx">color</span> <span class="p">=</span> <span class="s1">&#39;gold&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">i18n</span> <span class="p">=</span> <span class="s1">&#39;&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">ay'con</span> <span class="p">=</span> <span class="s1">&#39;rainbow&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">identifier</span> <span class="p">=</span> <span class="s1">&#39;magic&#39;</span>
</span></span><span class="line"><span class="cl"> <span class="nx">title</span> <span class="p">=</span> <span class="s1">&#39;Magic&#39;</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">boxStyle</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span>- <span class="nt">color</span><span class="p">:</span><span class="w"> </span><span class="l">gold</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">i18n</span><span class="p">:</span><span class="w"> </span><span class="s2">&#34;&#34;</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">ay'con</span><span class="p">:</span><span class="w"> </span><span class="l">rainbow</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">identifier</span><span class="p">:</span><span class="w"> </span><span class="l">magic</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w"> </span><span class="nt">title</span><span class="p">:</span><span class="w"> </span><span class="l">Magic</span></span></span></code></pre></div>
</div>
</div>
<div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
<div class="tab-content-text">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;boxStyle&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl"> <span class="p">{</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;color&#34;</span><span class="p">:</span> <span class="s2">&#34;gold&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;i18n&#34;</span><span class="p">:</span> <span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;icon&#34;</span><span class="p">:</span> <span class="s2">&#34;rainbow&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;identifier&#34;</span><span class="p">:</span> <span class="s2">&#34;magic&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"> <span class="nt">&#34;title&#34;</span><span class="p">:</span> <span class="s2">&#34;Magic&#34;</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"> <span class="p">]</span>
</span></span><span class="line"><span class="cl"> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
</div>
</div>
</div>
</div>
<p>Th' <code>style</code> parameter used 'n a shortcode must match th' <code>identifier</code> 'n th' configurat'n. Th' title fer th' style will be determined from th' configured <code>title</code>. If no <code>title</code> but a <code>i18n</code> be set, th' title will be taken from th' translat'n files by that key. Th' <code>title</code> may be empty 'n which case, th' box does not contain a default title. <code>ay'con</code> an' <code>color</code> be work'n similar.</p>
<p>Ye can also redefine th' predefined styles if you&rsquo;re not satisfied wit' th' default values.</p>
<p>Below be a <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#user-defined-style">usage example</a>.</p>
<h2 id="examples">Examples</h2>
<h3 id="by-severity-using-callout-syntax">By Severity Us'n Callout Rules</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!CAUTION]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Advises about risks or negative outcomes o' certain act'ns.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!IMPORTANT]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Key informat'n users need t' know t' achieve their goal.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!INFO]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Informat'n that users &lt;ins&gt;_might_&lt;/ins&gt; find interest'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!NOTE]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Useful informat'n that users should know, even when skimm'n rrrambl'n.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!TIP]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">&gt; </span><span class="ge">Helpful advice fer do'n th'ns better or more easily.
</span></span></span><span class="line"><span class="cl"><span class="ge"></span><span class="k">
</span></span></span><span class="line"><span class="cl"><span class="k">&gt; </span><span class="ge">[!WARNING]
</span></span></span><span class="line"><span class="cl"><span class="ge"></span>&gt; Urgent info that needs immediate user attent'n t' avoid problems.</span></span></code></pre></div>
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Caut'n
</div>
<div class="box-content">
<p>Advises about risks or negative outcomes o' certain act'ns.</p>
</div>
</div>
<div class="box notices cstyle important">
<div class="box-label">
<i class="fa-fw fas fa-bolt"></i> Important
</div>
<div class="box-content">
<p>Key informat'n users need t' know t' achieve their goal.</p>
</div>
</div>
<div class="box notices cstyle info">
<div class="box-label">
<i class="fa-fw fas fa-info-circle"></i> Ahoi
</div>
<div class="box-content">
<p>Informat'n that users <ins><em>might</em></ins> find interest'n.</p>
</div>
</div>
<div class="box notices cstyle note">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-circle"></i> Avast
</div>
<div class="box-content">
<p>Useful informat'n that users should know, even when skimm'n rrrambl'n.</p>
</div>
</div>
<div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Smarrrt Arrrse
</div>
<div class="box-content">
<p>Helpful advice fer do'n th'ns better or more easily.</p>
</div>
</div>
<div class="box notices cstyle warning">
<div class="box-label">
<i class="fa-fw fas fa-exclamation-triangle"></i> Arrr
</div>
<div class="box-content">
<p>Urgent info that needs immediate user attent'n t' avoid problems.</p>
</div>
</div>
<h3 id="by-brand-colors-with-title-and-icon-variantion">By Brand Colors wit' Title an' Ay'con Variant'n</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;primary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Primary&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">primary</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;secondary&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Secondary&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">secondary</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;stopwatch&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">An</span> <span class="o">**</span><span class="nx">accent</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle primary">
<div class="box-label">
Primary
</div>
<div class="box-content">
<p>A <strong>primary</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle secondary">
<div class="box-label">
Secondary
</div>
<div class="box-content">
<p>A <strong>secondary</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle accent">
<div class="box-label">
<i class="fa-fw fas fa-stopwatch"></i>
</div>
<div class="box-content">
<p>An <strong>accent</strong> disclaimer</p>
</div>
</div>
<h3 id="by-color">By Color</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;blue&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Blue&#34;</span><span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">blue</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;cyan&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Cyan&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">cyan</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Green&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">green</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;grey&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;bug&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">grey</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;magenta&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Magenta&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">magenta</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;orange&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Orange&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;bug&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">orange</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Red&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">A</span> <span class="o">**</span><span class="nx">red</span><span class="o">**</span> <span class="nx">disclaimer</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle blue">
<div class="box-label">
Blue
</div>
<div class="box-content">
<p>A <strong>blue</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle cyan">
<div class="box-label">
Cyan
</div>
<div class="box-content">
<p>A <strong>cyan</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle green">
<div class="box-label">
Green
</div>
<div class="box-content">
<p>A <strong>green</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle grey">
<div class="box-label">
<i class="fa-fw fas fa-bug"></i>
</div>
<div class="box-content">
<p>A <strong>grey</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle magenta">
<div class="box-label">
Magenta
</div>
<div class="box-content">
<p>A <strong>magenta</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle orange">
<div class="box-label">
<i class="fa-fw fas fa-bug"></i> Orange
</div>
<div class="box-content">
<p>A <strong>orange</strong> disclaimer</p>
</div>
</div>
<div class="box notices cstyle red">
<div class="box-label">
Red
</div>
<div class="box-content">
<p>A <strong>red</strong> disclaimer</p>
</div>
</div>
<h3 id="by-special-color">By Special Color</h3>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;default&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Default&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">some</span> <span class="nx">grey</span> <span class="k">default</span> <span class="nx">color</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;code&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Code&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Colored</span> <span class="nx">like</span> <span class="nx">a</span> <span class="nx">code</span> <span class="nx">fence</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;transparent&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Transparent&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;skull-crossbones&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">vis'ble</span> <span class="nx">borders</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle default">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> Default
</div>
<div class="box-content">
<p>Just some grey default color.</p>
</div>
</div>
<div class="box notices cstyle code">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> Code
</div>
<div class="box-content">
<p>Colored like a code fence.</p>
</div>
</div>
<div class="box notices cstyle transparent">
<div class="box-label">
<i class="fa-fw fas fa-skull-crossbones"></i> Transparent
</div>
<div class="box-content">
<p>No vis'ble borders.</p>
</div>
</div>
<h3 id="various-features">Various Features</h3>
<h4 id="with-user-defined-color-font-awesome-brand-icon-and-markdown-in-title-and-content">Wit' User-Defined Color, Font Awesome Brand Ay'con an' Marrrkdown 'n Title an' Rrrambl'n</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">color</span><span class="p">=</span><span class="s">&#34;fuchsia&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;**Hugo** be _awesome_&#34;</span> <span class="nx">ay'con</span><span class="p">=</span><span class="s">&#34;fa-fw fab fa-hackerrank&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">add</span> <span class="nx">standard</span> <span class="nx">markdown</span> <span class="nx">rules</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">multiple</span> <span class="nx">paragraphs</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">bullet</span> <span class="nx">point</span> <span class="nx">lists</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="nx">_emphasized_</span><span class="p">,</span> <span class="o">**</span><span class="nx">bold</span><span class="o">**</span> <span class="nx">an'</span> <span class="nx">even</span> <span class="o">**</span><span class="nx">_bold</span> <span class="nx">emphasized_</span><span class="o">**</span> <span class="nx">text</span>
</span></span><span class="line"><span class="cl"><span class="o">-</span> <span class="p">[</span><span class="nx">links</span><span class="p">](</span><span class="nx">https</span><span class="p">:</span><span class="c1">//example.com)
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="o">-</span> <span class="nx">etc</span><span class="p">.[^</span><span class="nx">etc</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">[^</span><span class="nx">etc</span><span class="p">]:</span> <span class="nx">Et</span> <span class="nf">Cetera</span> <span class="p">(</span><span class="nx">English</span><span class="p">:</span> <span class="o">/</span><span class="nx">ɛtˈsɛtərə</span><span class="o">/</span><span class="p">),</span> <span class="nx">abbreviated</span> <span class="nx">t'</span> <span class="nx">etc</span><span class="p">.,</span> <span class="nx">etc</span><span class="p">,</span> <span class="nx">et</span> <span class="nx">cet</span><span class="p">.,</span> <span class="nx">be</span> <span class="nx">a</span> <span class="nx">Latin</span> <span class="nx">expression</span> <span class="nx">that</span> <span class="nx">be</span> <span class="nx">used</span> <span class="nx">'n</span> <span class="nx">English</span> <span class="nx">t'</span> <span class="nx">mean</span> <span class="s">&#34;and other similar things&#34;</span><span class="p">,</span> <span class="nx">or</span> <span class="s">&#34;and so forth&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="s">```plaintext
</span></span></span><span class="line"><span class="cl"><span class="s">...and even source code
</span></span></span><span class="line"><span class="cl"><span class="s">```</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">th'</span> <span class="nx">possibilities</span> <span class="nx">be</span> <span class="nf">endless</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span> <span class="p">(</span><span class="nx">almost</span> <span class="o">-</span> <span class="nx">includ'n</span> <span class="nx">other</span> <span class="nx">shorrrtcodes</span> <span class="nx">may</span> <span class="nx">or</span> <span class="nx">may</span> <span class="nx">not</span> <span class="nx">work</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle default" style="--VARIABLE-BOX-color: fuchsia;">
<div class="box-label">
<i class="fa-fw fab fa-hackerrank"></i> <strong>Cap'n Hugo</strong> be <em>awesome</em>
</div>
<div class="box-content">
<p>Ye can add standard markdown rules:</p>
<ul>
<li>multiple paragraphs</li>
<li>bullet point lists</li>
<li><em>emphasized</em>, <strong>bold</strong> an' even <strong><em>bold emphasized</em></strong> text</li>
<li><a href="https://example.com" rel="external" target="_self">links</a></li>
<li>etc.<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></li>
</ul>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-plaintext" data-lang="plaintext"><span class="line"><span class="cl">...and even source code</span></span></code></pre></div>
<blockquote>
<p>th' possibilities be endless (almost - includ'n other shorrrtcodes may or may not work) (almost - includ'n other shorrrtcodes may or may not work)</p>
</blockquote>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Et Cetera (English: /ɛtˈsɛtərə/), abbreviated t' etc., etc, et cet., be a Latin expression that be used 'n English t' mean &ldquo;and other similar things&rdquo;, or &ldquo;and so forth&rdquo;&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
</div>
</div>
<h4 id="expandable-content-area">Expand'ble Rrrambl'n Area</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;green&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">&#34;true&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">No</span> <span class="nx">need</span> <span class="nx">t'</span> <span class="nx">press</span> <span class="nx">ye</span><span class="p">!</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;red&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Expand me...&#34;</span> <span class="nx">expanded</span><span class="p">=</span><span class="s">&#34;false&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Thank</span> <span class="nx">ye</span><span class="p">!</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="expand box notices cstyle green">
<input type="checkbox" id="R-expand-c75bba260ffde80a7ca67a4a5fc3068e" aria-controls="R-expandcontent-c75bba260ffde80a7ca67a4a5fc3068e" checked>
<label class="expand-label box-label" for="R-expand-c75bba260ffde80a7ca67a4a5fc3068e">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me&hellip;
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-c75bba260ffde80a7ca67a4a5fc3068e" class="box-content expand-content">
<p>No need t' press ye!</p>
</div>
</div>
<div class="expand box notices cstyle red">
<input type="checkbox" id="R-expand-426efb5bc2583f5b0d4d209398151e72" aria-controls="R-expandcontent-426efb5bc2583f5b0d4d209398151e72">
<label class="expand-label box-label" for="R-expand-426efb5bc2583f5b0d4d209398151e72">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> Expand me&hellip;
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-426efb5bc2583f5b0d4d209398151e72" class="box-content expand-content">
<p>Thank ye!</p>
</div>
</div>
<h4 id="no-content-or-no-title">No Rrrambl'n or No Title</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="nx">title</span><span class="p">=</span><span class="s">&#34;Just a bar&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="nx">notice</span> <span class="nx">style</span><span class="p">=</span><span class="s">&#34;accent&#34;</span> <span class="o">%</span><span class="p">}}</span>
</span></span><span class="line"><span class="cl"><span class="nx">Just</span> <span class="nx">a</span> <span class="nx">box</span>
</span></span><span class="line"><span class="cl"><span class="p">{{</span><span class="o">%</span> <span class="o">/</span><span class="nx">notice</span> <span class="o">%</span><span class="p">}}</span></span></span></code></pre></div>
<div class="box notices cstyle accent">
<div class="box-label">
Just a bar
</div>
</div>
<div class="box notices cstyle accent">
<div class="box-content">
<p>Just a box</p>
</div>
</div>
<h4 id="various-callouts">Various Callouts</h4>
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-go" data-lang="go"><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">caut'n</span><span class="p">]</span> <span class="nx">Callouts</span> <span class="nx">can</span> <span class="nx">have</span> <span class="nx">custom</span> <span class="nx">titles</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Like</span> <span class="nx">this</span> <span class="nx">one</span><span class="p">.</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">caut'n</span><span class="p">]</span> <span class="nx">Title</span><span class="o">-</span><span class="nx">only</span> <span class="nx">callout</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">-</span> <span class="nx">Be</span> <span class="nx">callouts</span> <span class="nx">fold'ble</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">fold'ble</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">th'</span> <span class="nx">contents</span> <span class="nx">be</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">th'</span> <span class="nx">callout</span> <span class="nx">be</span> <span class="nx">collapsed</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">note</span><span class="p">]</span><span class="o">+</span> <span class="nx">Be</span> <span class="nx">callouts</span> <span class="nx">fold'ble</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="nx">Yes</span><span class="p">!</span> <span class="nx">In</span> <span class="nx">a</span> <span class="nx">fold'ble</span> <span class="nx">callout</span><span class="p">,</span> <span class="nx">th'</span> <span class="nx">contents</span> <span class="nx">be</span> <span class="nx">hidden</span> <span class="nx">when</span> <span class="nx">th'</span> <span class="nx">callout</span> <span class="nx">be</span> <span class="nx">collapsed</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">[!</span><span class="nx">info</span><span class="p">]</span> <span class="nx">Can</span> <span class="nx">callouts</span> <span class="nx">be</span> <span class="nx">nested</span><span class="err">?</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">[!</span><span class="nx">important</span><span class="p">]</span> <span class="nx">Yes</span><span class="p">!,</span> <span class="nx">they</span> <span class="nx">can</span><span class="p">.</span>
</span></span><span class="line"><span class="cl"><span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">&gt;</span> <span class="p">[!</span><span class="nx">tip</span><span class="p">]</span> <span class="nx">Ye</span> <span class="nx">can</span> <span class="nx">even</span> <span class="nx">use</span> <span class="nx">multiple</span> <span class="nx">layers</span> <span class="nx">o'</span> <span class="nx">nest'n</span><span class="p">.</span></span></span></code></pre></div>
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Callouts can have custom titles
</div>
<div class="box-content">
<p>Like this one.</p>
</div>
</div>
<div class="box notices cstyle caution">
<div class="box-label">
<i class="fa-fw fas fa-hand"></i> Title-only callout
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-9bcbabe6df7edef92d395da075304df5" aria-controls="R-expandcontent-9bcbabe6df7edef92d395da075304df5">
<label class="expand-label box-label" for="R-expand-9bcbabe6df7edef92d395da075304df5">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-9bcbabe6df7edef92d395da075304df5" class="box-content expand-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div>
<div class="expand box notices cstyle note">
<input type="checkbox" id="R-expand-d8cb11717d2e65dbd2bba037cac1dd87" aria-controls="R-expandcontent-d8cb11717d2e65dbd2bba037cac1dd87" checked>
<label class="expand-label box-label" for="R-expand-d8cb11717d2e65dbd2bba037cac1dd87">
<i class="expander-icon fa-fw fas fa-chevron-down"></i>
<i class="expander-icon fa-fw fas fa-chevron-right"></i> <i class="fa-fw fas fa-exclamation-circle"></i> Be callouts fold'ble?
</label>
<div class="box-spacer"></div>
<div id="R-expandcontent-d8cb11717d2e65dbd2bba037cac1dd87" class="box-content expand-content">
<p>Yes! In a fold'ble callout, th' contents be hidden when th' callout be collapsed</p>
</div>
</div>
<div class="box notices cstyle info">
<div class="box-label">
<i class="fa-fw fas fa-info-circle"></i> Can callouts be nested?
</div>
<div class="box-content">
<p><div class="box notices cstyle important">
<div class="box-label">
<i class="fa-fw fas fa-bolt"></i> Yes!, they can.
</div>
<div class="box-content">
<p><div class="box notices cstyle tip">
<div class="box-label">
<i class="fa-fw fas fa-lightbulb"></i> Ye can even use multiple layers o' nest'n.
</div>
</div>
</div>
</div>
</div>
</div>
<h4 id="code-with-collapsed-colored-borders">Code wit' Collapsed Colored Borders</h4>
<div class="highlight wrap-code"><pre tabindex="0"><code>&gt; [!secondary]
&gt; ```c
&gt; // Wit' colored border 'n Marrrkdown rules
&gt; printf(&#34;Hello World!&#34;);
&gt; ```
{{% notice style=&#34;red&#34; %}}
```c
// Wit' colored border 'n Shortcode rules
printf(&#34;Hello World!&#34;);
```
{{% /notice %}}</code></pre></div>
<div class="box notices cstyle secondary">
<div class="box-content">
<p><div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// Wit' colored border 'n Marrrkdown rules
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div>
</div>
</div>
<div class="box notices cstyle red">
<div class="box-content">
<div class="highlight wrap-code"><pre tabindex="0" class="chroma"><code class="language-c" data-lang="c"><span class="line"><span class="cl"><span class="c1">// Wit' colored border 'n Shortcode rules
</span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="nf">printf</span><span class="p">(</span><span class="s">&#34;Hello World!&#34;</span><span class="p">);</span></span></span></code></pre></div>
</div>
</div>
<h4 id="user-defined-style">User-defined Style</h4>
<p>Self-defined styles can be <a href="/hugo-theme-relearn/pir/shortcodes/notice/index.html#defining-own-styles">configured</a> 'n yer <code>hugo.toml</code> an' used fer every shortcode, that accepts a <code>style</code> parameter.</p>
<div class="highlight wrap-code"><pre tabindex="0"><code>&gt; [!magic]
&gt; Maaagic!</code></pre></div>
<div class="box notices cstyle magic">
<div class="box-label">
<i class="fa-fw fas fa-rainbow"></i> Magic
</div>
<div class="box-content">
<p>Maaagic!</p>
</div>
</div>
<footer class="footline">
<div class="R-taxonomy taxonomy-categories cstyle" title="Categorrries" style="--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);">
<i class="fa-fw fas fa-layer-group"></i>
<ul>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/howto/index.html">Howto</a></li>
<li><a class="term-link" href="/hugo-theme-relearn/pir/categories/reference/index.html">Reference</a></li>
</ul>
</div>
</footer>
</article>
</div>
</main>
</div>
<aside id="R-sidebar" class="default-animation showVisitedLinks">
<div id="R-header-topbar" class="default-animation"></div>
<div id="R-header-wrapper" class="default-animation">
<div id="R-header" class="default-animation">
<style>
a#R-logo {
font-size: 1.875rem;
margin-top: -.8125rem;
max-width: 60%;
width: 14.125rem;
}
@media only all and (max-width: 59.999rem) {
a#R-logo {
font-size: 1.5625rem;
margin-top: -.1875rem;
}
}
#R-logo svg,
#R-logo svg * {
opacity: .945;
}
#R-logo svg {
margin-bottom: -1.25rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
width: 40.5%;
}
@media only all and (max-width: 59.999rem) {
#R-logo svg {
margin-bottom: -.75rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
}
}
</style>
<a id="R-logo" href="/hugo-theme-relearn/pir/index.html">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.044 64.044">
<path d="M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
<path d="M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style="color:#000;fill:#282828;stroke-width:1.02352;-inkscape-stroke:none" transform="translate(-40.698 -95.175)"/>
<path d="M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style="fill:#282828;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform="translate(-40.698 -95.175)"/>
</svg>Relearn
</a>
</div>
<script>
window.index_js_url="/pir/searchindex.js?1728829601";
</script>
<search><form action="/hugo-theme-relearn/pir/search/index.html" method="get">
<div class="searchbox default-animation">
<button class="search-detail" type="submit" title="Searrrch (CTRL+ALT+f)"><i class="fas fa-search"></i></button>
<label class="a11y-only" for="R-search-by">Searrrch</label>
<input data-search-input id="R-search-by" name="search-by" class="search-by" type="search" placeholder="Searrrch...">
<button class="search-clear" type="button" data-search-clear="" title="Clearrr searrrch"><i class="fas fa-times" title="Clearrr searrrch"></i></button>
</div>
</form></search>
<script>
var contentLangs=['en'];
</script>
<script src="/hugo-theme-relearn/js/auto-complete.js?1728829601" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.min.js?1728829601" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.stemmer.support.min.js?1728829601" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.multi.min.js?1728829601" defer></script>
<script src="/hugo-theme-relearn/js/lunr/lunr.en.min.js?1728829601" defer></script>
<script src="/hugo-theme-relearn/js/search.js?1728829601" defer></script>
</div>
<div id="R-homelinks" class="default-animation">
<hr class="padding">
</div>
<div id="R-content-wrapper" class="highlightable">
<div id="R-topics">
<ul class="enlarge morespace collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/index.html"><input type="checkbox" id="R-section-f5db5b284a3d023503978d00824e9c16" aria-controls="R-subsections-f5db5b284a3d023503978d00824e9c16"><label for="R-section-f5db5b284a3d023503978d00824e9c16"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Introduction</span></label><a class="padding" href="/hugo-theme-relearn/pir/introduction/index.html"><i class='fa-fw fas fa-star'></i> Introduction<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-f5db5b284a3d023503978d00824e9c16" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/quickstart/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/quickstart/index.html">Gettin&#39; started<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/tools/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/tools/index.html">Tool Integration<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/releasenotes/index.html"><input type="checkbox" id="R-section-3709e95cc0c4e69d621907836f02a802" aria-controls="R-subsections-3709e95cc0c4e69d621907836f02a802"><label for="R-section-3709e95cc0c4e69d621907836f02a802"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu What&#39;s New</span></label><a class="padding" href="/hugo-theme-relearn/pir/introduction/releasenotes/index.html">What&#39;s New<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-3709e95cc0c4e69d621907836f02a802" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/releasenotes/5/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/releasenotes/5/index.html">Version 5<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/releasenotes/4/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/releasenotes/4/index.html">Version 4<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/releasenotes/3/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/releasenotes/3/index.html">Version 3<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/releasenotes/2/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/releasenotes/2/index.html">Version 2<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/releasenotes/1/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/releasenotes/1/index.html">Version 1<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/changelog/index.html"><input type="checkbox" id="R-section-5c9c6147c097733caa9f1d9d5c203779" aria-controls="R-subsections-5c9c6147c097733caa9f1d9d5c203779"><label for="R-section-5c9c6147c097733caa9f1d9d5c203779"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Changelog</span></label><a class="padding" href="/hugo-theme-relearn/pir/introduction/changelog/index.html">Changelog<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-5c9c6147c097733caa9f1d9d5c203779" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/changelog/5/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/changelog/5/index.html">Version 5<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/changelog/4/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/changelog/4/index.html">Version 4<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/changelog/3/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/changelog/3/index.html">Version 3<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/changelog/2/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/changelog/2/index.html">Version 2<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/introduction/changelog/1/index.html"><a class="padding" href="/hugo-theme-relearn/pir/introduction/changelog/1/index.html">Version 1<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/index.html"><input type="checkbox" id="R-section-373ce17997fa5c698271782e14b5d8ee" aria-controls="R-subsections-373ce17997fa5c698271782e14b5d8ee"><label for="R-section-373ce17997fa5c698271782e14b5d8ee"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Configurrrat&#39;n</span></label><a class="padding" href="/hugo-theme-relearn/pir/configuration/index.html"><i class='fa-fw fas fa-gears'></i> Configurrrat&#39;n<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-373ce17997fa5c698271782e14b5d8ee" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sitemanagement/index.html"><input type="checkbox" id="R-section-d173a7a37f5265d2e99b925161a79052" aria-controls="R-subsections-d173a7a37f5265d2e99b925161a79052"><label for="R-section-d173a7a37f5265d2e99b925161a79052"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Site Management</span></label><a class="padding" href="/hugo-theme-relearn/pir/configuration/sitemanagement/index.html">Site Management<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-d173a7a37f5265d2e99b925161a79052" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sitemanagement/structure/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sitemanagement/structure/index.html">Directory Structure<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sitemanagement/multilingual/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sitemanagement/multilingual/index.html">Multilingual<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sitemanagement/meta/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sitemanagement/meta/index.html">Meta Information<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sitemanagement/deployment/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sitemanagement/deployment/index.html">Deployment Scenarios<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sitemanagement/outputformats/index.html">Available Output Formats<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sitemanagement/stableoutput/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sitemanagement/stableoutput/index.html">Stable Output<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/branding/index.html"><input type="checkbox" id="R-section-4bc29dccbc68f60c646d851fec3956b8" aria-controls="R-subsections-4bc29dccbc68f60c646d851fec3956b8"><label for="R-section-4bc29dccbc68f60c646d851fec3956b8"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Brrrand&#39;n</span></label><a class="padding" href="/hugo-theme-relearn/pir/configuration/branding/index.html">Brrrand&#39;n<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-4bc29dccbc68f60c646d851fec3956b8" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/branding/logo/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/branding/logo/index.html">Logo<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/branding/colors/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/branding/colors/index.html">Brrrand&#39;n<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/branding/modules/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/branding/modules/index.html">Module Theming<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/branding/generator/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/branding/generator/index.html">Stylesheet Generrrat&#39;r<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sidebar/index.html"><input type="checkbox" id="R-section-97a9aa0832ea450d18b947696fa72f80" aria-controls="R-subsections-97a9aa0832ea450d18b947696fa72f80"><label for="R-section-97a9aa0832ea450d18b947696fa72f80"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Sidebar</span></label><a class="padding" href="/hugo-theme-relearn/pir/configuration/sidebar/index.html">Sidebar<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-97a9aa0832ea450d18b947696fa72f80" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sidebar/width/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sidebar/width/index.html">Width<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sidebar/headerfooter/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sidebar/headerfooter/index.html">Header &amp; Footer<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sidebar/search/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sidebar/search/index.html">Search<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/sidebar/shortcutmenu/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/sidebar/shortcutmenu/index.html">Shortcut Menu<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/content/index.html"><input type="checkbox" id="R-section-a7651b9fec8b34e0945b5a91c2d83c82" aria-controls="R-subsections-a7651b9fec8b34e0945b5a91c2d83c82"><label for="R-section-a7651b9fec8b34e0945b5a91c2d83c82"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Content</span></label><a class="padding" href="/hugo-theme-relearn/pir/configuration/content/index.html">Content<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-a7651b9fec8b34e0945b5a91c2d83c82" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/content/width/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/content/width/index.html">Width<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/content/titles/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/content/titles/index.html">Titles &amp; Breadcrumbs<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/content/headings/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/content/headings/index.html">Headings<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/content/linking/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/content/linking/index.html">Linking<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/content/hidden/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/content/hidden/index.html">Hidden Pages<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/index.html"><input type="checkbox" id="R-section-6a735f3de712a22448296527a9bbc997" aria-controls="R-subsections-6a735f3de712a22448296527a9bbc997"><label for="R-section-6a735f3de712a22448296527a9bbc997"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Customization</span></label><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/index.html">Customization<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-6a735f3de712a22448296527a9bbc997" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/partials/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/partials/index.html">Partials<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/dependencies/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/dependencies/index.html">Extending Scripts<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/imageeffects/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/imageeffects/index.html">Image Effects<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/topbar/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/topbar/index.html">Topbarrr<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/designs/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/designs/index.html">Page Designs<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/outputformats/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/outputformats/index.html">Output Formats<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/customization/taxonomy/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/customization/taxonomy/index.html">Taxonomies<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/configuration/reference/index.html"><a class="padding" href="/hugo-theme-relearn/pir/configuration/reference/index.html">Options Reference<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/index.html"><input type="checkbox" id="R-section-d03cb6e1c21801cf748d58b63765cc8b" aria-controls="R-subsections-d03cb6e1c21801cf748d58b63765cc8b"><label for="R-section-d03cb6e1c21801cf748d58b63765cc8b"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Rambl&#39;n</span></label><a class="padding" href="/hugo-theme-relearn/pir/authoring/index.html"><i class='fa-fw fab fa-markdown'></i> Rambl&#39;n<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-d03cb6e1c21801cf748d58b63765cc8b" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/structure/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/structure/index.html">Directory Structure<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/frontmatter/index.html"><input type="checkbox" id="R-section-9d5ee0cc9a5cea6c73d797aa2580b6b9" aria-controls="R-subsections-9d5ee0cc9a5cea6c73d797aa2580b6b9"><label for="R-section-9d5ee0cc9a5cea6c73d797aa2580b6b9"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Front Matter</span></label><a class="padding" href="/hugo-theme-relearn/pir/authoring/frontmatter/index.html">Front Matter<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-9d5ee0cc9a5cea6c73d797aa2580b6b9" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/frontmatter/designs/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/frontmatter/designs/index.html">Page Designs<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/frontmatter/navigationmenu/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/frontmatter/navigationmenu/index.html">Navigation Menu<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/frontmatter/linking/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/frontmatter/linking/index.html">Linking<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/frontmatter/topbar/index.html">Topbarrr<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/frontmatter/reference/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/frontmatter/reference/index.html">Reference<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/meta/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/meta/index.html">Meta Information<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/markdown/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/markdown/index.html">Marrrkdown Rules<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/authoring/imageeffects/index.html"><a class="padding" href="/hugo-theme-relearn/pir/authoring/imageeffects/index.html">Image Effects<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="parent " data-nav-id="/hugo-theme-relearn/pir/shortcodes/index.html"><input type="checkbox" id="R-section-3fd53efe5229f2c1a55795ee597d09d8" aria-controls="R-subsections-3fd53efe5229f2c1a55795ee597d09d8" checked><label for="R-section-3fd53efe5229f2c1a55795ee597d09d8"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Shorrrtcodes</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/index.html"><i class='fa-fw fas fa-shapes'></i> Shorrrtcodes<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-3fd53efe5229f2c1a55795ee597d09d8" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/badge/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/badge/index.html">Badge<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/button/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/button/index.html">Button<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/index.html"><input type="checkbox" id="R-section-d7ecedf0d1b5486d6a0c132e8a234d06" aria-controls="R-subsections-d7ecedf0d1b5486d6a0c132e8a234d06"><label for="R-section-d7ecedf0d1b5486d6a0c132e8a234d06"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu Children</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/index.html">Children<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-d7ecedf0d1b5486d6a0c132e8a234d06" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/test/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/test/index.html">plank X<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html"><input type="checkbox" id="R-section-d3cff5da0d8420d4871c516833b2f97d" aria-controls="R-subsections-d3cff5da0d8420d4871c516833b2f97d"><label for="R-section-d3cff5da0d8420d4871c516833b2f97d"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/index.html">plank 1<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-d3cff5da0d8420d4871c516833b2f97d" class="collapsible-menu">
<li class="alwaysopen " data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html"><input type="checkbox" id="R-section-8c27e33b2765b18da99f6c8dc40400b8" aria-controls="R-subsections-8c27e33b2765b18da99f6c8dc40400b8" checked><label for="R-section-8c27e33b2765b18da99f6c8dc40400b8"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-8c27e33b2765b18da99f6c8dc40400b8" class="collapsible-menu">
<li class="headless alwaysopen " data-nav-id=""><input type="checkbox" id="R-section-51e1e8deb580f78714eca799da517f1d" aria-controls="R-subsections-51e1e8deb580f78714eca799da517f1d" checked><label for="R-section-51e1e8deb580f78714eca799da517f1d"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1-2 (headless)</span></label><span class="padding">plank 1-1-2 (headless)</span><ul id="R-subsections-51e1e8deb580f78714eca799da517f1d" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html">plank 1-1-2-1<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html">plank 1-1-2-2<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-2/index.html">plank 2<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html"><input type="checkbox" id="R-section-c4351ae325c16fd2130d6c815bffc83f" aria-controls="R-subsections-c4351ae325c16fd2130d6c815bffc83f"><label for="R-section-c4351ae325c16fd2130d6c815bffc83f"><i class="fa-fw fas fa-chevron-down"></i><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 3</span></label><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-3/index.html">plank 3<i class="fa-fw fas fa-check read-icon"></i></a><ul id="R-subsections-c4351ae325c16fd2130d6c815bffc83f" class="collapsible-menu">
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/children/children-3/test3/index.html">plank 3-1<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/expand/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/expand/index.html">Expand<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/highlight/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/highlight/index.html">Highlight<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/icon/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/icon/index.html">Icon<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/include/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/include/index.html">Include<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/math/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/math/index.html">Math<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/mermaid/index.html">Merrrmaid<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="active " data-nav-id="/hugo-theme-relearn/pir/shortcodes/notice/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/notice/index.html">Notice<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/openapi/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/openapi/index.html">OpenAPI<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/resources/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/resources/index.html">Resources<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/siteparam/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/siteparam/index.html">SiteParam<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/tab/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/tab/index.html">Tab<i class="fa-fw fas fa-check read-icon"></i></a></li>
<li class="" data-nav-id="/hugo-theme-relearn/pir/shortcodes/tabs/index.html"><a class="padding" href="/hugo-theme-relearn/pir/shortcodes/tabs/index.html">Tabs<i class="fa-fw fas fa-check read-icon"></i></a></li></ul></li>
</ul>
</div>
<div id="R-shortcuts">
<div class="nav-title padding">Morrre</div>
<ul class="space">
<li><a class="padding" href="https://github.com/McShelby/hugo-theme-relearn"><i class="fa-fw fab fa-github"></i> GitHub Repo</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/showcase/"><i class="fa-fw fas fa-camera"></i> Showcases</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/more/credits/"><i class="fa-fw fas fa-bullhorn"></i> Crrredits</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/tags/"><i class="fa-fw fas fa-tags"></i> Arrr! Tags</a></li>
<li><a class="padding" href="/pir/hugo-theme-relearn/pir/categories/"><i class="fa-fw fas fa-layer-group"></i> Categorrries</a></li>
</ul>
</div>
<div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter"></div>
<div id="R-menu-footer">
<hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter">
<div id="R-prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks showLangSwitch showVariantSwitch showVisitedLinks">
<ul>
<li id="R-select-language-container" class="footerLangSwitch showLangSwitch">
<div class="padding menu-control">
<i class="fa-fw fas fa-language"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-language">Language</label>
<select id="R-select-language" onchange="location = this.querySelector( this.value ).dataset.url;">
<option id="R-select-language-en" value="#R-select-language-en" data-url="/hugo-theme-relearn/shortcodes/notice/index.html" lang="en">English</option>
<option id="R-select-language-pir" value="#R-select-language-pir" data-url="/hugo-theme-relearn/pir/shortcodes/notice/index.html" lang="art-x-pir" selected>Arrr! ☠ Pirrratish ☠</option>
</select>
</div>
<div class="clear"></div>
</div>
</li>
<li id="R-select-variant-container" class="footerVariantSwitch showVariantSwitch">
<div class="padding menu-control">
<i class="fa-fw fas fa-paint-brush"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-variant">Theme</label>
<select id="R-select-variant" onchange="window.variants && variants.changeVariant( this.value );">
<option id="R-select-variant-relearn-auto" value="relearn-auto" selected>Relearn Light/Dark</option>
<option id="R-select-variant-relearn-light" value="relearn-light">Relearn Light</option>
<option id="R-select-variant-relearn-dark" value="relearn-dark">Relearn Dark</option>
<option id="R-select-variant-relearn-bright" value="relearn-bright">Relearn Bright</option>
<option id="R-select-variant-zen-auto" value="zen-auto">Zen Light/Dark</option>
<option id="R-select-variant-zen-light" value="zen-light">Zen Light</option>
<option id="R-select-variant-zen-dark" value="zen-dark">Zen Dark</option>
<option id="R-select-variant-retro-auto" value="retro-auto">Retro Learn/Neon</option>
<option id="R-select-variant-neon" value="neon">Neon</option>
<option id="R-select-variant-learn" value="learn">Learn</option>
<option id="R-select-variant-blue" value="blue">Blue</option>
<option id="R-select-variant-green" value="green">Green</option>
<option id="R-select-variant-red" value="red">Red</option>
</select>
</div>
<div class="clear"></div>
</div>
<script>window.variants && variants.markSelectedVariant();</script>
</li>
<li class="footerVisitedLinks showVisitedLinks">
<div class="padding menu-control">
<i class="fa-fw fas fa-history"></i>
<span>&nbsp;</span>
<div class="control-style">
<button onclick="clearHistory();">Clearrr Historrry</button>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div id="R-footer" class="footerFooter showFooter">
<span class="github-buttons"></span>
<p>Built with <a href="https://github.com/McShelby/hugo-theme-relearn" title="love"><i class="fas fa-heart"></i></a> by <a href="https://gohugo.io/">Hugo</a></p>
<script>
function githubButtonsScheme(){
var scheme = 'light';
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#R-sidebar' ) ).getPropertyValue( 'background-color' );
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
if( colorValues.length === 3 && ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165) ){
scheme = 'dark';
}
return scheme;
}
function githubButtonsInit(){
if( !window.githubButtons ){
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme="${scheme}" data-icon="octicon-cloud-download" aria-label="Download McShelby/hugo-theme-relearn on GitHub">Download</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn" data-color-scheme="${scheme}" data-icon="octicon-star" data-show-count="true" aria-label="Star McShelby/hugo-theme-relearn on GitHub">Star</a>
<a class="github-button" href="https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme="${scheme}" data-icon="octicon-repo-forked" data-show-count="true" aria-label="Fork McShelby/hugo-theme-relearn on GitHub">Fork</a>
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
}
document.addEventListener( 'themeVariantLoaded', function( e ){
setTimeout( githubButtonsInit, 400 );
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setTimeout( githubButtonsInit, 400 );
});
</script>
<script async src="/hugo-theme-relearn/js/github-buttons.js?1728829601"></script>
</div>
</div>
</div>
</aside>
<script src="/hugo-theme-relearn/js/clipboard.min.js?1728829601" defer></script>
<script src="/hugo-theme-relearn/js/perfect-scrollbar.min.js?1728829601" defer></script>
<script src="/hugo-theme-relearn/js/theme.js?1728829601" defer></script>
</body>
</html>