hugo-theme-relearn/pir/basics/topbar/index.html

710 lines
57 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="pir" dir="rtl">
<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.118.2">
<meta name="generator" content="Relearn 5.20.0+tip">
<meta name="description" content="Documentation for Hugo Relearn Theme">
<meta name="author" content="Sören Weber">
<title>Topbarrr modificat&#39;n :: Cap&#39;n Hugo Relearrrn Theme</title>
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html" rel="alternate" hreflang="x-default">
<link href="https://McShelby.github.io/hugo-theme-relearn/basics/topbar/index.html" rel="alternate" hreflang="en">
<link href="https://McShelby.github.io/hugo-theme-relearn/pir/basics/topbar/index.html" rel="alternate" hreflang="pir">
<link href="../../../pir/basics/topbar/index.xml" rel="alternate" type="application/rss+xml" title="Topbarrr modificat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../../pir/basics/topbar/index.print.html" rel="alternate" type="text/html" title="Topbarrr modificat&#39;n :: Cap&#39;n Hugo Relearrrn Theme">
<link href="../../../images/logo.svg?1695062975" rel="icon" type="image/svg+xml">
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how-to-use -->
<link href="../../../css/fontawesome-all.min.css?1695062975" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fontawesome-all.min.css?1695062975" rel="stylesheet"></noscript>
<link href="../../../css/nucleus.css?1695062975" rel="stylesheet">
<link href="../../../css/auto-complete.css?1695062975" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/auto-complete.css?1695062975" rel="stylesheet"></noscript>
<link href="../../../css/perfect-scrollbar.min.css?1695062975" rel="stylesheet">
<link href="../../../css/fonts.css?1695062975" rel="stylesheet" media="print" onload="this.media='all';this.onload=null;"><noscript><link href="../../../css/fonts.css?1695062975" rel="stylesheet"></noscript>
<link href="../../../css/theme.css?1695062975" rel="stylesheet">
<link href="../../../css/theme-auto.css?1695062975" rel="stylesheet" id="variant-style">
<link href="../../../css/variant.css?1695062975" rel="stylesheet">
<link href="../../../css/print.css?1695062975" rel="stylesheet" media="print">
<link href="../../../css/ie.css?1695062975" rel="stylesheet">
<script src="../../../js/url.js?1695062975"></script>
<script src="../../../js/variant.js?1695062975"></script>
<script>
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
window.index_js_url="../../../pir/index.search.js";
var root_url="../../../";
var baseUri=root_url.replace(/\/$/, '');
// translations
window.T_Copy_to_clipboard = 'Copy t\u0027 clipboard';
window.T_Copied_to_clipboard = 'Copied t\u0027 clipboard!';
window.T_Copy_link_to_clipboard = 'Copy link t\u0027 clipboard';
window.T_Link_copied_to_clipboard = 'Copied link t\u0027 clipboard!';
window.T_No_results_found = 'No rrresults found fer \u0022{0}\u0022';
window.T_N_results_found = '{1} rrresults found fer \u0022{0}\u0022';
// some further base stuff
var baseUriFull='https:\/\/McShelby.github.io\/hugo-theme-relearn/';
window.variants && variants.init( [ 'auto', 'relearn-bright', 'relearn-light', 'relearn-dark', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
</script>
<style>
#body img.bg-white {
background-color: white;
}
</style>
</head>
<body class="mobile-support html disableInlineCopyToClipboard" data-url="../../../pir/basics/topbar/index.html">
<div id="body" class="default-animation">
<div id="body-overlay"></div>
<nav id="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="#areas">Areas</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#redefining-areas">Redefin'n Areas</a></li>
<li><a href="#defining-own-buttons">Defin'n own Buttons</a>
<ul>
<li><a href="#button-types">Button Types</a></li>
<li><a href="#button-parameter">Button Parameter</a></li>
</ul>
</li>
<li><a href="#reference">Reference</a>
<ul>
<li><a href="#button">Button</a></li>
<li><a href="#area-button">Area-Button</a></li>
<li><a href="#predefined-buttons">Predefined Buttons</a></li>
<li><a href="#predefined-overlay-buttons">Predefined Overlay-Buttons</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<ol class="topbar-breadcrumbs highlightable" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/index.html"><span itemprop="name">Cap&#39;n Hugo Relearrrn Theme</span></a><meta itemprop="position" content="1">&nbsp;>&nbsp;</li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><a itemprop="item" href="../../../pir/basics/index.html"><span itemprop="name">Basics</span></a><meta itemprop="position" content="2">&nbsp;>&nbsp;</li>
<li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">Topbarrr modificat&#39;n</span><meta itemprop="position" content="3"></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/basics/topbar/_index.pir.md" target="_blank" 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="../../../pir/basics/topbar/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="../../../pir/basics/generator/index.html" title="Stylesheet generrrat&#39;r (🡒)">
<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="../../../pir/basics/history/index.html" title="Historrry (🡐)">
<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="main-overlay"></div>
<main id="body-inner" class="highlightable default" tabindex="-1">
<div class="flex-block-wrapper">
<article class="default">
<header class="headline">
</header>
<h1 id="topbarrr-modificatn">Topbarrr modificat&#39;n</h1>
<p>Th' theme comes wit' a reasonably configured topbar.</p>
<p><a href="#image-9e5e52e8d3a7f8c4c8b9fa35ba0e61aa" class="lightbox-link"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="image-9e5e52e8d3a7f8c4c8b9fa35ba0e61aa"><img src="../../../basics/topbar/topbar-closed.png" alt="Topbar on mobile devices" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
<p>Nevertheless, yer requirements may differ from this configurat'n. Luckily th' theme got ye covered as th' themebar, its buttons an' th' functionality behind these buttons be fully configur'ble by ye.</p>
<h2 id="areas">Areas</h2>
<p>Th' default configurat'n comes wit' three predefined areas that may contain an arbitrary set o' buttons.</p>
<p><a href="#image-e8a3578cab656b62f0640d386ff3bec1" class="lightbox-link"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="figure-image bg-white border lightbox noshadow" style="height: auto; width: auto;" loading="lazy"></a>
<a href="javascript:history.back();" class="lightbox-back" id="image-e8a3578cab656b62f0640d386ff3bec1"><img src="../../../basics/topbar/topbar-areas.png" alt="Topbar wit' default areas marked" class="lightbox-image bg-white border lightbox noshadow" loading="lazy"></a></p>
<ul>
<li><strong>start</strong>: shown between menu an' breadcrumb</li>
<li><strong>end</strong>: shown on th' opposite breadcrumb side 'n comparison t' th' <em>start</em> area</li>
<li><strong>more</strong>: shown when press'n th'
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-ellipsis-v"></i>
</button>
</span> <em>more</em> button 'n th' topbar</li>
</ul>
<p>While ye can not add additional areas 'n th' topbar, ye be free t' configure addtional buttons that behave like th' <em>more</em> button, provid'n further user defined areas.</p>
<h2 id="buttons">Buttons</h2>
<p>Th' theme ships wit' th' follow'n predefined buttons (from left t' right 'n th' screenshot)</p>
<ul>
<li>
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-bars"></i>
</button>
</span> <strong>sidebar</strong>: opens th' sidebar flyout if 'n mobile layout</li>
<li>
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-list-alt"></i>
</button>
</span> <strong>toc</strong>: opens th' t'ble o' contents 'n an overlay</li>
<li>
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-pen"></i>
</button>
</span> <strong>edit</strong>: browses t' th' edit'ble plank if th' <code>editURL</code> <a href="../../../basics/configuration/#global-site-parameters">parameter be set</a></li>
<li>
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-print"></i>
</button>
</span> <strong>print</strong>: browses t' th' chapters print'ble plank if <a href="../../../basics/configuration/#activate-print-support">print support</a> was activated</li>
<li>
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-chevron-left"></i>
</button>
</span> <strong>prev</strong>: browses t' th' previous plank if there be one</li>
<li>
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-chevron-right"></i>
</button>
</span> <strong>next</strong>: browses t' th' next plank if there be one</li>
<li>
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-ellipsis-v"></i>
</button>
</span> <strong>more</strong>: opens th' overlay fer th' <em>more</em> area</li>
</ul>
<p>Not all buttons be displayed at every given time. This be configur'ble (see below if interested).</p>
<h2 id="redefining-areas">Redefin'n Areas</h2>
<p>Each predefined area an' button comes 'n their own file. By that it be easy fer ye t' overwrite an area file 'n yer installat'n reus'n only th' buttons ye like.</p>
<p>Eg. ye can redefine th' predefined <em>end</em> area by add'n th' file <code>layouts/partials/topbar/area/end.html</code> 'n yer installt'n (not 'n th' theme itself) t' remove all but th' <em>more</em> button.</p>
<div class="wrap-code highlight"><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;topbar/button/more.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="p">)}}</span></span></span></code></pre></div><h2 id="defining-own-buttons">Defin'n own Buttons</h2>
<h3 id="button-types">Button Types</h3>
<p>Th' theme distingushies between two types o' buttons:</p>
<ul>
<li><strong>button</strong>: a click'ble button that either browses t' another ship or triggers a user defined script</li>
<li><strong>area-button</strong>: th' template fer th'
<span class="btn cstyle transparent">
<button type="button">
<i class="fa-fw fas fa-ellipsis-v"></i>
</button>
</span> <em>more</em> button, t' define yer own area overlay buttons</li>
</ul>
<h3 id="button-parameter">Button Parameter</h3>
<h4 id="screen-widths-and-actions">Screen Widths an' Act'ns</h4>
<p>Depend'n on th' screen width ye can configure how th' button should behave. Screen width be divided into three classes:</p>
<ul>
<li><strong>s</strong>: (controlled by th' <code>onwidths</code> parameter) mobile layout whar' th' menu sidebar be hidden</li>
<li><strong>m</strong>: (controlled by th' <code>onwidthm</code> parameter) desktop layout wit' vis'ble sidebar while th' rrrambl'n area width still resizes</li>
<li><strong>l</strong>: (controlled by th' <code>onwidthl</code> parameter) desktop layout wit' vis'ble sidebar once th' rrrambl'n area reached its maximum width</li>
</ul>
<p>For each width class, ye can configure one o' th' follow'n act'ns:</p>
<ul>
<li><strong>show</strong>: th' button be displayed 'n its configured area</li>
<li><strong>hide</strong>: th' button be hidden</li>
<li><strong>area-XXX</strong>: th' button be moved from its configured area into th' area <code>XXX</code>; eg. this be used t' move buttons t' th' <em>more</em> area 'n th' mobile layout</li>
</ul>
<h4 id="hiding-and-disabling-stuff">Hid'n an' Disabl'n Stuff</h4>
<p>While hid'n a button dependend on th' screen size can be configured wit' th' above described <em>hide</em> act'n, ye may want t' hide th' button on certain other condit'ns aswell.</p>
<p>For example, th' <em>print</em> button 'n its default configurat'n should only be displayed if print support was configured. This be done 'n yer button template by check'n th' condit'ns first before display'n th' button (see <code>layouts/partials/topbar/button/print.html</code>).</p>
<p>Another prefered condit'n fer hid'n a button be, if th' displayed overlay be empty. This be th' case fer th' <em>toc</em> (see <code>layouts/partials/topbar/button/toc.html</code>) aswell as th' <em>more</em> button (see <code>layouts/partials/topbar/button/more.html</code>) an' controlled by th' parameter <code>onempty</code>.</p>
<p>This parameter can have one o' th' follow'n values:</p>
<ul>
<li><strong>hide</strong>: th' button be hidden if th' overlay be empty</li>
<li><strong>dis'ble</strong>: th' button be disabled if th' overlay be empty</li>
</ul>
<p>If ye want t' dis'ble a button contain'n <em>no overlay</em>, this can be achieved by an empty <code>href</code> parameter. An example can be seen 'n th' <em>prev</em> button (see <code>layouts/partials/topbar/button/prev.html</code>) whar' th' URL fer th' previous ship may be empty.</p>
<h2 id="reference">Reference</h2>
<h3 id="button">Button</h3>
<p>Contains th' basic button functionality an' be used as a base implementat'n fer all other buttons (<code>layouts/partials/topbar/func/button.html</code>). Call this from yer own button templates if ye want t' implement a button wit' <em>no overlay</em> area.</p>
<h4 id="parameter">Parameter</h4>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>plank</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory reference t' th' plank.</td>
</tr>
<tr>
<td><strong>class</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory unique class name fer this button. Display'n two buttons wit' th' same value fer <strong>class</strong> be undefined.</td>
</tr>
<tr>
<td><strong>href</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Either th' destinat'n URL fer th' button or JavaScript code t' be executed on click.<br><br>- if start'n wit' <code>javascript:</code> all follow'n text will be executed 'n yer browser<br>- every other str'n will be interpreted as URL<br><br>If this parameter be not set, th' button will be displayed<br><br>- as disabled if no <strong>rrrambl'n</strong> be specified<br>- accord'n t' <strong>onempty</strong> if any <strong>rrrambl'n</strong> be given.</td>
</tr>
<tr>
<td><strong>ay'con</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory <a href="../../../shortcodes/icon/#finding-an-icon">Font Awesome ay'con name</a>.</td>
</tr>
<tr>
<td><strong>onempty</strong></td>
<td><code>dis'ble</code></td>
<td>Defines what t' do wit' th' button if its rrrambl'n overlay be empty:<br><br>- <code>dis'ble</code>: Th' button be displayed 'n disabled state.<br>- <code>hide</code>: Th' button be not displayed. Th' next button will move into th' gap.</td>
</tr>
<tr>
<td><strong>onwidths</strong></td>
<td><code>show</code></td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its configured area<br>- <code>hide</code>: Th' button be hidden.<br>- <code>area-XXX</code>: Th' button be moved from its configured area into th' area <code>XXX</code>.</td>
</tr>
<tr>
<td><strong>onwidthm</strong></td>
<td><code>show</code></td>
<td>See above.</td>
</tr>
<tr>
<td><strong>onwidthl</strong></td>
<td><code>show</code></td>
<td>See above.</td>
</tr>
<tr>
<td><strong>title</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Arbitrary text fer title, displayed 'n th' tooltip.</td>
</tr>
<tr>
<td><strong>rrrambl'n</strong></td>
<td>see notes</td>
<td>Arbitrary HTML t' put into th' rrrambl'n overlay. This parameter may be empty. In this case no overlay will be generated.</td>
</tr>
</tbody>
</table>
<h3 id="area-button">Area-Button</h3>
<p>Contains th' basic functionality t' display area overlay buttons (<code>layouts/partials/topbar/func/area-button.html</code>). Call this from yer own button templates if ye want t' implement a button wit' an overlay area like th' <em>more</em> button.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>plank</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory reference t' th' plank.</td>
</tr>
<tr>
<td><strong>area</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory unique area name fer this area. Display'n two areas wit' th' same value fer <strong>area</strong> be undefined.</td>
</tr>
<tr>
<td><strong>ay'con</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory <a href="../../../shortcodes/icon/#finding-an-icon">Font Awesome ay'con name</a>.</td>
</tr>
<tr>
<td><strong>onempty</strong></td>
<td><code>dis'ble</code></td>
<td>Defines what t' do wit' th' button if its rrrambl'n overlay be empty:<br><br>- <code>dis'ble</code>: Th' button be displayed 'n disabled state.<br>- <code>hide</code>: Th' button be not displayed. Th' next button will move into th' gap.</td>
</tr>
<tr>
<td><strong>onwidths</strong></td>
<td><code>show</code></td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its configured area<br>- <code>hide</code>: Th' button be hidden.<br>- <code>area-XXX</code>: Th' button be moved from its configured area into th' area <code>XXX</code>.</td>
</tr>
<tr>
<td><strong>onwidthm</strong></td>
<td><code>show</code></td>
<td>See above.</td>
</tr>
<tr>
<td><strong>onwidthl</strong></td>
<td><code>show</code></td>
<td>See above.</td>
</tr>
<tr>
<td><strong>title</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Arbitrary text fer title, displayed 'n th' tooltip.</td>
</tr>
</tbody>
</table>
<h3 id="predefined-buttons">Predefined Buttons</h3>
<p>Th' predefined buttons by th' theme (all other buttons besides th' <em>more</em> an' <em>toc</em> button 'n <code>layouts/partials/topbar/button</code>). Call these from yer own redefined area templates if ye want t' offer some o' th' default button behavior.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>plank</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory reference t' th' plank.</td>
</tr>
<tr>
<td><strong>onwidths</strong></td>
<td><em>&lt;varying&gt;</em></td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its configured area<br>- <code>hide_&amp;lt;varying&amp;gt;_ be hidden.&lt;br&gt;- </code>area-XXX<code>: Th' button be moved from its configured area into th' area </code>XXX`.</td>
</tr>
<tr>
<td><strong>onwidthm</strong></td>
<td><em>&lt;varying&gt;</em></td>
<td>See above.</td>
</tr>
<tr>
<td><strong>onwidthl</strong></td>
<td><em>&lt;varying&gt;</em></td>
<td>See above.</td>
</tr>
</tbody>
</table>
<h3 id="predefined-overlay-buttons">Predefined Overlay-Buttons</h3>
<p>Th' predefined buttons by th' theme that open an overlay (the <em>more</em> an' <em>toc</em> button 'n <code>layouts/partials/topbar/button</code>). Call these from yer own redefined area templates if ye want t' offer some o' th' default area button behavior.</p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Default</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>plank</strong></td>
<td><em>&lt;empty&gt;</em></td>
<td>Mandatory reference t' th' plank.</td>
</tr>
<tr>
<td><strong>onempty</strong></td>
<td><em>&lt;varying&gt;</em></td>
<td>Defines what t' do wit' th' button if its rrrambl'n overlay be empty:<br><br>- <code>dis'ble</code>: Th' button be displayed 'n disabled state.<br>- <code>hide</code>: Th' button be not displayed. Th' next button will move into th' gap.</td>
</tr>
<tr>
<td><strong>onwidths</strong></td>
<td><em>&lt;varying&gt;</em></td>
<td>Th' act'n, that should be executed if th' ship be displayed 'n th' given width:<br><br>- <code>show</code>: Th' button be displayed 'n its configured area<br>- <code>hide</code>: Th' button be hidden.<br>- <code>area-XXX</code>: Th' button be moved from its configured area into th' area <code>XXX</code>.</td>
</tr>
<tr>
<td><strong>onwidthm</strong></td>
<td><em>&lt;varying&gt;</em></td>
<td>See above.</td>
</tr>
<tr>
<td><strong>onwidthl</strong></td>
<td><em>&lt;varying&gt;</em></td>
<td>See above.</td>
</tr>
</tbody>
</table>
<footer class="footline">
</footer>
</article>
</div>
</main>
</div>
<aside id="sidebar" class="default-animation showVisitedLinks">
<div id="header-topbar" class="default-animation"></div>
<div id="header-wrapper" class="default-animation">
<div id="header" class="default-animation">
<style>
#logo svg,
#logo svg * {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
fill: #282828 !important;
fill: var(--MENU-SECTIONS-BG-color) !important;
opacity: .945;
}
a#logo {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
font-size: 1.875rem;
font-weight: 300;
margin-top: -.8125rem;
max-width: 60%;
text-transform: uppercase;
width: 14.125rem;
white-space: nowrap;
}
a#logo:hover {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
}
#logo svg {
margin-bottom: -1.25rem;
margin-inline-start: -1.47rem;
width: 40.5%;
}
@media only all and (max-width: 60rem) {
a#logo {
font-size: 1.5625rem;
margin-top: -.1875rem;
}
#logo svg {
margin-bottom: -.75rem;
margin-inline-start: -1.47rem;
}
}
@media all and (-ms-high-contrast:none) {
/* IE11s understanding of positioning is weird at best */
a#logo {
margin-top: -3.625rem;
}
#logo svg {
margin-bottom: -3.875rem;
margin-left: -1.47rem;
}
}
@media only all and (-ms-high-contrast:none) and (max-width: 60rem) {
#logo svg {
margin-left: -1.47rem;
}
}
</style>
<a id="logo" href="../../../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>
<form action="../../../pir/search.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="search-by">Searrrch</label>
<input data-search-input id="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>
<script>
var contentLangs=['en'];
</script>
<script src="../../../js/auto-complete.js?1695062979" defer></script>
<script src="../../../js/lunr/lunr.min.js?1695062979" defer></script>
<script src="../../../js/lunr/lunr.stemmer.support.min.js?1695062979" defer></script>
<script src="../../../js/lunr/lunr.multi.min.js?1695062979" defer></script>
<script src="../../../js/lunr/lunr.en.min.js?1695062979" defer></script>
<script src="../../../js/search.js?1695062979" defer></script>
</div>
<div id="homelinks" class="default-animation">
<hr class="padding">
</div>
<div id="content-wrapper" class="highlightable">
<div id="topics">
<ul class="enlarge morespace collapsible-menu">
<li data-nav-id="/pir/basics/index.html" class="parent "><input type="checkbox" id="section-182650db393a58ea8a0385f10a515d92" aria-controls="subsections-182650db393a58ea8a0385f10a515d92" checked><label for="section-182650db393a58ea8a0385f10a515d92"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Basics</span></label><a class="padding" href="../../../pir/basics/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">1.</b> Basics<i class="fas fa-check read-icon"></i></a><ul id="subsections-182650db393a58ea8a0385f10a515d92" class="morespace collapsible-menu">
<li data-nav-id="/pir/basics/migration/index.html" class=""><a class="padding" href="../../../pir/basics/migration/index.html">What&#39;s New<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/basics/requirements/index.html" class=""><a class="padding" href="../../../pir/basics/requirements/index.html">Requirrrements<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/basics/installation/index.html" class=""><a class="padding" href="../../../pir/basics/installation/index.html">Installat&#39;n<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/basics/configuration/index.html" class=""><a class="padding" href="../../../pir/basics/configuration/index.html">Configurrrat&#39;n<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/basics/customization/index.html" class=""><a class="padding" href="../../../pir/basics/customization/index.html">Customizat&#39;n<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/basics/generator/index.html" class=""><a class="padding" href="../../../pir/basics/generator/index.html">Stylesheet generrrat&#39;r<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/basics/topbar/index.html" class="active"><a class="padding" href="../../../pir/basics/topbar/index.html">Topbarrr modificat&#39;n<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/basics/history/index.html" class=""><a class="padding" href="../../../pir/basics/history/index.html">Historrry<i class="fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/pir/cont/index.html" class=""><input type="checkbox" id="section-4074c32ab128bf79d499f2f6ddf50674" aria-controls="subsections-4074c32ab128bf79d499f2f6ddf50674"><label for="section-4074c32ab128bf79d499f2f6ddf50674"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Rambl&#39;n</span></label><a class="padding" href="../../../pir/cont/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">2.</b> Rambl&#39;n<i class="fas fa-check read-icon"></i></a><ul id="subsections-4074c32ab128bf79d499f2f6ddf50674" class="morespace collapsible-menu">
<li data-nav-id="/pir/cont/pages/index.html" class=""><a class="padding" href="../../../pir/cont/pages/index.html">planks orrrganizat&#39;n<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/cont/archetypes/index.html" class=""><a class="padding" href="../../../pir/cont/archetypes/index.html">Arrrchetypes<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/cont/markdown/index.html" class=""><a class="padding" href="../../../pir/cont/markdown/index.html">Marrrkdown rules<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/cont/imageeffects/index.html" class=""><a class="padding" href="../../../pir/cont/imageeffects/index.html">Image Effects<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/cont/menushortcuts/index.html" class=""><a class="padding" href="../../../pir/cont/menushortcuts/index.html">Menu extrrra shorrrtcuts<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/cont/i18n/index.html" class=""><a class="padding" href="../../../pir/cont/i18n/index.html">Multilingual an&#39; i18n<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/cont/taxonomy/index.html" class=""><a class="padding" href="../../../pir/cont/taxonomy/index.html">Taxonomy<i class="fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/pir/shortcodes/index.html" class=""><input type="checkbox" id="section-215953719902243a01571a1ede64aeeb" aria-controls="subsections-215953719902243a01571a1ede64aeeb"><label for="section-215953719902243a01571a1ede64aeeb"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Shorrrtcodes</span></label><a class="padding" href="../../../pir/shortcodes/index.html"><b style="display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;">3.</b> Shorrrtcodes<i class="fas fa-check read-icon"></i></a><ul id="subsections-215953719902243a01571a1ede64aeeb" class="morespace collapsible-menu">
<li data-nav-id="/pir/shortcodes/attachments/index.html" class=""><a class="padding" href="../../../pir/shortcodes/attachments/index.html">Attachments<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/badge/index.html" class=""><a class="padding" href="../../../pir/shortcodes/badge/index.html">Badge<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/button/index.html" class=""><a class="padding" href="../../../pir/shortcodes/button/index.html">Button<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/children/index.html" class=""><input type="checkbox" id="section-05de666a6804433386d9009e44fa7aa3" aria-controls="subsections-05de666a6804433386d9009e44fa7aa3"><label for="section-05de666a6804433386d9009e44fa7aa3"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu Children</span></label><a class="padding" href="../../../pir/shortcodes/children/index.html">Children<i class="fas fa-check read-icon"></i></a><ul id="subsections-05de666a6804433386d9009e44fa7aa3" class="morespace collapsible-menu">
<li data-nav-id="/pir/shortcodes/children/test/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/test/index.html">plank X<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/children/children-1/index.html" class=""><input type="checkbox" id="section-5c6c78bc0635ef1f61fdb91197081411" aria-controls="subsections-5c6c78bc0635ef1f61fdb91197081411"><label for="section-5c6c78bc0635ef1f61fdb91197081411"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1</span></label><a class="padding" href="../../../pir/shortcodes/children/children-1/index.html">plank 1<i class="fas fa-check read-icon"></i></a><ul id="subsections-5c6c78bc0635ef1f61fdb91197081411" class="morespace collapsible-menu">
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/index.html" class="alwaysopen"><input type="checkbox" id="section-be87ceb25a7988952eb9556a69f3cbdf" aria-controls="subsections-be87ceb25a7988952eb9556a69f3cbdf" checked><label for="section-be87ceb25a7988952eb9556a69f3cbdf"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1</span></label><a class="padding" href="../../../pir/shortcodes/children/children-1/children-1-1/index.html">plank 1-1<i class="fas fa-check read-icon"></i></a><ul id="subsections-be87ceb25a7988952eb9556a69f3cbdf" class="morespace collapsible-menu">
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html" class="alwaysopen"><input type="checkbox" id="section-989ea17e090bb9681da73b58575dcced" aria-controls="subsections-989ea17e090bb9681da73b58575dcced" checked><label for="section-989ea17e090bb9681da73b58575dcced"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 1-1-2</span></label><a class="padding" href="../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-2/index.html">plank 1-1-2<i class="fas fa-check read-icon"></i></a><ul id="subsections-989ea17e090bb9681da73b58575dcced" class="morespace collapsible-menu">
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" class=""><a class="padding" href="../../../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="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" class=""><a class="padding" href="../../../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="fas fa-check read-icon"></i></a></li></ul></li>
<li data-nav-id="/pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html">plank 1-1-3<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li data-nav-id="/pir/shortcodes/children/children-2/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-2/index.html">plank 2<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/children/children-3/index.html" class=""><input type="checkbox" id="section-085f961452d7baa981ace00de789c321" aria-controls="subsections-085f961452d7baa981ace00de789c321"><label for="section-085f961452d7baa981ace00de789c321"><i class="fas fa-chevron-down"></i><i class="fas fa-chevron-right"></i><span class="a11y-only">Submenu plank 3</span></label><a class="padding" href="../../../pir/shortcodes/children/children-3/index.html">plank 3<i class="fas fa-check read-icon"></i></a><ul id="subsections-085f961452d7baa981ace00de789c321" class="morespace collapsible-menu">
<li data-nav-id="/pir/shortcodes/children/children-3/test3/index.html" class=""><a class="padding" href="../../../pir/shortcodes/children/children-3/test3/index.html">plank 3-1<i class="fas fa-check read-icon"></i></a></li></ul></li></ul></li>
<li data-nav-id="/pir/shortcodes/expand/index.html" class=""><a class="padding" href="../../../pir/shortcodes/expand/index.html">Expand<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/highlight/index.html" class=""><a class="padding" href="../../../pir/shortcodes/highlight/index.html">Highlight<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/icon/index.html" class=""><a class="padding" href="../../../pir/shortcodes/icon/index.html">Icon<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/include/index.html" class=""><a class="padding" href="../../../pir/shortcodes/include/index.html">Include<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/math/index.html" class=""><a class="padding" href="../../../pir/shortcodes/math/index.html">Math<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/mermaid/index.html" class=""><a class="padding" href="../../../pir/shortcodes/mermaid/index.html">Merrrmaid<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/notice/index.html" class=""><a class="padding" href="../../../pir/shortcodes/notice/index.html">Notice<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/openapi/index.html" class=""><a class="padding" href="../../../pir/shortcodes/openapi/index.html">OpenAPI<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/siteparam/index.html" class=""><a class="padding" href="../../../pir/shortcodes/siteparam/index.html">SiteParam<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/tab/index.html" class=""><a class="padding" href="../../../pir/shortcodes/tab/index.html">Tab<i class="fas fa-check read-icon"></i></a></li>
<li data-nav-id="/pir/shortcodes/tabs/index.html" class=""><a class="padding" href="../../../pir/shortcodes/tabs/index.html">Tabs<i class="fas fa-check read-icon"></i></a></li></ul></li>
</ul>
</div>
<div id="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='fab fa-fw fa-github'></i> GitHub repo</a></li>
<li><a class="padding" href="../../../pir/showcase/"><i class='fas fa-fw fa-camera'></i> Showcases</a></li>
<li><a class="padding" href="https://gohugo.io/"><i class='fas fa-fw fa-bookmark'></i> Cap'n Hugo Documentat'n</a></li>
<li><a class="padding" href="../../../pir/more/credits/"><i class='fas fa-fw fa-bullhorn'></i> Crrredits</a></li>
<li><a class="padding" href="../../../pir/tags/"><i class='fas fa-fw fa-tags'></i> Arrr! Tags</a></li>
</ul>
</div>
<div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter"></div>
<div id="menu-footer">
<hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter">
<div id="prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks showLangSwitch showVariantSwitch showVisitedLinks">
<ul>
<li id="select-language-container" class="footerLangSwitch showLangSwitch">
<div class="padding menu-control">
<i class="fas fa-language fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="select-language">Language</label>
<select id="select-language" onchange="location = baseUri + this.value;">
<option lang="en" id="en" value="/basics/topbar/index.html">English</option>
<option lang="pir" id="pir" value="/pir/basics/topbar/index.html" selected>Arrr! ☠ Pirrrates ☠</option>
</select>
</div>
<div class="clear"></div>
</div>
</li>
<li id="select-variant-container" class="footerVariantSwitch showVariantSwitch">
<div class="padding menu-control">
<i class="fas fa-paint-brush fa-fw"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="select-variant">Theme</label>
<select id="select-variant" onchange="window.variants && variants.changeVariant( this.value );">
<option id="auto" value="auto" selected>Auto</option>
<option id="relearn-bright" value="relearn-bright">Relearn Bright</option>
<option id="relearn-light" value="relearn-light">Relearn Light</option>
<option id="relearn-dark" value="relearn-dark">Relearn Dark</option>
<option id="zen-light" value="zen-light">Zen Light</option>
<option id="zen-dark" value="zen-dark">Zen Dark</option>
<option id="neon" value="neon">Neon</option>
<option id="learn" value="learn">Learn</option>
<option id="blue" value="blue">Blue</option>
<option id="green" value="green">Green</option>
<option id="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="fas fa-history fa-fw"></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="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( '#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 );
});
</script>
<script async src="../../../js/github-buttons.js?1695062979"></script>
</div>
</div>
</div>
</aside>
<script src="../../../js/clipboard.min.js?1695062979" defer></script>
<script src="../../../js/perfect-scrollbar.min.js?1695062979" defer></script>
<script src="../../../js/theme.js?1695062979" defer></script>
</body>
</html>