123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 |
- <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 practical.
- 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 programming 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>
|