orgweb/org-demo.html

<div id="org-demo" style="counter-set: chk 0">
  <asside class="label-left">Metadata </asside>
  <pre class="label-left">
#+title:  <span class="org-document-title">Example Org File</span>
#+author: <span class="org-document-info">TEC</span>
#+date:   <span class="org-document-info">2020-10-27</span></pre>
  <details open>
    <summary>
      <asside class="right" style="position: relative; z-index: -1">
	<h4>Outlining</h4>
	Headlines and folding make structured editing a breeze.
	Plain text makes it easy to sync and version control Org files.
      </asside>
      <pre><span class="org-level-1">* Revamp orgmode.org website</span></pre>
    </summary>
    <asside class="left">
      <h4>Agenda</h4>
      List todos across all your files.
      Filter content, and update it in place.
    </asside>
    <pre>

The <i>/beauty/</i> of org <b>*must*</b> be shared.</pre>
    <details class="replace">
      <summary>
	<pre><span class="org-link">[[https://upload.wikimedia.org/wikipedia/commons/b/bd/Share_Icon.svg]]</span></pre>
      </summary>
      <img src="https://upload.wikimedia.org/wikipedia/commons/b/bd/Share_Icon.svg" alt="share icon" style="height: 3em; margin-left: 1.5em"/>
    </details>
    <details open class="br">
      <summary>
	<pre><span class="org-level-2">** <span class="org-done">DONE Make screenshots</span></span></pre>
      </summary>
      <pre>   <span class="org-special-keyword">CLOSED:</span> <span class="org-date">[2020-09-03 Thu 18:24]</span>

</pre>
    </details>
    <details open>
      <summary>
	<pre><span class="org-level-2">** <span class="org-done">DONE Restyle Site CSS</span></span></pre>
      </summary>
      <pre>

Go through <span class="org-link"><a href="/resources/style/org.css">[[file:style.scss][stylesheet]]</a></span>

</pre>
    </details>
    <input type="checkbox" class="chk" id="chk1" checked />
    <input type="checkbox" class="chk" id="chk2" checked />
    <input type="checkbox" class="chk extra" id="chk3" />
    <input type="checkbox" class="chk" id="chk4" />
    <input type="checkbox" class="chk" id="chk5" checked />
    <input type="checkbox" class="chk extra" id="chk6" />
    <input type="checkbox" class="chk" id="chk7" />
    <details>
      <summary>
	<pre><span class="org-level-2">** <span class="org-todo">TODO</span> Check CSS on main pages <span class="count-res"></span></span></pre>
      </summary>
      <pre class="countme">

<label for="chk1"><span class="org-list-dt">-</span> Index page</label>
<label for="chk2"><span class="org-list-dt">-</span> Quickstart</label>
<label for="chk3"><span class="org-list-dt">-</span> Features</label>
<label for="chk4"><span class="org-list-dt">-</span> Releases</label>
<label for="chk5"><span class="org-list-dt">-</span> Install</label>
<label for="chk6"><span class="org-list-dt">-</span> Manual</label>
<label for="chk7"><span class="org-list-dt">-</span> Contribute</label>
</pre>
    </details>
  </details>
  <details open class="label-left">
    <summary>
      <asside class="label-left">Prose</asside>
      <pre><span class="org-level-1">* Learn Org</span></pre>
    </summary>
    <pre>

Org makes easy things trivial and complex things practial.

You don't need to learn Org before using Org: read the quickstart
page and you should be good to go.  If you need more, Org will be
here for you as well: dive into the manual and join the community!
    </pre>
    <details open>
      <summary>
	<pre><span class="org-level-2">** Feedback</span></pre>
      </summary>
      <pre>

<span class="org-special-keyword">#+include: "other/feedback.org*manual" :only-contents t</span></pre>
    </details>
  </details>
  <details open>
    <summary>
      <pre>
<span class="org-level-1">* Check CSS minification ratios</span>
      </pre>
    </summary>
    <asside class="right">
      <h4>Babel</h4>
      Perform literate programing in org,
      with notebook-like live code execution in the buffer.
    </asside>
    <asside class="label-left">Code</asside>
    <details open>
      <summary><pre class="label-left" style="background-color: #ccc4"><span class="org-block-begin-line">#+begin_src python</span></pre></summary>
      <pre class="src label-left" style="background-color: #fff4">
<span class="org-keyword">from</span> pathlib <span class="org-keyword">import</span> Path
<span class="org-variable-name">cssRatios</span> = []
<span class="org-keyword">for</span> css_min <span class="org-keyword">in</span> Path(<span class="org-string">"resources/style"</span>).glob(<span class="org-string">"*.min.css"</span>):
    <span class="org-variable-name">css</span> = css_min.with_suffix(<span class="org-string">''</span>).with_suffix(<span class="org-string">'.css'</span>)
    cssRatios.append([css.name,
    <span class="org-string">"{:.0f}% minified ({:4.1f} KiB)"</span>.<span class="org-builtin">format</span>( <b>100</b> *
                      css_min.stat().st_size / css.stat().st_size,
                      css_min.stat().st_size / <b>1000</b>)])
<span class="org-keyword">return</span> cssRatios
</pre>
      <pre class="label-left" style="background-color: #ccc4"><span class="org-block-end-line">#+end_src</span></pre>
    </details>
    <details open>
      <summary>
	<asside class="label-left">Evaluated results</asside>
	<pre class="label-left br"><span class="org-block-begin-line">#+RESULTS:</span></pre>
      </summary>
      <pre class="label-left"><span class="org-table">| index.css    | 76% minified ( 1.4 KiB) |
| org-demo.css | 77% minified ( 2.8 KiB) |
| errors.css   | 74% minified ( 4.9 KiB) |
| org.css      | 75% minified (10.7 KiB) |
</span></pre>
    </details>
  </details>
</div>