1 line
No EOL
7.8 KiB
HTML
1 line
No EOL
7.8 KiB
HTML
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>NML | Basic Layouts</title><link rel="stylesheet" href="../style.css"></head><body><div class="layout"><input id="navbar-checkbox" class="toggle" type="checkbox" style="display:none" checked><div id="navbar"><ul><li class="navbar-entry"><a href="Getting Started.html">Getting Started</a></li><li class="navbar-entry"><a href="Sections.html">Sections</a></li><li class="navbar-entry"><a href="Variables.html">Variables</a></li><li class="navbar-entry"><a href="References.html">References</a></li><li class="navbar-entry"><a href="Imports.html">Imports</a></li><li class="navbar-entry"><a href="Raw.html">Raw</a></li><li class="navbar-entry"><a href="Comments.html">Comments</a></li><li><details><summary class="navbar-category">External Tools</summary><ul><li class="navbar-entry"><a href="Graphviz.html">Graphviz</a></li><li class="navbar-entry"><a href="LaTeX.html">LaTeX</a></li></ul></details></li><li><details><summary class="navbar-category">Blocks</summary><ul><li class="navbar-entry"><a href="Blockquotes.html">Blockquotes</a></li><li class="navbar-entry"><a href="Code.html">Code</a></li><li class="navbar-entry"><a href="Lists.html">Lists</a></li></ul></details></li><li><details><summary class="navbar-category">Lua</summary><ul><li class="navbar-entry"><a href="Lua Basics.html">Lua</a></li></ul></details></li><li><details open><summary class="navbar-category">Styles</summary><ul><li class="navbar-entry"><a href="Basic Styles.html">Basic</a></li><li class="navbar-entry-current"><a href="Basic Layouts.html">Layouts</a></li><li class="navbar-entry"><a href="User-Defined Styles.html">User-Defined</a></li></ul></details></li></ul></div><label for="navbar-checkbox" class="navbar-checkbox-label">☰</label><div class="content"><div class="toc"><span>Table of Content</span><ol><li value="1"><a href="#Layouts">Layouts</a></li><li value="2"><a href="#Available_layouts">Available layouts</a></li><ol><li value="1"><a href="#Centered">Centered</a></li><li value="2"><a href="#Split">Split</a></li><li value="3"><a href="#Spoiler">Spoiler</a></li></div><h1 id="Layouts">1. Layouts <a class="section-link" href="#Layouts">🔗 </a> </h1><p>You can create layout blocks by using the following tokens:</p><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">#+LAYOUT_BEGIN <layout_name></span></code></a> Starts layout <em><layout_name></em></li><li><a class="inline-code"><code><span style="color:#c0c5ce;">#+LAYOUT_NEXT</span></code></a> Advances layout to the next block</li><li><a class="inline-code"><code><span style="color:#c0c5ce;">#+LAYOUT_END</span></code></a> Ends last created layout</li></ul><p>Here's an example of what you can do using layouts (with flashy colors for show):</p><div class="split-container"><div class="split" style=background-color:#F00;flex:0.5><p>First</p><div class="centered" style=background-color:#FF0><p>Second</p></div></div><div class="split" style=background-color:#00F><p>Third</p><div class="split-container"><div class="split" style=background-color:#0FF><p>Fourth</p></div><div class="split" style=background-color:#0F0><p>Fifth</p></div></div></div></div><p>Given by the following code:</p><div class="code-block"><div class="code-block-content"><table cellspacing="0"><tr><td class="code-block-gutter"><pre><span>1</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">#+LAYOUT_BEGIN[style=background-color:#F00;flex:0.5] Split</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>2</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">First</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>3</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> #+LAYOUT_BEGIN[style=background-color:#FF0] Centered</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>4</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> Second</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>5</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> #+LAYOUT_END</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>6</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">#+LAYOUT_NEXT[style=background-color:#00F]</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>7</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> Third</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>8</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> #+LAYOUT_BEGIN[style=background-color:#0FF] Split</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>9</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> Fourth</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>10</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> #+LAYOUT_NEXT[style=background-color:#0F0]</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>11</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> Fifth</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>12</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;"> #+LAYOUT_END</span></pre></td></tr><tr><td class="code-block-gutter"><pre><span>13</span></pre></td><td class="code-block-line"><pre><span style="color:#c0c5ce;">#+LAYOUT_END</span></pre></td></tr></table></div></div><p><i>(indentation is for readability)</i></p><h1 id="Available_layouts">2. Available layouts <a class="section-link" href="#Available_layouts">🔗 </a> </h1><h2 id="Centered">2.1. Centered <a class="section-link" href="#Centered">🔗 </a> </h2><p>Centered layout align text to the center of the current block.</p><h4 id="Style">Style <a class="section-link" href="#Style">🔗 </a> </h4><p>The <a class="inline-code"><code><span style="color:#c0c5ce;">Centered</span></code></a> layout uses the <em>.centered</em> css class to center the text.</p><h4 id="Properties">Properties <a class="section-link" href="#Properties">🔗 </a> </h4><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">style</span></code></a> Added css style to the div (defaults to none)</li></ul><h2 id="Split">2.2. Split <a class="section-link" href="#Split">🔗 </a> </h2><h4 id="Style">Style <a class="section-link" href="#Style">🔗 </a> </h4><p>The <a class="inline-code"><code><span style="color:#c0c5ce;">Split</span></code></a> layout uses the <em>.split-container</em> and <em>.split</em> css class to create the desired layout. If you wish to modify the relative width of the splits: add <em>style=flex: 0.5</em> in the properties, this makes the following split half the width of the other splits.</p><h4 id="Properties">Properties <a class="section-link" href="#Properties">🔗 </a> </h4><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">style</span></code></a> Added css style to the div (defaults to none)</li></ul><h2 id="Spoiler">2.3. Spoiler <a class="section-link" href="#Spoiler">🔗 </a> </h2><p>The spoiler layout creates a collapsed element which can be opened.</p><details class="spoiler"><summary>Spoiler demo</summary><p>This content is <i>hidden</i>.</p></details><h4 id="Style">Style <a class="section-link" href="#Style">🔗 </a> </h4><p>The <a class="inline-code"><code><span style="color:#c0c5ce;">Spoiler</span></code></a> layout uses the <em>.spoiler</em> class, combined with <em><details>/<summary></em> to create the desired layout.</p><h4 id="Properties">Properties <a class="section-link" href="#Properties">🔗 </a> </h4><ul><li><a class="inline-code"><code><span style="color:#c0c5ce;">title</span></code></a> The spoiler title</li></ul><p></p></div></div></body></html> |